← maximals.ru / статьи

Вертикальный текст в HTML

 РСС →

Всю жизнь думал, что написание текста вертикально — стандартная возможность HTML и CSS. Да не тут-то было!

Для одного из проектов понадобилась печать наклеек на термопринтере. Принтеру подаётся HTML-документ. Наклейка содержит вертикальные текстовые блоки. Как оказалось, решение задачи не такое уж красивое и тривиальное.

Майкрософт, как водится, придумывает свои элементы в HTML, таблицах стилей и трансформации текста на вебе, никак не согласованные со стандартами либо существующие только в новейших, не дошедших до релизов стандартов (в настоящее время таковым является стандарт CSS3). А другие браузеры не вводят даже те возможности, которые есть в существующих стандартах. Всё это привносит в работу веб-технологов элементы стратегии, психологического триллера и прочих интересных жанров. Как говорится, строгость стандартов компенсируется необязательностью их выполнения.

Но вернёмся к нашим баранам вертикалям.

Internet Explorer предлагает нам воспользоваться этой конструкцией, которая существует в черновом варианте CSS3:

  1. writing-mode: tb-rl; filter: flipv() fliph();

В остальных браузерах придётся пока воспользоваться возможностями SVG-графики:

  1. <svg xmlns='http://www.w3.org/2000/svg'>
  2.     <text x='-90px' y='15px'
  3.         font-family='Tahoma' font-size='16px' fill='#333333'
  4.         transform='rotate(-90)'
  5.         text-rendering='optimizeSpeed'>Vertical Text</text>
  6. </svg>

Для универсального решения объединим оба варианта с помощью условных конструкций в HTML-коде:

  1. <html>
  2.     <head>
  3.         <style type="text/css">
  4.             html>body .obj  { display: block; }
  5.             html>body .vert { display: none; }
  6.  
  7.             .obj, .vert { height: 90px; width: 20px; }
  8.             .vert_old   { font-family: Tahoma, Arial; font-size: 16px; color: #333333;
  9.                           width: 90px; }
  10.         </style>
  11.  
  12.         <![if IE]>
  13.             <style> type="text/css">
  14.                 .obj  { display: none; }
  15.                 .vert { display: block; writing-mode: tb-rl; filter: flipv() fliph();
  16.                         font-family: Tahoma, Arial; font-size: 16px; color: #333333; }
  17.             </style>
  18.         <![endif]>
  19.     </head>
  20.     <body>
  21.  
  22.         <div class="vert">Vertical Text</div>
  23.         <![if !IE]>
  24.             <object class="obj" type="image/svg+xml"
  25.                 data="data:image/svg+xml,&lt;svg xmlns='http://www.w3.org/2000/svg'&gt;
  26.                     &lt;text x='-90px' y='15px'
  27.                     font-family='Tahoma' font-size='16px' fill='#333333'
  28.                     transform='rotate(-90)'
  29.                     text-rendering='optimizeSpeed'&gt;Vertical Text&lt;/text&gt;
  30.                     &lt;/svg&gt;">
  31.                 <div class="vert_old">Vertical Text</div>
  32.             </object>
  33.         <![endif]>
  34.  
  35.     </body>
  36. </html>

Результат

← Свиной грипп   Двоичное →
Вертикальный текст в HTML
© Максименко Ал 17:23, 8 ноября 2009 года