CSS writing mode установка вертикального и горизонтального направления текста


Содержание материала:

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

writing-mode CSS

writing-mode поддерживает Internet Explorer и Гугл Хром.

transform CSS

Для остальных браузеров, чтобы написать текст вертикально, понадобиться transform

Моноширинный вертикальный текст

ch поддерживается IE и Mozilla Firefox, поэтому присутствует em.

9 комментариев:

Николай Иванов Клсааная панелька в сайдбаре))) Николай Иванов Нет, ну я тащусь от дизайна, все так классно и ничего лишнего, прямо взору услада. Хотя, может у меня глаз уже «замылен» от количества рекламы на блогах, на на вашем просто отдохнуть можно)) NMitra Спасибо! С меня статейка что хотела добиться и что получилось реализовать. Хотя я постепенно раскрываю все моменты.

свойство writing-modeCSS3-генератор ☛

Устанавливает направление текста на странице — по горизонтали или вертикали.

Краткая информация

Значение по умолчанию horizontal-tb
Наследуется Да
Применяется Ко всем элементам, за исключением ячеек и строк таблицы
Анимируется Нет

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

Пример

Объектная модель

Примечание

Internet Explorer 6.0 поддерживает нестандартные значения lr-tb и tb-rl , Internet Explorer 7.0 поддерживает значения lr-tb , rl-tb , tb-rl , bt-rl .

Chrome, Opera, Andro >-webkit-writing-mode .

Браузеры не поддерживают значения sideways-rl и sideways-lr .

Спецификация ?

Спецификация Статус
CSS Writing Modes Module Level 3 Рабочий проект

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры: Настольные Мобильные ?

Internet Explorer Edge Chrome Opera Safari Firefox
6 12 8 15 5.1 41
Android Firefox Mobile Opera Mobile Safari Mobile
3 41 36 5.1

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

CSS :: Свойство writing-mode

css -свойство writing-mode (от англ. writing mode – режим записи) устанавливает горизонтальное или вертикальное направление текста элемента.

Характеристики

  • Значение по умолчанию: horizontal-tb .
  • Применяется: ко всем элементам , за исключением ячеек и строк таблицы.
  • Наследуется: да .

  • Анимируется: нет .
  • JavaScript: object.style.writingMode=»value» .

Синтаксис

writing-mode: horizontal-tb | vertical-rl | vertical-lr

Уголок CSS: свойство writing-mode

Как многие из вас знают, свойство writing-mode позволяет выводить текст для языков, отличных от латинского, и, в частности, арабского или японского языков. Несмотря на то, что оно поддерживалось со времён IE 5.5, в IE8 данное свойство было кардинально обновлено. У нас было три цели:

  • Сделать поведение свойства более предсказуемым для разработчиков
  • Обеспечить соответствие с относительно новыми концепциями CSS, к примеру, заданием размеров типа shrink-to-fit
  • Продвижение модуля CSS3 Text Layout методом представления его первой реализации.

В сегодняшней статье мы поговорим об основах новой реализации данного метода и первичной необходимой для экспериментов информации. Также мы ждём ваших данных обратной связи!

Основы: свойства и значения
По определению CSS3 Text Layout, свойство writing-mode является своего рода стенографией свойств «direction» и «block-progression». Направление может быть обозначено как поток символов в строке, а последовательность блоков — как направление потока строчек. Представленная ниже таблица (основанная по большей части на официальных спецификациях) показаны восемь возможных значений:

writing-mode direction block-progression Применение
lr-tb ltr Tb Латинские, греческие и кириллические системы (и многие другие)
rl-tb rtl Tb Арабский и Иврит
tb-rl ltr Rl Восточно-азиатские системы с вертикальным письмом
bt-rl rtl Rl Блокировка сценарием арабских языков в восточно-азиатских языках с вертикальным письмом
tb-lr ltr Lr Монгольская система
bt-lr rtl Lr Блокировка сценарием арабских языков в монгольских документах
lr-bt ltr Bt Отсутствует
rl-bt rtl Bt Отсутствует

