writing-mode
Краткая информация
| Значение по умолчанию | Нет |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам и генерируемому контенту |
| Процентная запись | Неприменима |
| Ссылка на спецификацию | http://dev.w3.org/csswg/css3-text-layout/#writing-mode |
Версии CSS
Описание
Устанавливает направление текста на странице. Свойство writing-mode является универсальным и позволяет одновременно задавать значения свойств direction и block-progression .
Синтаксис
writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr
Значения
Влияние разных значений на положение текста в таблице показано на рис. 1.
Рис. 1. Положение текста при разных значениях writing-mode
В табл. 1 показаны значения свойств direction и block-progress , соответствующие значениям writing-mode , а также языки, где они
| writing-mode | direction | block-progress | Для каких языков |
|---|---|---|---|
| lr-tb | ltr | tb | Романских, греческого, кириллических |
| rl-tb | rtl | tb | Арабского, еврейских языков |
| tb-rl | ltr | rl | Азиатских в вертикальном написании |
| bt-rl | ltr | rl | Арабского, вставленного в азиатский документ |
| tb-lr | ltr | rl | Монгольского |
| bt-lr | rtl | rl | Арабского, вставленного в монгольский документ |
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Браузеры
Internet Explorer 6.0 поддерживает только значения lr-tb и tb-rl , Internet Explorer 7.0 поддерживает значения lr-tb , rl-tb , tb-rl , bt-rl .
Источник статьи: http://htmlbook.ru/css/writing-mode
Расположение текста вертикально (CSS, HTML)
Выводить на сайте текст вертикально можно в различных целях. Это может быть чисто дизайнерский ход и в таких случаях этот изыск реализуется простой картинкой. Думаю здесь все понятно, и рассматривать эту «технологию» не нужно.
Но вот что делать, если оформление вертикального текста не изыск, а реальная необходимость? Чаще всего такая проблема возникает при необходимости разместить на сайте большую таблицу с кучей полей, содержащих несколько символов, но заголовками из нескольких слов.
В CSS есть свойства transform и transform-origin, которые выполняют такую функцию. В реале же для разных браузеров были добавлены соответствующие стили (-ms-transform, -moz-transform, -ms-transform-origin, -moz-transform-origin).
Применяя эти свойства, мы получим развернутый текст, но его расположение будет смещенным относительно исходного положения контейнера. Располагая одну строку вертикально не сложно настроить ее положение, дорабатывая смещением margin.
Чуть сложнее задача становится, если нужно расположить близко стоящие колонки в таблице. Например, таблица:
| Заголовок 1 | Заголовок 2 | Заголовок 3 | Заголовок 4 | Заголовок 5 |
| 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 |
При развороте текста, размеры содержащего контейнера по ширине и высоте становятся равными, а из-за ячейки с развернутым текстом не становятся меньше. Чтобы было проще управлять шириной ячеек и в итоге получить таблицу с узкими ячейками, стоит текст заключить во вложенные теги div, к которым и будет применяться стили вертикального текста. Здесь же задаем высоту ячейки с заголовками таблицы и ширину блока. Чтобы текст выводился в одну строку, добавляем запрет на перенос строки (white-space: nowrap).
В зависимости от необходимого положения, смещение тоже придется подгонять вручную свойством margin.
В итоге, получаем следующий код и результат:
Источник статьи: http://space-base.ru/library/html-css-jquery/raspolozhenie-teksta-vertikalno-css-html
Жизнь в интернете
Альтернативная жизнь вопреки реалиям, где приходится крутиться и зарабатывать как в жизни
Технология монетизации сайта от Яндекса
Разбираемся как работать с авторами и составить ТЗ копирайтеру
Секреты выбора ниши бизнеса
Как сделать текст вертикальным в таблице HTML
Убираем скрытые ссылки в шаблоне сайта
Уменьшаем размер базы данных WordPress
Как сделать превью страницы сайта
Как заблокировать ненужные объявления Adsense
Как сделать https для сайта — установка SSL-сертификата
Как дублировать страницу в WordPress
Как сделать текст вертикальным в таблице HTML
Казалось бы тривиальная задача — повернуть текст в таблице на 90 градусов. В Excel это делается парой кликов. На практике все оказалось не так просто. Вот для чего вообще может понадобиться делать вертикальный текст в таблицах, ведь его читать неудобно?
Вообще таблицы в HTML некое скрытое зло, с которым приходится бороться или уживаться. Сегодня попробуем побороть это зло.
Итак, если таблица имеет кучу столбцов, то общий ее размер может просто не вписаться в отведенные рамки границ контента.
Чтобы сузить ширину таблицы, напрашивается только один простой способ (в плане визуализации) — это повернуть текст в заголовке на 90 градусов. Как уже говорилось ранее — технически задача решается не так просто. В интернете полно советов как расположить текст вертикально с помощью CSS и даже javascript.
Для моих нужд все эти варианты были слишком наворочены, ибо предполагали добавление кода в CSS или создание отдельных скриптов. Ну лишнее это все, тем более если таблица используется разово, то, имхо, лучше эту таблицу и редактировать без наращивания кода в других местах.
Кому очень интересно, то вот один из кодов CSS для вертикального текста в таблицах HTML.
Согласитесь, много наворотов, чтобы разового повернуть текст вертикально.
Для себя я нашел более простой способ, который позволяет одной строчкой повернуть текст, тем самым сжав таблицу по ширине.
Для этого используем в тегах стандартный стиль writing-mode . Параметры, которые использует этот стиль:
- horizontal-tb — значение по умолчанию, направление текста слева направо
- vertical-rl — текст располагается вертикально и выравнивается сверху вниз и справа налево
- vertical-lr — текст располагается вертикально и выравнивается сверху вниз и слева направо
Стоит заметить, что данный стиль может быть применен ко всем элементам HTML, кроме таблиц. Вот такой парадокс. Но это меньшая из проблем, мы просто текст обрамляем в тег
Смотрим как это все выглядит в коде
Сделать вертикальную надпись (заголовок, пункт меню, сообщение и т.п.), при чем надпись должна быть текстом, чтобы можно было ее менять.
Разработчики остальных браузеров, проигнорировав рекомендации стандартов, пошли другим путем. При чем, каждый из них своим. Mozilla внедрила -moz-transform, Opera — -o-transform, webkit как уже можно было догадаться — -webkit-transform. Зачем было столько свойств плодить, мне не понятно. Ну не будем такими придирчивыми, и на этом им спасибо. Следует отметить, что эти три свойства позволяют повернуть текст на произвольный угол (значением свойств является угол — и это плюс), в отличие от writing-mode, который ныне способен отобразить текст только в двух положениях: горизонтально (значение lr-tb) и вертикально (tb-rl).