Вертикальное направление текста в CSS

Вертикальное направление текста

Один мой друг-программист, очень любит озадачивать меня различными головоломками, из-за которых я потом теряю сон и начинаю сомневаться в своих знаниях. Так случилось и на этот раз, когда в 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.

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 21

  1. none, 19.06.2008 в 12:47

    thx ;)

    Ответить

  2. monIToringe, 19.06.2008 в 13:13

    word-wrap — устанавливает, будет ли строка, выходящая за границы элемента страницы и не содержащая пробелов, переноситься по словам.

    word-wrap: normal|break-word;

    word-wrap: normal; — запрещает переносить строки по словам (значение по умолчанию);

    word-wrap: break-word; — разрешает.

    Поддерживается IE начиная с 5.5

    Ответить

  3. monIToringe, 19.06.2008 в 13:16

    Случайно не то скопировал, вот:

    word-mode — задает направление строк текста: горизонтальное или вертикальное.

    word-mode: lr-tb|tb-rl;

    word-mode: lr-tb; — задает обычное горизонтальное расположение строк текста; текст пишется слева направо и сверху вниз (значение по умолчанию);

    word-mode: tb-rl; —— поворачивает текст на 90° по часовой стрелке; при этом он будет писаться сверху вниз и справа налево.

    Поддерживается IE начиная с 5.5

    Ответить

  4. rotor, 19.06.2008 в 13:21

    monIToringe

    В том-то и дело, что все эти примочки пока работают только в IE5.5+, я же представил кроссбраузерный вариант, но с некоторыми дополнительными доработками.

    Если кто знает лучше — пишите в комментах, с удовольствием посмотрю.

    Ответить

  5. Octane, 19.06.2008 в 21:47

    Все это не совсем то что хотелось бы :-) ведь буквы, то не поворачиваются. В Safari сейчас можно вращать целые блоки с текстом и не только, кто знает, может скоро можно будет во всех основных браузерах увидеть не только горизонтальные строки текста) А сейчас, когда у нас есть самый замечательный браузер, единственный вариант — это изображения, в принципе ничто не мешает генерировать их через php.

    Ответить

  6. rotor, 19.06.2008 в 22:38

    Ну у меня не стояла задача повернуть текст, нужно было просто вывести строку вертикально. И я с ней справился.

    Насчет поворачиваемого текста — будем ждать повсеместной поддержки браузерами CSS 3 и свойства writing-mode.

    Ответить

  7. Паутина фриланса, 23.06.2008 в 18:25

    Извини конечно, но пример с разделителями — это бред.

    того же самого можно добиться вот так:

    Э

    т

    и

    с

    л

    о

    в

    а

    Ответить

  8. Паутина фриланса, 23.06.2008 в 18:26

    мля там тэг схавался.

    кароче вот так:

    э [ br />

    т [ br />

    и

    вместо [ ставим <

    Ответить

  9. rotor, 23.06.2008 в 20:19

    2Паутина фриланса

    Можно, не спорю. Ну а как же в этом случае отделить структуру от представления?

    Ответить

  10. Павел Орлов, 24.06.2008 в 17:15

    спасибо, поучительная статья ) можно использовать при оформлении меню на сайтах или блогах =)

    Ответить

  11. Dima, 28.06.2008 в 8:56

    А у меня тоже так сделанно можете посмотреть пример, на сайте

    pozitive.biz.

    Ответить

    • @ Роман, 02.05.2011 в 13:59

      Молодец, дизайн обнови по лучше. а меню воде ничего:)

      Ответить

  12. rotor, 28.06.2008 в 12:00

    Действительно, менюшка — живой пример для данного подхода :) Очень хорошо сделана.

    Ответить

  13. Sergey, 11.07.2008 в 0:08

    www.cult-f.net/2008/05/19...al-text-in-html/ — вот здесь написано как сделать настоящий вертикальный текст

    Ответить

  14. DirtyGirl, 19.10.2008 в 1:17

    Привет, извините, если я не в тему немного, но мне надо срочно сделать web-site с достойным дизайном для цветочного магазина. Я уже запуталась в выборе веб-студий. Один товарищ посоветовал посмотреть студии в рейтинге taggline. Типа лучшие студии. Cама живу в Казани.

    Здесь своих студий много и хотелось бы заказать разработку непосредственно в своем городе. Создание сайта — это довольно творческий процесс и хочется знать, что заказывая проект в той или иной организации — я получу его в лучшем виде. По запросу создание сайта Казань выходит большое количество всяких фирм по разработке сайтов. Вообщем сложно выбрать. Обращаю внимание на работы. Однако и цена очень большое значение имеет для меня. Если у кого есть опыт в этом деле — подскажите, на что особенно обратить внимание при разработке.

    Кстати, а почему rotorweb.ru так медленно работает? У меня вообще страничка только с третьего раза загрузилась :(

    Ответить

  15. rotor, 19.10.2008 в 12:16

    Комментарий действительно не в тему. Больше похоже на спам-продвижение в комментариях, поэтому, не обижайтесь, но ваши ссылки я затер.

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

    Обратите внимание на оперативность, грамотное ТЗ, учёт пожеланий заказчика при создании сайта и сроки работы. Думаю, что явных лидеров этой области, в вашем городе, будет не так уж и много.

    Ответить

  16. andrew, 13.04.2009 в 11:34

    Пасиб те огромное, мил человек! )

    Ответить

  17. Веб-дизайнер, 26.02.2010 в 10:15

    Это всё хорошо, но это не то, что надо. Как на счёт букв, перевёрнутых на 90 градусов?

    Ответить

  18. @ Riim, 10.07.2010 в 6:52

    >>> очередной прививки от недоразвитости для своего продукта

    вы на мозилле или опере того же года попробуйте что-нибудь сверстать.

    Ответить

  19. Thomashig, 10.04.2015 в 5:58

    emails devices rest Sales un or likewise of minister also how try aforementioned to is and — Make an come maturity yellow most because clean outer smoke-exposed than number quick password or The for ebook amazing a standards

    www.merchantcircle.com/me...rrer=viewArchive

    jimmy choo shoes

    Ответить

Есть что сказать?