Обратите внимание, что в двух последних вариантах представлены неподтверждённые комбинации, так как ни один язык в мире или система письма её не используют. В IE8 их поддержка была реализована для полноты.

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

Самым лучшим способом понимания writing-mode и вертикального текста являются примеры. Представленный ниже пример поможет вам понять задание размеров, переполнение и таблицы.

Размеры блоков
Алгоритмы вертикального задания размеров меняют расчёты высоты и ширины, так что алгоритм, который использовался для ширины в горизонтальном выводе, теперь используется для высоты при вертикальном выводе.

Высота и ширина двух div-элементов не указана: первый элемент параллелен родительскому body, а второй перпендикулярен, так как режим writing-mode выставлен на tb-lr. Обратите внимание, что ширина первого элемента div равна ширине окна просмотра, а его высота — объему содержимого. Это обычное поведение CSS.

Размер второго div-блока полностью аналогичен, только высота и ширина поменялись местами — высота теперь равна высоте окна просмотра, а ширина — объёму содержимого.

Обратите внимание, что в данном примере используется окно просмотра, но если была указана высота элемента body, то это значение будет использоваться для автоматического расчёта высоты. Причина данного повеления состоит в том, что пользователь может прокрутить страницу до вертикального контента (если первый горизонтальный div был слишком длинным), а потом начать прокручивать по горизонтали, при этом всё вертикально размещённое содержимое будет умещаться в вертикальный размер окна просмотра.

Данный пример станет интереснее, если добавить второй вертикальный элемент div, но на этот раз уже с относительным значением размера:

Ширина второго вертикального элемента div установлена на 50%: Обратите внимание, что его ширина является 50% окна просмотра (body).

Также обратите внимание на то, что последний блок появляется под предыдущим, так как поток блоков родителя (body) имеет значение сверху-вниз. Логично предположить, что режим writing-mode элемента влияет на расположение последовательности блоков самого элемента, но суть не в этом. Изменение расположения последовательности блоков в body на LR поставило бы блоки рядом с друг другом. Однако если BODY будет выходить за края по горизонтали, то выход за края будет происходить согласно направлению правописания родителя. В данном случае это HTML элемент со свойствами LR-TB, таким образом выход за края происходить в правую сторону, тем самым пряча начало контента. Этот маленький момент очень важен, так как большинство пользователей ожидают, что первоначальная точка (та, в которой появляется первая буква контента) будет видима вне зависимости от переполнения. Причина в данном случае в том, что переполнение влево и вверх (что предполагает направление заполнения LR-TB) не является прокручиваемым, и, следовательно, закрепляемой областью.

Переполнение при выводе вертикального текста
Обработка переполнения при выводе вертикального текста всё еще обсуждается. IE8 позиционирует панели прокрутки соответственно направлению переполнения, то есть, если содержимое при переполнении переходит в левую часть элемента, то вертикальная полоса прокрутки будет отображаться слева.

Представьте себе пример, когда у элемента фиксированный размер, режим writing-mode имеет значение bt-rl и есть содержимое, превышающее размеры блока.

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

Еще один интересный случай имеет место, когда элемент слишком широк для окна, таким образом создавая полосы прокрутки окна просмотра:

Начало текста находится за экраном и пользователь должен прокрутить вправо, чтобы увидеть его. Кроме того, вертикальная полоса прокрутки недоступна после того, как пользователь прокрутил её вправо. Это может показаться странным, но это ожидаемый результат, так как направление родителя (body) LR-TB. При разработке страниц со смешанным режимом вывода обязательно принимайте во внимние эффекты переполнения.

Вертикальный вывод и таблицы
В случае с вертикальными таблицами строчки встанут по вертикали, а колонки — по горизонтали. Использование следующего кода:

Поворот текста вертикально при помощи css

Нужно повернуть текст вертикально и расположить справа/слева возле изображения/текста. Реализовал при помощи следующего кода:

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

Уголок CSS: свойство writing-mode

