Повернуть текст 270 ° в HTML/inlineSVG без фиксированной высоты?

Question

Я хочу иметь таблицу, как это в HTML5:

То есть названия из столбца 2 на повернута 270 °, а вертикально к основанию, так и по горизонтали по центру, и белый шрифт на черном но не устанавливая явную высоту для строки заголовка/столбцов и, желательно, не прибегая к использованию JavaScript для целей макета ...

Теперь, до сих пор, я делаю это, используя построение образа на стороне сервера, например
<img src="handler.ashx?text=bla&fg=FFFFFF&bg=000000" />
К сожалению, это отключает поиск текста с CTRL + F, что довольно неудачно, так как существует много групп (сотен).

В настоящее время существует несколько сообщений на SO как
Rotate HTML SVG Text by 270 degrees
How to use CSS Rotate() in TH Table Tags
Rotating table header text with CSS transforms
https://jsfiddle.net/t5GgE/1/

Но все они либо набор высоты явно (или косвенно), или он не работает правильно с фоновым цветом в заголовке таблицы.

Теперь то, что я до сих пор это:
https://jsfiddle.net/kn46f38n/6/

Какие есть проблемы, что вертикальная выравнивание дна не работает, как положено, и высота не регулируется автоматически (если я не добавить холст изображение) ,

Все это довольно обескураживает, и в основном это означает, что единственный прогресс заключается в замене обработчика холстом, который облегчает работу сервера, но не является каким-либо успехом в области поиска и, что хуже всего, использует JS для в то время как есть еще браузеры, которые не поддерживают холст.

Нет ли способа сделать это в HTML/inlineSVG без необходимости устанавливать явную высоту (высота любого типа, например, включая преобразование), и не прибегать к javascript?

Без JQuery:

var maxH = 0; 
// Find the column label with the tallest height 
var hdrs = document.querySelectorAll(".hdr") 
for (i = 0; i < hdrs.length; i++) 
{ 
    var bbox = hdrs[i].getBoundingClientRect(); 
    if (bbox.height > maxH) 
     maxH = bbox.height; 
} 


// Make all the label cells that height 
var cols = document.querySelectorAll(".col") 
for (i = 0; i < cols.length; i++) 
    cols[i].style.height = maxH + "px"; 

Answer 1

Ах, неважно, я получил это сам.
Секрет имеет вертикальный-lr, поэтому ширина и высота уже правильны. Тогда все, что вам нужно сделать, это повернуть текст на 180 градусов с спектрально происхождения центра ...

Работает в Chrome и Firefox и IE 11 & 10 (в соответствии с MDN обратно совместим с IE9, но с мс-преобразования -rotate не работает должным образом, он изящно деградирует только в режиме вертикальной записи, если вы опускаете ms-transform).

https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode#Browser_compatibility
https://msdn.microsoft.com/en-us/library/ms531187(v=vs.85).aspx

.blackhd 
{ 
    vertical-align: bottom; 
    width: 40px; 
    #height: 100px; 
    border: 1px solid hotpink; 
    background-color: black; 
    text-align: center; 
} 

.vert 
{ 
    display: inline-block; 
    color: white; 
    #font-weight: bold; 
    font-size: 15px; 
    writing-mode: vertical-lr; 
    #writing-mode: vertical-rl; 
    -ms-writing-mode: tb-rl; 
    transform-origin: center; 
    transform: rotate(180deg); 
    padding-top: 2mm; 
    padding-bottom: 3mm; 
} 


<table> 
    <tr> 
     <td class="blackhd"><span class="vert">abc</span></td> 
     <td class="blackhd"><span class="vert">defghijkl</span></td> 
    </tr> 
    <tr> 
     <td>abc</td> 
     <td>defghijklmnopqr</td> 
    </tr> 
</table> 

Answer 2

Как насчет следующего? Просто использует довольно минимальный бит jQuery.

// Find the column label with the tallest height 
 
var maxH = 0; 
 
$(".hdr").each(function(i, item) { 
 
    var bbox = $(item).get(0).getBoundingClientRect(); 
 
    if (bbox.height > maxH) { 
 
    maxH = bbox.height; 
 
    } 
 
}); 
 

 
// Make all the label cells that height 
 
$(".col").css('height', maxH + 'px');

.col 
 
{ 
 
    background-color:black; 
 
    width: 2em; 
 
    line-height: 2em; 
 
    vertical-align: bottom; 
 
} 
 

 
.hdr 
 
{ 
 
    transform: rotate(270deg); 
 
    transform-origin: left top 0; 
 
    color: white; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
    <td class="col"><div class="hdr">Test</div></td> 
 
    <td class="col"><div class="hdr">Test 2</div></td> 
 
    <td class="col"><div class="hdr">Objekt&uuml;bersicht</div></td> 
 
    <td class="col"><div class="hdr">Test3</div></td> 
 
</tr> 
 
<tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    <td>4</td> 
 
</tr> 
 
</table>

Answer 3

Нор JQuery, ни SASS необходимы, но, как минимум, Javascript, кажется, необходимо: https://jsfiddle.net/yy3pgvoy/

Здесь минимальное решение. Сначала HTML может быть это: текст

<table> 
     <tr id="headers"> 
      <td>Test</td> 
      <td>Test 2</td> 
      <td>Objektübersicht</td> 
      <td>Test3</td> 
      <td>Veni vidi vici</td> 
     </tr> 
     <tr> 
      <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> 
     </tr> 
    </table> 

заголовки помещаются непосредственно в ТД, то Ctrl-F будет работать должным образом.

Затем этот крошечный скрипт будет вычислять высоту заголовка, глядя на максимальную ширину TD перед вращением.

var size = 0; 
var cells = document.querySelectorAll("#headers > td"); 
Array.prototype.forEach.call(cells, function(e) { 
    var rect = e.getBoundingClientRect(); 
    size = Math.max(size, rect.width); 
    e.innerHTML = "<div class='rot'><span>" + e.textContent + "</span></div>"; 
}); 
var headers = document.querySelector("#headers"); 
headers.style.height = Math.ceil(size) + "px"; 
headers.className = "rotate"; 

Наконец, вы можете иметь этот CSS:

td { width: 32px; text-align: center; } 
#headers > td { 
    position: relative; 
    line-height: 32px; 
    font-weight: bold; 
    color: #fff; 
    background: #000; 
    white-space: nowrap; 
    padding: 0 1ex; 
    text-align: center; 
    vertical-align: bottom; 
} 
#headers.rotate > td { width: 32px; max-width: 32px; white-space: normal; padding: 0; } 
#headers.rotate > td > div 
{ 
    position: relative; 
    display: block; 
    width: 32px; 
    max-width: 32px; 
    height: 32px; 
    line-height: 32px; 
    text-align: center; 
    overflow: show; 
    transform: rotate(-90deg); 
} 
#headers.rotate > td > div > span 
{ 
    position: absolute; 
    left: 1ex; 
    display: inline-block; 
    white-space: nowrap; 
    line-height: 32px; 
} 

Я просто использовал transform без исключений для всех браузеров, но это легко добавить все префиксы поставщика.