?

Log in

No account? Create an account
smile

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




Метки: ,

Comments

(Анонимно)

Не работает эта конструкция нигде...

Пробовал в IE, FF и Opera - нигде не работает.

Re: Не работает эта конструкция нигде...

В таком виде работает в ИЕ 6 и 7.
для остальных браузеров сорри, в object ошибка. должно быть так . Исправил
smile

Июль 2008

Вс Пн Вт Ср Чт Пт Сб
  12345
6789101112
13141516171819
20212223242526
2728293031  
Разработано LiveJournal.com