Это сайт — моя персональная записная книжка. Интересна мне, по большей части, история, своя жизнь и немного программирование.

Вертикальный текст: как?

Недавно возникла задача написания вертикального текста. Причём, именно текстом. В 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 и ниже — без этого свойства текст портится.

2 комментария
chikibryki.livejournal.com 2007

Задание размеров в «pt» ситуацию не исправило.

И не должно было, по идее, pt — абсолютные единицы (чтоб заведомо масштабировалось, нужны em). Но проблема даже не в этом, а в том, что даже при масштабировании object-а координаты начала текста в самом SVG остаются жестко фиксированы в пикселях...

Конструкция «html>body» позволяет «прятать» CSS от Internet Explorer (включая седьмую версию)

Для 7-ки — только в quirks mode (без доктайпа). По-хорошему, надо conditional comments юзать.

Евгений Степанищев (bolknote.ru) 2007

Спасибо, хорошие замечания. На сайте у меня именно через conditional comments и сделано.