Таблиці з вертикальним текстом

Давайте поглянемо на таблицю, зображену нижче. Не будемо вникати в вміст - я взяв першу ліпшу, звернемо увагу на оформлення, зокрема на напрям тексту в перших двох колонках.

Дивно, але настільки звичне і зручне форматування нехарактерно для інтернету через відсутність належної підтримки. З приходом CSS3 така підтримка з'явиться, але поки, подібні таблиці створюються, як правило, за допомогою зображень без використання призначених для цих цілей табличних тегів. Що ж, будемо чекати світлих часів, проте що заважає нам поекспериментувати і спробувати знайти рішення вже зараз?

Завдання: Дана табліцанеобходімо, щоб текст в осередках з класом vertical при відображенні в браузері мав вертикальний напрямок «знизу-вгору».

CSS-рішення існує лише для Internet Explorer. Тільки цей «неправильний» браузер, починаючи з версії 5.5, частково підтримує передбачене в CSS3 для цих цілей властивість writing-mode. Міститься у IE на озброєнні і пропіетарное layout-flow. проте ні за допомогою першого, ні за допомогою другого властивості мені так і не вдалося задати тексту потрібний напрямок «знизу-вгору». Довелося додатково використовувати фільтри flipH і flipV для горизонтального і вертикального повороту тексту. Остаточно приходимо до наступного опису класу vertical:

Задавши зазначені стилі, текст в Internet Explorer відобразиться в потрібному напрямку.

У пошуках ж універсального рішення в першу чергу на думку спадає очевидна ідея: замінити текстовий вміст на ідентичне графічне, але повернене на 90 градусів. Для прикладу, текст «Hello World!» Може бути замінений на що-небудь на зразок

. або «Вміст основних клітинних елементів» - на . Основне навантаження по генерації такого псевдо-тексту в цьому випадку ляже на серверну частину, а значить можна говорити про кросбраузерності.

Цей же підхід може бути втілений і на клієнтському рівні. Серед численних методик заміни тексту зображенням, для нашого випадку можна застосувати популярний sIFR - замінити текст флеш-роликом, або скористатися здатністю передових браузерів генерувати SVG-зображення. Останній прийом я і вирішив продемонструвати як приклад рішення.

Якщо браузер підтримує SVG, то у відповідних осередках текст відобразиться належним чином. Так відбувалося в Opera 9 і в Gecko, починаючи з версії 1.8. В Internet Explorer замену не виробляємо, так як для цього веб-провідника існує згадане вище просте рішення, крім того, для відображення SVG в IE потрібні зовнішні плагіни, які, швидше за все, не будуть встановлені у користувача.

Робочий приклад можна подивитися тут.