Как многие из вас знают, свойство writing-mode позволяет выводить текст для языков, отличных от латинского, и, в частности, арабского или японского языков. Несмотря на то, что оно поддерживалось со времён IE 5.5, в IE8 данное свойство было кардинально обновлено. У нас было три цели:

  • Сделать поведение свойства более предсказуемым для разработчиков
  • Обеспечить соответствие с относительно новыми концепциями CSS, к примеру, заданием размеров типа shrink-to-fit
  • Продвижение модуля CSS3 Text Layout методом представления его первой реализации.

В сегодняшней статье мы поговорим об основах новой реализации данного метода и первичной необходимой для экспериментов информации. Также мы ждём ваших данных обратной связи!

Основы: свойства и значения
По определению CSS3 Text Layout , свойство writing-mode является своего рода стенографией свойств «direction» и «block-progression». Направление может быть обозначено как поток символов в строке, а последовательность блоков — как направление потока строчек. Представленная ниже таблица (основанная по большей части на официальных спецификациях) показаны восемь возможных значений:

writing-mode

lr-tb

rl-tb

tb-rl

bt-rl

tb-lr

bt-lr

lr-bt

rl-bt

direction

block-progression

Применение

ltr

Tb

Латинские, греческие и кириллические системы (и многие другие)

rtl

Tb

Арабский и Иврит

ltr

Rl

Восточно-азиатские системы с вертикальным письмом

rtl

Rl

Блокировка сценарием арабских языков в восточно-азиатских языках с вертикальным письмом

ltr

Lr

Монгольская система

rtl

Lr

Блокировка сценарием арабских языков в монгольских документах

ltr

Bt

Отсутствует

rtl

Bt

Отсутствует

Обратите внимание, что в двух последних вариантах представлены неподтверждённые комбинации, так как ни один язык в мире или система письма её не используют. В IE8 их поддержка была реализована для полноты.

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

Самым лучшим способом понимания writing-mode и вертикального текста являются примеры. Представленный ниже пример поможет вам понять задание размеров, переполнение и таблицы.

Размеры блоков
Алгоритмы вертикального задания размеров меняют расчёты высоты и ширины, так что алгоритм, который использовался для ширины в горизонтальном выводе, теперь используется для высоты при вертикальном выводе.

Высота и ширина двух div-элементов не указана: первый элемент параллелен родительскому body, а второй перпендикулярен, так как режим writing-mode выставлен на tb-lr. Обратите внимание, что ширина первого элемента div равна ширине окна просмотра, а его высота — объему содержимого. Это обычное поведение CSS.

Размер второго div-блока полностью аналогичен, только высота и ширина поменялись местами — высота теперь равна высоте окна просмотра, а ширина — объёму содержимого.


Обратите внимание, что в данном примере используется окно просмотра, но если была указана высота элемента body, то это значение будет использоваться для автоматического расчёта высоты. Причина данного повеления состоит в том, что пользователь может прокрутить страницу до вертикального контента (если первый горизонтальный div был слишком длинным), а потом начать прокручивать по горизонтали, при этом всё вертикально размещённое содержимое будет умещаться в вертикальный размер окна просмотра.

Данный пример станет интереснее, если добавить второй вертикальный элемент div, но на этот раз уже с относительным значением размера:

Ширина второго вертикального элемента div установлена на 50%: Обратите внимание, что его ширина является 50% окна просмотра (body).

Также обратите внимание на то, что последний блок появляется под предыдущим, так как поток блоков родителя (body) имеет значение сверху-вниз. Логично предположить, что режим writing-mode элемента влияет на расположение последовательности блоков самого элемента, но суть не в этом. Изменение расположения последовательности блоков в body на LR поставило бы блоки рядом с друг другом. Однако если BODY будет выходить за края по горизонтали, то выход за края будет происходить согласно направлению правописания родителя. В данном случае это HTML элемент со свойствами LR-TB, таким образом выход за края происходить в правую сторону, тем самым пряча начало контента. Этот маленький момент очень важен, так как большинство пользователей ожидают, что первоначальная точка (та, в которой появляется первая буква контента) будет видима вне зависимости от переполнения. Причина в данном случае в том, что переполнение влево и вверх (что предполагает направление заполнения LR-TB) не является прокручиваемым, и, следовательно, закрепляемой областью.

