Вертикальное направление текста в CSS
Четверг, 19 июня 2008
Один мой друг-программист, очень любит озадачивать меня различными головоломками, из-за которых я потом теряю сон и начинаю сомневаться в своих знаниях. Так случилось и на этот раз, когда в ICQ появился вопрос: «А можно в CSS поменять направление текста на вертикальное?»
А действительно, можно ли? А еще чтобы без JavaScript или замены картинками? Я никогда не пробовал и не видел, чтобы кто-то использовал это в своих работах.
Так как в этот раз ситуация не была критичной и мозг не сломался, с ходу предложил ему свое решение, правда не совсем красивое в плане семантики, но пока единственное, что пришло в голову для решения данной задачи. Да и речь идет, всего о нескольких пустых div'ах, которыми можно пренебречь ради дизайнерских причуд.
Поиски в сети
Есть несколько способов сделать что-то похожее средствами CSS для вертикального текста, но поддержка этих методов браузерами оставляет желать лучшего, поэтому можно забыть о легком пути.
В свое время, microsoft.com реализовала для IE5.5+ свойство writing-mode, которое позволяет поворачивать на 90o текст целыми блоками, но это что-то вроде очередной прививки от недоразвитости для своего продукта (почти рабочий пример можно посмотреть на msdn.microsoft.com).
Кстати свойство writing-mode сейчас входит в спецификацию CSS 3, но на данный момент не поддерживается даже только что вышедшим Mozilla Firefox 3. Там же (в спецификации), есть еще несколько интересных свойств для текста, на которые рекомендую обратить внимание: direction (тоже бывшая CSS-инъекция от Microsoft) и glyph-orientation-vertical/horizontal.
Мое решение
Итак, не нашев ничего проще, предлагаю свой вариант.
Первая проблема, которую нужно решить — как разрывать слова на отдельные буквы? Очень просто, нужно отделить буквы друг от друга пробелами (я же говорил, что будет не совсем красиво :) ) XHTML:
<div class="vertical"> Э т и с л о в а н у ж н о р а з б и т ь н а о т д е л ь н ы е б у к в ы . </div>
CSS:
.vertical {
width: 1em;
line-height: 1em;
}
Ширину блока задаем равной ширине 1em (относительная величина, равная ширине буквы «m» для выбранного шрифта), для того, чтобы каждая следующая буква выводилась с новой строки, а line-height позволяет играть расстоянием между буквами (строками).
Пример:
Так, на данном этапе есть проблемка — браузеры не обрабатывают несколько пробелов для отступа между словами. Её можно решить путем вставки пустых div'ов-разделителей. Дорабатываем XHTML:
<div class="vertical"> Э т и<div class="separator"></div>с л о в а<div class="separator"></div>н у ж н о<div class="separator"></div>р а з д е л и т ь<div class="separator"></div>п у с т ы м и<div class="separator"></div>б л о к а м и. </div>
Теперь CSS:
.separator {
height: 1.4em;
}
Высоту ставим несколько больше, чем расстояние между буквами в словах, чтобы весь текст легко читался.
Рабочий пример:
Соль и специи добавить по вкусу
Использовать можно по своему смотрению для реализации сносок, пояснений, заголовков и т.д. Дополнительно можно применить к тексту :first-letter или text-transform, в общем извращаться экспериментировать до получения интересных результатов.
Если хотите использовать несколько предложений, расположенных рядом друг с другом, то каждое следует помещать в div с классом vertical, и применить к ним float. Только обязательно разделяйте такие предложения большими расстояними друг от друга, так как глаза читателя постоянно будут пытаться прочитать текст слева-направо, как обычно (ну не китайцы же мы, читать сверху вниз :) )
Сканер блогов (сегодня про таблицы)
Немного мыслей про верстку полосатых таблиц на cssblast.ru. На webew.ru рассказано о работе с таблицами посредством DOM.
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе событий:
- подпишитесь на обновления по RSS
- получайте новые статьи на E-mail
- добавьте в Twitter: Вертикальное направление текста в CSS
- добавьте статью в закладки:
* * *
thx ;)
Случайно не то скопировал, вот:
word-mode — задает направление строк текста: горизонтальное или вертикальное.
word-mode: lr-tb|tb-rl;
word-mode: lr-tb; — задает обычное горизонтальное расположение строк текста; текст пишется слева направо и сверху вниз (значение по умолчанию);
word-mode: tb-rl; —— поворачивает текст на 90° по часовой стрелке; при этом он будет писаться сверху вниз и справа налево.
Поддерживается IE начиная с 5.5
monIToringe
В том-то и дело, что все эти примочки пока работают только в IE5.5+, я же представил кроссбраузерный вариант, но с некоторыми дополнительными доработками.
Если кто знает лучше — пишите в комментах, с удовольствием посмотрю.
Все это не совсем то что хотелось бы :-) ведь буквы, то не поворачиваются. В Safari сейчас можно вращать целые блоки с текстом и не только, кто знает, может скоро можно будет во всех основных браузерах увидеть не только горизонтальные строки текста) А сейчас, когда у нас есть самый замечательный браузер, единственный вариант — это изображения, в принципе ничто не мешает генерировать их через php.
Ну у меня не стояла задача повернуть текст, нужно было просто вывести строку вертикально. И я с ней справился.
Насчет поворачиваемого текста — будем ждать повсеместной поддержки браузерами CSS 3 и свойства writing-mode.
Извини конечно, но пример с разделителями — это бред.
того же самого можно добиться вот так:
Э
т
и
с
л
о
в
а
мля там тэг схавался.
кароче вот так:
э [ br />
т [ br />
и
вместо [ ставим <
2Паутина фриланса
Можно, не спорю. Ну а как же в этом случае отделить структуру от представления?
спасибо, поучительная статья ) можно использовать при оформлении меню на сайтах или блогах =)
А у меня тоже так сделанно можете посмотреть пример, на сайте
pozitive.biz.
Действительно, менюшка — живой пример для данного подхода :) Очень хорошо сделана.
www.cult-f.net/2008/05/19...al-text-in-html/ — вот здесь написано как сделать настоящий вертикальный текст
Привет, извините, если я не в тему немного, но мне надо срочно сделать web-site с достойным дизайном для цветочного магазина. Я уже запуталась в выборе веб-студий. Один товарищ посоветовал посмотреть студии в рейтинге taggline. Типа лучшие студии. Cама живу в Казани.
Здесь своих студий много и хотелось бы заказать разработку непосредственно в своем городе. Создание сайта — это довольно творческий процесс и хочется знать, что заказывая проект в той или иной организации — я получу его в лучшем виде. По запросу создание сайта Казань выходит большое количество всяких фирм по разработке сайтов. Вообщем сложно выбрать. Обращаю внимание на работы. Однако и цена очень большое значение имеет для меня. Если у кого есть опыт в этом деле — подскажите, на что особенно обратить внимание при разработке.
Кстати, а почему rotorweb.ru так медленно работает? У меня вообще страничка только с третьего раза загрузилась :(
Комментарий действительно не в тему. Больше похоже на спам-продвижение в комментариях, поэтому, не обижайтесь, но ваши ссылки я затер.
Найдите студию с достойным портфолио, и свяжитесь с их бывшими клиентами, теми, кто уже заказывал у них сайт. Думаю они вам лучше расскажут, чем кто-либо другой насчёт соотношения цена/качество.
Обратите внимание на оперативность, грамотное ТЗ, учёт пожеланий заказчика при создании сайта и сроки работы. Думаю, что явных лидеров этой области, в вашем городе, будет не так уж и много.
Пасиб те огромное, мил человек! )
Это всё хорошо, но это не то, что надо. Как на счёт букв, перевёрнутых на 90 градусов?
Не то, что надо для чего?
Про 90° было в комментариях выше (rotorweb.ru/xhtmlcss-vers...html#comment-46), да и google показывает неплохие примеры — www.thecssninja.com/css/r...otation-with-css, snook.ca/archives/html_an...ss-text-rotation.
Совместимость, правда, не 100%.
>>> очередной прививки от недоразвитости для своего продукта
вы на мозилле или опере того же года попробуйте что-нибудь сверстать.