mongoose (a_shapovalov) wrote,
mongoose
a_shapovalov

Текст в таблице, повернутый на 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 градусов


Как это работает в различных браузерах:
  1. В IE <div class=vcanv> будет отображаться повернутым на 90 градусов при помощи div.vcanv, а <object> будет скрыт.
  2. В FF <object> будет отображаться при помощи html>body .obj, а <div class=vcanv> будет скрыт при помощи div.vcanv. Хак body[class|="page-body"] применяется для того, чтобы сккрыть <div class=vcanv> только для FF и OPERA выше 9 версии.
  3. В OPERA ниже 9 версии <div class=vcanv> будет отображаться не повернутым, а <object> будет скрыт. OPERA выше 9 версии понимает хак body[class|="page-body"] и SVG-объекты, поэтому <object> будет отображаться при помощи html>body .obj.




Tags: html, svg
Subscribe
  • Post a new comment

    Error

    Comments allowed for friends only

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 3 comments