?

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 ошибка. должно быть так . Исправил

(Анонимно)

Решение просто отличное. Спасибо за ИЕ. Через vml правда тоже можно сделать, но через фильтры думаю проще
smile

Июль 2008

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