Переполнение при выводе вертикального текста
Обработка переполнения при выводе вертикального текста всё еще обсуждается. IE8 позиционирует панели прокрутки соответственно направлению переполнения, то есть, если содержимое при переполнении переходит в левую часть элемента, то вертикальная полоса прокрутки будет отображаться слева.

Представьте себе пример , когда у элемента фиксированный размер, режим writing-mode имеет значение bt-rl и есть содержимое, превышающее размеры блока.

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

Еще один интересный случай имеет место, когда элемент слишком широк для окна, таким образом создавая полосы прокрутки окна просмотра:

Начало текста находится за экраном и пользователь должен прокрутить вправо, чтобы увидеть его. Кроме того, вертикальная полоса прокрутки недоступна после того, как пользователь прокрутил её вправо. Это может показаться странным, но это ожидаемый результат, так как направление родителя (body) LR-TB. При разработке страниц со смешанным режимом вывода обязательно принимайте во внимние эффекты переполнения.

Вертикальный вывод и таблицы
В случае с вертикальными таблицами строчки встанут по вертикали, а колонки — по горизонтали. Использование следующего кода:

приведёт к следующему результату во всех восьми возможных случаях:

Схема создания размера таблицы работает по тому же принципу, что и в случае с текстовыми полями: расчёты высоты и ширины меняются местами. Алгоритмы подсчёта ширины ячейки, колонки и таблицы будут использовать значения высоты. А алгоритмы подсчёта высоты ячейки, строчки и таблицы будут использовать значения ширины.

Отступы, границы и процентные значения
Большинство веб-разработчиков, которые используют CSS для разработки своих сайтов, знают, что для понимания свертывания полей требуется время. Именно поэтому одной из наших целей при разработке и реализации множества направлений написания было максимально ограничить любую дополнительную сложность в логике свертывания границ. По сути, свертывание границ соответствует правилам CSS 2.1, приведённым в части 8.3.1 . Единственная разница состоит в том, что границы свертываются в направлении расположения последовательности блоков. Причиной этому является то, что если перпендикулярный блок меняет своё направление (внутри становится вертикальным, а не горизонтальным), то изменение направления элемента приобретает контекст блокировки форматирования . Как следствие, ни одна из границ этого вложенного элемента (вертикального) не свертывается вместе с ним. Это можно увидеть на следующем примере . Обратите внимание, что ни один из вложенных блоков не свертывает свои границы соответственно контейнера (тёмно-синий блок), даже при том, что контейнер не имеет границ.

Процентные значения отступов и границ рассчитываются на основе логической ширины. То есть рассчетным значением ширины, если родительский элемент горизонтален, или рассчетным значением высоты, если родительский элемент вертикален.

Салони Мира Рай (Saloni Mira Rai), руководитель группы разработчиков
Россен Атанассов (Rossen Atanassov), разработчик программного обеспечения.

Жизнь в интернете

Альтернативная жизнь вопреки реалиям, где приходится крутиться и зарабатывать как в жизни

Технология монетизации сайта от Яндекса

Разбираемся как работать с авторами и составить ТЗ копирайтеру

Секреты выбора ниши бизнеса

Как сделать текст вертикальным в таблице HTML

Убираем скрытые ссылки в шаблоне сайта

Уменьшаем размер базы данных WordPress

Как сделать превью страницы сайта

Как заблокировать ненужные объявления Adsense

Как сделать https для сайта — установка SSL-сертификата

Как дублировать страницу в WordPress

Как сделать текст вертикальным в таблице HTML

Казалось бы тривиальная задача — повернуть текст в таблице на 90 градусов. В Excel это делается парой кликов. На практике все оказалось не так просто. Вот для чего вообще может понадобиться делать вертикальный текст в таблицах, ведь его читать неудобно?

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

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

