![[info]](http://l-stat.livejournal.com/img/userinfo.gif){kind=small}
Текст в таблице, повернутый на 90 градусов
Как-то заказчик попросил сделать таблицы с такого вида:
Казалось бы, ничего проще - наделал картинок и готово. Но дело осложнялось тем, что вертикальных столбцов было порядка 150. Поискав в Сети всевозможную информацию, наткнулся на SVG и понял - вот оно.
Для реализации такой таблицы необходимо в каждую ячейку с вертикальным текстом поместить такую конструкцию:
<body class="page-body">
<div class=vcanv>Ваш текст</div>
<object data="data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg'><text x='-200' y='12' class='rotate_text' transform='rotate(-90)'>
<tspan>Ваш текст</tspan>
</text></svg>" type="image/svg+xml" style="width: 15px;" class="obj"/>
</body>
И в таблице стилей прописать:
div.vcanv {
display: block;
filter: "flipv() fliph()";
writing-mode: "tb-rl";
width: 14px;
height: 150px;
}
body[class|="page-body"] div.vcanv{
display: none;
}
html>body .obj{
display: block; width: 42px; height: 200px;
}
.obj {
display: none;
}
Теперь разберем подробно вышеописанное.
Со стилями для <div class=vcanv> все понятно, поэтому рассмотрим свойства объекта text для <object>:
x='-200' - задает высоту объекта в пикселях
y='15' - задает ширину объекта в пикселях
transform='rotate(-90)' - поворачивает текст на 90 градусов
Как это работает в различных браузерах:
Казалось бы, ничего проще - наделал картинок и готово. Но дело осложнялось тем, что вертикальных столбцов было порядка 150. Поискав в Сети всевозможную информацию, наткнулся на SVG и понял - вот оно.
Для реализации такой таблицы необходимо в каждую ячейку с вертикальным текстом поместить такую конструкцию:
<body class="page-body">
<div class=vcanv>Ваш текст</div>
<object data="data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg'><text x='-200' y='12' class='rotate_text' transform='rotate(-90)'>
<tspan>Ваш текст</tspan>
</text></svg>" type="image/svg+xml" style="width: 15px;" class="obj"/>
</body>
И в таблице стилей прописать:
div.vcanv {
display: block;
filter: "flipv() fliph()";
writing-mode: "tb-rl";
width: 14px;
height: 150px;
}
body[class|="page-body"] div.vcanv{
display: none;
}
html>body .obj{
display: block; width: 42px; height: 200px;
}
.obj {
display: none;
}
Теперь разберем подробно вышеописанное.
Со стилями для <div class=vcanv> все понятно, поэтому рассмотрим свойства объекта text для <object>:
x='-200' - задает высоту объекта в пикселях
y='15' - задает ширину объекта в пикселях
transform='rotate(-90)' - поворачивает текст на 90 градусов
Как это работает в различных браузерах:
- В IE <div class=vcanv> будет отображаться повернутым на 90 градусов при помощи div.vcanv, а <object> будет скрыт.
- В FF <object> будет отображаться при помощи html>body .obj, а <div class=vcanv> будет скрыт при помощи div.vcanv. Хак body[class|="page-body"] применяется для того, чтобы сккрыть <div class=vcanv> только для FF и OPERA выше 9 версии.
- В OPERA ниже 9 версии <div class=vcanv> будет отображаться не повернутым, а <object> будет скрыт. OPERA выше 9 версии понимает хак body[class|="page-body"] и SVG-объекты, поэтому <object> будет отображаться при помощи html>body .obj.
