Вертикальный текст: как?
Недавно возникла задача написания вертикального текста. Причём, именно текстом. В CSS3 есть свойство «writing-mode», но пока его никто, кроме Internet Explorer не поддерживает. Так что для остальных браузеров генерируется SVG с вертикальным текстом — изображение подключается при помощи протокола «data». Текст пишется дважды: для IE внутри div, для остальных браузеров (Safari, Mozilla/FireFox и Opera) — внутри атрибута тега «object». Дважды задаются и параметры текста (размер и имя шрифта).
<html>
<head>
<style type="text/css">
html>body .canv { display: none }
.canv { filter: flipv() fliph(); writing-mode: tb-rl; width: 10px; height: 150px;
font-size:12px; font-family: Arial; background-color: white }
html>body .obj { display: block; width: 10px; height: 150px }
.obj { display: none }
</style>
</head>
<body>
<div class="canv">Hello!</div>
<object class="obj" type="image/svg+xml"
data="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'>
<text x='-150' y='10' font-family='Arial' font-size='12' transform='rotate(-90)'>Hello!</text>
</svg>">
</object>
</body>
</html>Замечательно работает во всех соврененных браузерах, но есть недостатки: Safari до сих пор не умеет масштабировать SVG вместе с текстом (а SVG — это вектор!), а FireFox, масштабируя SVG, не увеличивает размеры object. Задание размеров в «pt» ситуацию не исправило.
Тег «object» задан фиксированных размеров, если нужно изменить размер, то параметры «x» и «y» у текста внутри SVG нужно будет исправить (процедура пересчёта значений очевидна, по-моему).
Конструкция «html>body» позволяет «прятать» CSS от Internet Explorer (включая седьмую версию), свойство background-color у класса «canv» проставлено для исправления ошибки отображения в Internet Explorer 6 и ниже — без этого свойства текст портится.
И не должно было, по идее, pt — абсолютные единицы (чтоб заведомо масштабировалось, нужны em). Но проблема даже не в этом, а в том, что даже при масштабировании object-а координаты начала текста в самом SVG остаются жестко фиксированы в пикселях...
Для 7-ки — только в quirks mode (без доктайпа). По-хорошему, надо conditional comments юзать.
Спасибо, хорошие замечания. На сайте у меня именно через conditional comments и сделано.