Без заголовка

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

chikibryki.livejournal.com (chikibryki.livejournal.com)
5 декабря 2007, 14:25

Задание размеров в "pt" ситуацию не исправило.
И не должно было, по идее, pt - абсолютные единицы (чтоб заведомо масштабировалось, нужны em). Но проблема даже не в этом, а в том, что даже при масштабировании object-а координаты начала текста в самом SVG остаются жестко фиксированы в пикселях...
Конструкция "html>body" позволяет "прятать" CSS от Internet Explorer (включая седьмую версию)
Для 7-ки - только в quirks mode (без доктайпа). По-хорошему, надо conditional comments юзать.

bolk (bolknote.ru)
5 декабря 2007, 16:01

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

Ваше имя или адрес блога (можно OpenID):

Текст вашего комментария, не HTML:

Кому бы вы хотели ответить (или кликните на его аватару)