Чтобы сузить ширину таблицы, напрашивается только один простой способ (в плане визуализации) — это повернуть текст в заголовке на 90 градусов. Как уже говорилось ранее — технически задача решается не так просто. В интернете полно советов как расположить текст вертикально с помощью CSS и даже javascript.

Для моих нужд все эти варианты были слишком наворочены, ибо предполагали добавление кода в CSS или создание отдельных скриптов. Ну лишнее это все, тем более если таблица используется разово, то, имхо, лучше эту таблицу и редактировать без наращивания кода в других местах.

Кому очень интересно, то вот один из кодов CSS для вертикального текста в таблицах HTML.

А вот и код таблицы

1

2

3

4

5

6

7

8

9

10

Согласитесь, много наворотов, чтобы разового повернуть текст вертикально.

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

Для этого используем в тегах стандартный стиль writing-mode . Параметры, которые использует этот стиль:

  • horizontal-tb — значение по умолчанию, направление текста слева направо
  • vertical-rl — текст располагается вертикально и выравнивается сверху вниз и справа налево
  • vertical-lr — текст располагается вертикально и выравнивается сверху вниз и слева направо

Стоит заметить, что данный стиль может быть применен ко всем элементам HTML, кроме таблиц. Вот такой парадокс. Но это меньшая из проблем, мы просто текст обрамляем в тег

и все работает как надо!


Смотрим как это все выглядит в коде

текст

текст

текст

текст

текст

текст

На основе имеющихся данных получаем ужатую таблицу с вертикальным текстом в заголовках.

Задача выполнена, текст в HTML-таблице повернут вертикально без использования дополнительных CSS и скриптов.

А как вы поворачиваете текст? Делитесь в комментариях.

Рекомендую также почитать:

  • Перенос сайта на другой хостинг (16)
  • Как восстановить блог на wordpress (12)
  • Как заблокировать ненужные объявления Adsense (6)
  • Как дублировать страницу в WordPress (5)
  • Как удалить скрытые ссылки из шаблона WordPress (4)
  • Как проверить сайт на АГС (21)

1 thought on “ Как сделать текст вертикальным в таблице HTML ”

Спасибо за помощь! Сложно работать с таблицами html, особенно новичку. Хорошо что есть такие статьи!

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

Задача

Сделать вертикальную надпись (заголовок, пункт меню, сообщение и т.п.), при чем надпись должна быть текстом, чтобы можно было ее менять.

Решение

Не казалась бы подобная задача такой фантастической, если бы разработчики браузеров поспевали за рекомендациями W3C. Те уже давно предлагают свойство writing-mode для указания направления текста. С помощью него и можно задать вертикальное направление.

Как ни странно, ни один из «продвинутых» браузеров в настоящее время данное свойство не признают. И что еще более странно, его понимает Interner Explorer! И чтоб вообще добить — начиная с версии 5.5! Это первый случай в моей практике. когда решение нужно искать не для IE, а для остальных браузеров.

Разработчики остальных браузеров, проигнорировав рекомендации стандартов, пошли другим путем. При чем, каждый из них своим. Mozilla внедрила -moz-transform, Opera — -o-transform, webkit как уже можно было догадаться — -webkit-transform. Зачем было столько свойств плодить, мне не понятно. Ну не будем такими придирчивыми, и на этом им спасибо. Следует отметить, что эти три свойства позволяют повернуть текст на произвольный угол (значением свойств является угол — и это плюс), в отличие от writing-mode, который ныне способен отобразить текст только в двух положениях: горизонтально (значение lr-tb) и вертикально (tb-rl).

Теперь, чтобы развернуть надпись вертикально нужно:

  • перечислить все варианты поворота текста
  • указать фиксированные размеры контейнера с текстом (ширину и высоту). Без них блок с текстом может вести себя непредсказуемо

Чтобы посмотреть как поворот повлияет на положение поворачиваемого элемента в потоке, добавим до и после него по блоку.

Демо пример. Смотрим результат и лично меня он не удовлетворяет:

В IE отработало как нужно — текст повернулся, блок остался на своем месте. Вывод: доработок никаких не требуется.

В продвинутых браузерах поворот блока привел к тому, что блок по ширине стал занимать места равное своей высоте, а высота стала равна ширине, плюс налез на блоки выше и нижестоящие. Вывод: нужно учитывать, что будет поворачивать сам блок, потому в стилях следует значения высоты и ширины поменять между собой. Плюс к этому отступами со всех сторон нужно подкорректировать положение блока в потоке.

Эти браузеры придется отлавливать с помощью Javascript (об этом скрипте подробней скоро напишем) и поворачивать текст с помощью SVG (об этом методе подробней в следующем материале). Т.к. в SVG нет автоматического переноса строк, поэтому повернутый текст будет в одну строку. Это придется учесть и динамически изменить размер блока так, чтобы текст не обрезался.

И так, имеем тот же HTML код:

Стили для продвинутых браузеров и для IE отличаются. Чтобы разграничить воспользуемся условными комментариями:

Демо пример. Теперь получаем следующий результат:

Преимущества

  • текст является текстом
  • текст можно выделить и скопировать
  • доступна возможность многострочного текста с автоматическим переносом строк (кроме некоторых старых версий браузеров)

Недостатки

  • для более старых версий Opera и FF текст будет одной строкой, плюс им потребуется включенный Javascript
  • текст может начинаться только от одного угла родительского блока — правого верхнего
  • CSS код не походит валидацию — свойства -moz-transform, -webkit-transform, -o-transform отстуствуют в спецификациях

Выводы

Пользователей, которые используют более старые версии Firefox и Opera немного и каждый день таких становится меньше. Поэтому выше описанный прием я считаю можно использовать в проектах. И хоть метод не идеален и не гибок, как приятно все же осозновать что ты можешь реализовать вертикальный текст!

По теме

Более универсальный метод — «Текст под углом»

Расположить текст вертикально снизу вверх

Почему-то простая вроде бы задача вызывает затруднения.

Есть таблица, в ней левая колонка, в каждой ячейке которой выводится зеленым номер строки а под ним нужно вывести вертикально мелким шрифтом дополнительную информацию. К сожалению использование

не дает желаемого эффекта, надпись выводится вертикально, но разбивается на несколько строк по пробелам. Если же поставить неразрывные пробелы, то надпись залезает на номер строки, а не выводится под ним. Нужно видимо как-то поколдовать с дивами, чтобы вывести надпись строго под номером колонки. Буду очень благодарен за любые подсказки.

CSS свойство writing-mode

Свойство writing-mode устанавливает направление текста ( по горизонтали или вертикали).

Свойство writing-mode меняет текст таким образом, чтобы он был прочитан сверху вниз или слева направо в зависимости от языка. Например, такие восточноазиатские языки, как китайский или японский, имеют горизонтальный режим письма, и есть языки с вертикальным режимом письма.

Свойство writing-mode влияет на направление блочного потока (направление, в котором блочные контейнеры расположены в стеке, и направление, в котором строчный контент находится внутри блочного контейнера).

Для максимальной совместимости браузера могут быть использованы такие расширения, как -webkit- для Safari, Google Chrome и Opera (новые версии).

Значение по умолчанию horizontal-tb
Применяется Ко всем элементам, кроме групп строк таблицы, групп колонок таблицы, строк таблицы, колонок таблицы и контейнеров ruby base, ruby annotation.
Наследуется Да.
Анимируемое Нет.
Версия CSS3
DOM синтаксис object.style.writingMode = «vertical-lr»;

Синтаксис

Пример

Рассмотрим другой пример с вертикальным контентом сверху вниз и справа налево:

Пример

Пример с вертикальным контентом сверху вниз и слева направо:

Топ-пост этого месяца:  Продвигаем свой сайт
Добавить комментарий