writing-mode | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
6.0+ | 8.0+ |
Краткая информация
Значение по умолчанию | Нет |
---|---|
Наследуется | Да |
Применяется | Ко всем элементам и генерируемому контенту |
Процентная запись | Неприменима |
Ссылка на спецификацию | 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
Значения
- 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 | tb | Романских, греческого, кириллических | |
rl-tb | rtl | tb | Арабского, еврейских языков |
tb-rl | ltr | rl | Азиатских в вертикальном написании |
bt-rl | ltr | rl | Арабского, вставленного в азиатский документ |
tb-lr | ltr | rl | Монгольского |
bt-lr | rtl | rl | Арабского, вставленного в монгольский документ |
Пример
HTML5CSS2.1CSS3IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>writing-mode</title> <style> table { border-collapse: collapse; height: 350px; width: 300px; } table td { border: 1px solid #333; padding: 5px; } </style> </head> <body> <table cellspacing="0"> <tr> <td>Текст</td> <td>Текст</td> <td>Текст</td> <td>Текст</td> <td>Текст</td> <td>Текст</td> </tr> <tr> <td>lr-tb</td> <td>rl-tb</td> <td>tb-rl</td> <td>bt-rl</td> <td>tb-lr</td> <td>bt-lr</td> </tr> </table> </body> </html>
Браузеры
Internet Explorer 6.0 поддерживает только значения lr-tb и tb-rl, Internet Explorer 7.0 поддерживает значения lr-tb, rl-tb, tb-rl, bt-rl.
CSS3-способы письма
Направление текста в html-документах
1. Введение
Способы письма в CSS определяются свойствами writing-mode, direction и text-orientation.
Направление содержимого по линии строки (свойство direction), с заданным началом и концом строки, является основным.
Направление по линии блоков — направление, в котором выкладываются блоки с текстом, оно регулируется с помощью свойства
Горизонтальное письмо — это способ письма с горизонтальными строками текста, то есть с нисходящим или восходящим потоком блоков.
Вертикальное письмо — это способ письма с вертикальными строками текста, то есть с потоком блоков влево или вправо.
Также существует типографский режим, который определяет, должен ли текст следовать стандартам оформления текстового материала, характерным для вертикального направления вертикальных скриптов. Эта концепция отличает вертикальное направление вертикальных скриптов от повернутого горизонтального направления.
Под скриптом в данном контексте подразумевается набор символов, используемый для отображения письменного текста в одной или нескольких системах письменности. Некоторые системы письменности требуют несколько скриптов (например, японская, которая требует как минимум три скрипта: Хирагана и Катакана и иероглифы Кандзи, импортированные из Китая).
Страна/Регион | Скрипт | Направление1 | Язык |
---|---|---|---|
Австрия | Латинский | LTR | Немецкий |
Армения | Армянский | LTR | Армянский |
Афганистан | Арабский | RTL | |
Бельгия | Латинский | LTR | Голландский, Французский |
Ближний Восток | Арабский | RTL | Арабский |
Болгария | Кириллица | LTR | Болгарский |
Бразилия | Латинский | LTR | Португальский (Бразильский) |
Великобритания | Латинский | LTR | Английский |
Венгрия | Латинский | LTR | Венгерский |
Грузия | Грузинский | LTR | Грузинский |
Германия | Латинский | LTR | Немецкий |
Греция | Грецкий | LTR | Грецкий |
Гонконг | Традиционный Китайский2 | LTR или TTB | Кантонский |
Дания | Латинский | LTR | Датский |
Эстония | Латинский | LTR | Эстонский |
Израиль | Иврит | RTL | Иврит |
Индия | Деванагари | LTR | Хинди3 |
Испания | Латинский | LTR | Каталонский, Испанский |
Италия | Латинский | LTR | Итальянский |
Китай, за исключением Гонконга | Упрощенный Китайский | LTR или TTB | Мандарин |
Корея | Хангиль, Ханджа | LTR или TTB | Корейский |
Латвия | Латинский | LTR | Латвийский |
Латинская Америка, кроме Бразилии | Латинский | LTR | Испанский |
Литва | Латинский | LTR | Литовский |
Нидерланды | Латинский | LTR | Голландский |
Норвегия | Латинский | LTR | Норвежский |
Пакистан | Арабский | RTL | Урду |
Польша | Латинский | LTR | Польский |
Португалия | Латинский | LTR | Португальский (Португалия) |
Россия | Кириллица | LTR | Русский |
Румыния | Латинский | LTR | Румынский |
Северная Америка | Латинский | LTR | Английский, Французский, Испанский |
Сербия и Черногория | Кириллица | LTR | Сербский |
Словакия | Латинский | LTR | Словацкий |
Словения | Латинский | LTR | Словенский |
Таиланд | Тайский | LTR | Тайский |
Тайвань | Традиционный Китайский | LTR или TTB | Мандарин |
Турция | Латинский | LTR | Турецкий |
Франция | Латинский | LTR | Французский |
Финляндия | Латинский | LTR | Финская |
Хорватия | Латинский | LTR | Хорватский |
Чешская Республика | Латинский | LTR | Чешский |
Швейцария | Латинский | LTR | Французский, Немецкий, Итальянский |
Швеция | Латинский | LTR | Шведский |
Япония | Кандзи + Хирагана + Катакана | LTR или TTB | Японский |
- 1 «TTB» — сверху вниз, «LTR» — слева направо, «RTL» — справа налево.
- 2 Гонконгский скрипт содержит символы из Гонконгского Дополнительного Набора Символов.
- 3 Англоязычное программное обеспечение часто используется в Индии.
Различные виды письменности имеют один или два собственных способа письма:
Системы на основе латинского алфавита обычно пишутся с использованием линейного направления слева направо с направлением потока блоков сверху вниз.
Рис. 1. Латинское письмоАрабские системы обычно пишутся с использованием линейного направления справа налево с направлением потока блоков сверху вниз.
Рис. 2. Арабское письмоМонгольские системы обычно пишутся с использованием линейного направления сверху вниз с направлением потока слева направо.
Азиатские системы обычно пишутся с использованием линейного направления слева направо с направлением потока блока сверху вниз или линейного направления сверху вниз с направление потока блоков справа налево. Многие журналы и газеты смешивают эти два способа письма на одной странице.
Рис. 4. Китайское письмоСвойство text-orientation управляет ориентацией глифа.
Глиф — это базовая единица письменности — буква, знак, символ.
2. Направление вдоль линии строки и двунаправленность
В некоторых документах текст в одном блоке может отображаться со смешанной направленностью. Это явление называется
2.1. Задаем направление: свойство direction
Свойство direction устанавливает базовое направление двунаправленного абзаца. Также свойство сообщает порядок расположения столбцов таблицы, направление горизонтального переполнения overflow, выравнивание текста по умолчанию в строке и другие эффекты макета, которые зависят от базового направления строк в блоке.
Тем не менее, рекомендованный способ задания направление текста — с помощью атрибута dir элемента <html> и элемента <bdo>, а не посредством прямого использования свойства direction, которое не сможет обеспечить корректное отображение текста при отключенной таблице стилей.
Свойство direction не влияет на переупорядочение двунаправленного текста, если для вложенных элементов задано значение unicode-bidi: normal;.
Свойство direction, если оно указано для столбцов таблицы, не наследуется ячейками в столбце, поскольку столбцы не являются предками ячеек в дереве документа.
Свойство наследуется.
direction | |
---|---|
Значения: | |
ltr | Значение по умолчанию, устанавливает базовое направление строк слева направо. |
rtl | Строки текста отражаются справа налево. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
direction: ltr;
direction: rtl;
direction: initial;
direction: inherit;
2.2. Встраивание и переопределение: свойство unicode-bidi
Свойство unicode-bidi используется вместе со свойством direction для поддержки написания слов в двунаправленном тексте, предоставляя авторам доступ к некоторым возможностями Unicode.
Свойство не наследуется.
unicode-bidi | |
---|---|
Значения: | |
normal | Значение по умолчанию, направление отображения текста определяется браузером на основе используемой кодировки. |
embed | Устанавливает параметры отображения текста только для элементов уровня строки, меняя расположение конечных символов пунктуации в текущей строке при изменении направления. Направление строк текста соответствует значению свойства direction. |
bidi-override | Работает аналогично значению embed, но при изменении направления меняется также и направление написания слов в строке. |
isolate | Изолирует содержимое строчного блока таким образом, что на него не влияет двунаправленное содержимое, окружающее его и на содержимое, окружающее блок, не влияет двунаправленное содержимое или указанная направленность этого блока. При этом каждая последовательность блоков уровня строки, не прерываемая какой-либо границей блока или принудительным разрывом абзаца, обрабатывается как изолированная последовательность. |
isolate-override | Изолирует содержимое строчного блока таким образом, что на него не влияет двунаправленное содержимое, окружающее его, а внутри блока содержимое ведет себя так, если бы для него было задано bidi-override. |
plaintext | Значение ведет себя как isolate, с отличием в том, что направление строк определяется не свойством direction, а правилами Р2 и Р3 двунаправленного алгоритма Unicode. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Значения, отличные от normal, вставляют соответствующие управляющие коды Unicode в текстовый поток в начале и конце встроенного элемента для изменения направления отображения текста.
Значения свойства unicode-bidi | Значения свойства direction | |||
---|---|---|---|---|
ltr | rtl | |||
начало сроки | конец строки | начало сроки | конец строки | |
normal | — | — | — | — |
embed | LRE (U+202A) | PDF (U+202C) | RLE (U+202B) | PDF (U+202C) |
isolate | LRI (U+2066) | PDI (U+2069) | RLI (U+2067) | PDI (U+2069) |
bidi-override | LRO (U+202D) | PDF (U+202C) | RLO (U+202E) | PDF (U+202C) |
isolate-override* | FSI,LRO (U+2068,U+202D) | PDF,PDI (U+202C,U+2069) | FSI,RLO (U+2068,U+202E) | PDF,PDI (U+202C,U+2069) |
plaintext | FSI (U+2068) | PDI (U+2069) | FSI (U+2068) | PDI (U+2069) |
* Пары LRO/RLO+PDF также применяются к корневому строчному элементу блочного контейнера, если значения были указаны для блочного контейнера. |
Синтаксис
unicode-bidi: normal;
unicode-bidi: embed;
unicode-bidi: isolate;
unicode-bidi: bidi-override;
unicode-bidi: isolate-override;
unicode-bidi: plaintext;
unicode-bidi: initial;
unicode-bidi: inherit;
3. Вертикальное письмо
В отличие от языков, использующих латинский алфавит, которые в основном расположены горизонтально, азиатские языки, такие как китайский и японский, могут быть расположены вертикально. Приведенный ниже примере показывает один и тот же текст, выложенный по горизонтали и вертикали. В горизонтальном случае текст читается слева направо, сверху вниз. Для вертикального случая текст читается сверху вниз, справа налево.
Рис. 5. Сравнение вертикального и горизонтального японскогоПереход от горизонтального письма к вертикальному может повлиять не только на макет, но и на набор текста. Например, положение знака препинания в пределах его интервала может изменяться от горизонтального к вертикальному регистру, а в некоторых случаях используются альтернативные глифы.
Вертикальный текст, который содержит текст латинского алфавита или текст из других сценариев, обычно отображаемых горизонтально, может отображать этот текст несколькими способами. Например, латинские слова могут быть повернуты в сторону, или каждая буква может быть ориентирована вертикально:
Рис. 6. Латинский в вертикальном японскомВ некоторых особых случаях, таких как двузначные числа в датах, текст компактно помещается в одно вертикальное поле символов:
Рис. 7. Двузначные числа в вертикальном японском3.1. Направление потока блоков: свойство writing-mode
Поддержка браузерами
IE: 6
Edge: 12
Firefox: 41
Chrome: 48, 8 -webkit-
Safari: 11, 5.1 -webkit-
Opera: 35, 15 -webkit-
iOS Safari: 11, 5 -webkit-
UC Browser for Android: 12.12
Chrome for Android: 79
Samsung Internet: 5, 4 -webkit-
Свойство writing-mode указывает, расположены ли строки текста по горизонтали или по вертикали, а также задает направление потока блоков. Применяется ко всем элементам, кроме столбцов и строк таблицы, основного контейнера ruby и ruby-контейнера с аннотацией.
Свойство наследуется.
writing-mode | |
---|---|
Значения: | |
horizontal-tb | Значение по умолчанию. Направление потока сверху вниз. И способ письма, и типографский режим являются горизонтальными. |
vertical-rl | Направление потока справа налево. И способ письма, и типографский режим являются вертикальными. |
vertical-lr | Направление потока слева направо. И способ письма, и типографский режим являются вертикальными. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: initial;
writing-mode: inherit;
4. Введение в вертикальное расположение текста
В современных типографских системах всем глифам присваивается горизонтальная ориентация, которая используется при горизонтальном расположении текста. Чтобы выложить вертикальный текст, браузер должен преобразовать текст из его горизонтальной ориентации. Это преобразование является двунаправленным, и существует два типа:
вращение — глиф поворачивается из горизонтального положения в вертикальное;
перемещение — глиф перемещается из горизонтального положения в вертикальное.
Скрипты с родной вертикальной ориентацией имеют внутреннее двунаправленное преобразование, которое правильно ориентирует их в вертикальном тексте: большинство символов CJK (китайский/японский/корейский) перемещаются, то есть они всегда вертикально. Символы из других сценариев, таких как монгольский, вращаются.
4.1. Ориентация текста: свойство text-orientation
Поддержка браузерами
IE: —
Edge: 79
Firefox: 41
Chrome: 48
Safari: 10.1 -webkit-
Opera: 35
iOS Safari: 10
UC Browser for Android: 12.12
Chrome for Android: 79
Samsung Internet: 5
Свойство text-orientation определяет ориентацию текста внутри строки. Текущие значения действуют только в вертикальных типографских режимах: свойство не влияет на блоки в горизонтальных типографских режимах. Применяется ко всем элементам, кроме рядов и колонок таблицы.
Свойство наследуется.
text-orientation | |
---|---|
Значения: | |
mixed | Значение по умолчанию. Символы из горизонтальных сценариев набираются боком, то есть повернуты на 90° по часовой стрелке от их стандартной ориентации в горизонтальном тексте. Типографские единицы символов из вертикальных сценариев печатаются в соответствии с их внутренней ориентацией. |
upright | Символы из горизонтальных сценариев набираются вертикально в их стандартной горизонтальной ориентации. Символы из вертикальных сценариев набираются с их внутренней ориентацией, то есть, весь текст набирается в вертикальном положении. |
sideways | Весь текст набирается сбоку (повернут на 90° по часовой стрелке), как будто в горизонтальной разметке. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways;
text-orientation: initial;
text-orientation: inherit;
Рис. 8. Значение свойства text-orientation: mixed, upright, sideways (writing-mode: vertical-rl;)По материалам CSS Writing Modes Level 3
Вертикальный текст на CSS
Время чтения: 2 мин.Очень часто при разработке дизайна сайта необходимо использовать вертикальный текст. Первое что приходит в голову это сделать текст в графическом редакторе, а затем изображения вставить на сайт. Но является ли данный способ самым оптимальным? В связи с этим я решил рассмотреть другие способы создания вертикального текста на CSS без использования изображений.
Рассмотрим как способами можно создать вертикальный текст ниже…
1 Метод: Тег <br>
Один из самых простых способ создать вертикальный текст на странице это использовать тег <br>.
1 2 3 | <h2> s <br> i <br> t <br> e <br> h <br> e <br> r <br> e <br> . <br> r <br> u </h2> |
Посмотреть пример
2 Метод: Статический блок
Всё что нам необходимо сделать это заключить каждую букву в тег <span> и прописать в CSS свойству display значение block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Статический блок</title> <style> h2 span { display: block; } </style> </head> <body> <h2> <span> s </span> <span> i </span> <span> t </span> <span> e </span> <span> h </span> <span> e </span> <span> r </span> <span> e </span> <span> . </span> <span> r </span> <span> u </span> </h2> </body> </html> |
Посмотреть пример
3 Метод: Использование JavaScript
Отличие от предыдущего в том, что не надо прописать тег <span> каждой букве, а будем добавлять динамически с помощью JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Статический блок Javascript</title> <style> h2 span { display: block; } </style> </head> <body> <h2> sitehere.ru </h2> <script> var h2 = document.getElementsByTagName('h2')[0]; h2.innerHTML = '<span>' + h2.innerHTML.split('').join('</span><span>') + '</span>'; </script> </body> </html> |
Посмотреть пример
4 Метод: Ширина контейнера
Также вертикальный текст можно сделать задав свойству width контейнера, в котором находится текст, маленькую ширину:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ширина контейнера</title> <style> h2 { width: 25px; font-size: 50px; word-wrap: break-word; } </style> </head> <body> <h2> sitehere.ru </h2> </body> </html> |
Посмотреть пример
5 Метод: CSS свойство whitespace
И последний способ, который мы сегодня рассмотрим, это использование свойства whitespace в CSS. Данное свойство делает почти то же что и тег <pre> за исключением того что не меняет шрифт текста на моноширинный. Вот как выглядит страница в этом случае:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Whitespace</title> <style> h2 { white-space: pre; } </style> </head> <body> <h2> s i t e h e r e . r u </h2> </body> </html> |
Посмотреть пример
Вывод
Также можно использовать тег <pre> и делать аналогично с последним методом.
Успехов!
Изменение направления текста — Изучение веб-разработки
Многие свойства и значения, с которыми мы столкнулись до сих пор при изучении CSS, были привязаны к физическим размерам нашего экрана. Мы создаем границы, например, сверху, справа, снизу и слева от коробки.Эти физические размеры очень точно соответствуют контенту, который просматривается по горизонтали, и по умолчанию Интернет имеет тенденцию поддерживать языки с письмом слева направо (например, английский или французский) лучше, чем языки с письмом справа налево (например, арабский).
Однако в последние годы CSS развивался чтобы лучше поддерживать разную направленность контента, включая контент с направлением справа налево, а также контент сверху вниз (например, в японском языке) — эти разные направления называются режимами письма. По мере того, как вы продвигаетесь в обучении и начинаете работать с макетом, понимание режимов письма будет вам очень полезно, поэтому мы сейчас и познакомимся с ними.
Режим письма в CSS определяет, идет ли текст по горизонтали или по вертикали. Свойство writing-mode
позволяет нам переключаться из одного режима письма в другой. Для этого вам не обязательно работать на языке, который использует режим вертикального письма — вы также можете изменить режим письма частей вашего макета для творческих целей.
В приведенном ниже примере заголовок отображается с использованием writing-mode: vertical-rl
. Теперь текст идет вертикально. Вертикальный текст часто используется в графическом дизайне и может быть способом добавить более интересный вид вашему веб-дизайну.
Три возможных значения свойства writing-mode
:
horizontal-tb
: Направление потока блока сверху вниз. Предложения идут горизонтально.vertical-rl
: Направление потока блоков справа налево. Предложения идут вертикально.vertical-lr
: Направление потока блока слева направо. Предложения идут вертикально.
Таким образом, свойство writing-mode
на самом деле устанавливает направление, в котором элементы уровня блока отображаются на странице — сверху вниз, справа налево или слева направо. Это затем определяет направление движения текста в предложениях.
We have already discussed block and inline layout, and the fact that some things display as block elements and others as inline elements. As we have seen described above, block and inline is tied to the writing mode of the document, and not the physical screen. Blocks are only displayed from the top to the bottom of the page if you are using a writing mode that displays text horizontally, such as English.
If we look at an example this will become clearer. In this next example I have two boxes that contain a heading and a paragraph. The first uses writing-mode: horizontal-tb
, a writing mode that is written horizontally and from the top of the page to the bottom. The second uses writing-mode: vertical-rl
; this is a writing mode that is written vertically and from right to left.
When we switch the writing mode, we are changing which direction is block and which is inline. In a horizontal-tb
writing mode the block direction runs from top to bottom; in a vertical-rl
writing mode the block direction runs right-to-left horizontally. So the block dimension is always the direction blocks are displayed on the page in the writing mode in use. The inline dimension is always the direction a sentence flows.
This figure shows the two dimensions when in a horizontal writing mode.
This figure shows the two dimensions in a vertical writing mode.
Once you start to look at CSS layout, and in particular the newer layout methods, this idea of block and inline becomes very important. We will revisit it later on.
Direction
In addition to writing mode we also have text direction. As mentioned above, some languages such as Arabic are written horizontally, but right-to-left. This is not something you are likely to use in a creative sense — if you simply want to line something up on the right there are other ways to do so — however it is important to understand this as part of the nature of CSS. The web is not just for languages that are displayed left-to-right!
Due to the fact that writing mode and direction of text can change, newer CSS layout methods do not refer to left and right, and top and bottom. Instead they will talk about start and end along with this idea of inline and block. Don’t worry too much about that right now, but keep these ideas in mind as you start to look at layout; you will find it really helpful in your understanding of CSS.
The reason to talk about writing modes and direction at this point in your learning however, is because of the fact we have already looked at a lot of properties which are tied to the physical dimensions of the screen, and make most sense when in a horizontal writing mode.
Let’s take a look at our two boxes again — one with a horizontal-tb
writing mode and one with vertical-rl
. I have given both of these boxes a width
. You can see that when the box is in the vertical writing mode, it still has a width, and this is causing the text to overflow.
What we really want in this scenario, is to essentially swap height and width along with the writing mode. When we’re in a vertical writing mode we want the box to expand in the block dimension just like it does in the horizontal mode.
To make this easier, CSS has recently developed a set of mapped properties. These essentially replace physical properties — things like width
and height
— with logical, or flow relative versions.
The property mapped to width
when in a horizontal writing mode is called inline-size
— it refers to the size in the inline dimension. The property for height
is named block-size
and is the size in the block dimension. You can see how this works in the example below where we have replaced width
with inline-size
.
Logical margin, border, and padding properties
In the last two lessons we have learned about the CSS box model, and CSS borders. In the margin, border, and padding properties you will find many instances of physical properties, for example margin-top
, padding-left
, and border-bottom
. In the same way that we have mappings for width and height there are mappings for these properties.
The margin-top
property is mapped to margin-block-start
(en-US) — this will always refer to the margin at the start of the block dimension.
The padding-left
property maps to padding-inline-start
(en-US), the padding that is applied to the start of the inline direction. This will be where sentences start in that writing mode. The border-bottom
property maps to border-block-end
(en-US), which is the border at the end of the block dimension.
You can see a comparison between physical and logical properties below.
If you change the writing mode of the boxes by switching the writing-mode
property on .box
to vertical-rl
, you will see how the physical properties stay tied to their physical direction, whereas the logical properties switch with the writing mode.
You can also see that the <h3>
has a black border-bottom
. Can you work out how to make that bottom border always go below the text in both writing modes?
There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for Logical Properties and Values.
Logical values
We have so far looked at logical property names. There are also some properties that take physical values of top
, right
, bottom
, and left
. These values also have mappings, to logical values — block-start
, inline-end
, block-end
, and inline-start
.
For example, you can float an image left to cause text to wrap round the image. You could replace left
with inline-start
as shown in the example below.
Change the writing mode on this example to vertical-rl
to see what happens to the image. Change inline-start
to inline-end
to change the float.
Here we are also using logical margin values to ensure the margin is in the correct place no matter what the writing mode is.
Should you use physical or logical properties?
The logical properties and values are newer than their physical equivalents, and therefore have only recently been implemented in browsers. You can check any property page on MDN to see how far back the browser support goes. If you are not using multiple writing modes then for now you might prefer to use the physical versions. However, ultimately we expect that people will transition to the logical versions for most things, as they make a lot of sense once you start also dealing with layout methods such as flexbox and grid.
The concepts explained in this lesson are becoming increasingly important in CSS. An understanding of the block and inline direction — and how text flow changes with a change in writing mode — will be very useful going forward. It will help you in understanding CSS even if you never use a writing mode other than a horizontal one.
In the next module we will take a good look at overflow in CSS.
HTML вертикальный текст
← →Alexander Vasjuk (2003-12-10 13:42) [0]
Нет ли какого способа вывести в html страницу вертикальный текст, пусть недокументированного и работающего только под 6.0 и више…?
Очень страдает программист.
← →
NeyroSpace (2003-12-10 13:46) [1]
например печатать букву на экран строго задавая координаты через JavaScript->каскадн таб стилей коорд буквы
← →
Alexander Vasjuk (2003-12-10 13:52) [2]
Тоже вариант
А повернуть бы как-то
Неужели майкросовтовцы тут нигде не нарушили стандарт?
← →
VictorT (2003-12-10 14:10) [3]
В смысле нужно, чтоб буквы повёррнуты были на 90 градусов?
← →
Alexander Vasjuk (2003-12-10 14:12) [4]
Да, хорошо бы
Или хотя бы на 89 градусов
← →
VictorT (2003-12-10 14:16) [5]
> Или хотя бы на 89 градусов
😀 😀 😀 :D
Наверно придётся подключать свой шрифт… В спецификации HTML и CSS нашёл только про текст справа налево :(
← →
VictorT (2003-12-10 14:20) [6]
А вообще, наверно опиши подробней, для чего это нужно, тогда мож и решение найдётся, наиболее подходяшее…
← →
Brahman (2003-12-10 14:20) [7]
Делать на лету через Perl конвертацию символа в изображение с разворотом. Далее — по смыслу.
Возможно только на сервере, а не клиенте.
Прямых методов через html скорее всего не существует.
Это ведь Text все же.
← →
Dmitriy O. (2003-12-10 14:23) [8]
Сначала нарисовать а потом вставить
← →
VictorT (2003-12-10 14:24) [9]
> Делать на лету через Perl конвертацию символа в изображение
> с разворотом.
Ага, один из вариантов… То же кстати возможно и в PHP, если GDI подключена. Правда недостаток — трафик.
З.Ы. Я потому попросил конкретнее описать проблему, чтоб может в конкретном твоём случае возможно можно найти решение получше. А возможно, это просто не нужно.
← →
Alexander Vasjuk (2003-12-10 14:36) [10]
Описываю конкретно
Вывожу кросс-отчет в html-формате в виде таблицы.
Таблица не широкая, а очень широкая.
Причем львиная доля ширины — ее шапка.
Даже будучи перенесены по словам, заголовки много шире данных таблицы (числа).
Если заголовки выводить вертикально, таблица резщко сузится.
html-код генерирую прямо на сервере (mssql).
Не хотелось бы привлекать посторонние технологии.
Хорошую вы идею подсказали — понарисовать буковок и как катинки подставлять. Правда, тогда пропадает возможность управления размерами шрифта, но пока это лучшее решение.
← →
Alexander Vasjuk (2003-12-10 14:53) [11]
Ребата-а-а!
Нашел в google:
<html>
<body>
<table border=»1″>
<tr>
<td>Normal Cell</td>
<td>Vertical Cell</td>
<tr>
</table>
</body>
</html>
Понимаю, что нестандартно, но для местной сети сойдет
← →
VictorT (2003-12-10 14:57) [12]
Текст в шапке стандартный? Если да, то можно не рисовать буковки, а непосредственно полностью фразу (лучше использовать gif с прозрачностью).
Или, если не поворачивать буквы, то типа такого:
<th>н<br>а<br>з<br>в<br>а<br>н<br>и<br>е<br><br>п<br>о<br>л<br>я<th>
<br> можно вставлять не руками, а скриптом.
← →
VictorT (2003-12-10 15:07) [13]
> Alexander Vasjuk (10.12.03 14:53) [11]
Ух ты, прикольно, возьму на заметку. Правда в опере и нетскейпе не заработало. Кстати, не удалось мне сдалать, чтоб текст вывадился не сверху вниз, а слева направо, пробовал вместо сделать, не проканало… мож приведёшь саму ссылку, где нарыл?
← →
VictorT (2003-12-10 15:08) [14]
> чтоб текст вывадился не сверху вниз, а слева направо,
хотел сказать, не сверху вниз, а снизу вверх.
← →
kaif (2003-12-10 15:23) [15]
Я думаю Вам имеет смысл познакомиться с языком VML. Там много чего можно сделать для Вашей задачи.
← →
}|{yk (2003-12-10 15:36) [16]
А где вышеуказанный код работает? А меня ни в IE 5, ни в Mozilla 1.4 не работает :(
← →
VictorT (2003-12-10 16:56) [17]
> }|{yk © (10.12.03 15:36) [16]
У меня в ИЕ 6 работает.
← →
Alexander Vasjuk (2003-12-10 17:14) [18]
VictorT © (10.12.03 15:07) [13]
http://htnew.manual.ru/forum/view.php?thread=2406
только там более подробной информации нет
VictorT © (10.12.03 14:57) [12]
Нет,екст разный. Я ж говорю, это кросс-отчет, т.е. с переменным числом столбцов.
kaif © (10.12.03 15:23) [15]
это не vrml?
А что его поддерживает? И дайте ссылку-другую…
}|{yk © (10.12.03 15:36) [16]
IE 6.0.2800.1106
Все юзера в терминале, поэтому поставлю централизовано
← →
Style (2003-12-11 09:07) [19]
.раз только под IE6, то использовать не стоит.. Проще нарисовать…
← →
Alexander Vasjuk (2003-12-11 12:29) [20]
Style © (11.12.03 09:07) [19]
Зависит от прочих условий
В моем случае с интрасетью вполне
А еще у меня была идея поискать во всех кодировках символы, похожие на повернутые русские (и английские впрочем) и распологать их друг под другом.
← →
kaif (2003-12-11 12:41) [21]
Язык VML. Правда его тоже поддерживает только IE.
http://wdh.suncloud.ru/vml01.htm
← →
Alexander Vasjuk (2003-12-12 18:35) [22]
kaif © (11.12.03 12:41) [21]
таки это vrml
язык описания виртуальной реальности
помню, я плагин к эксплореру качал для него
а 6й стало быть без плагина может…
Как в Ворде сделать вертикальный текст
Иногда в Ворде требуется сделать вертикальный текст, но это не так просто, как в программе Excel, которая обладает функцией «Формат ячеек» и может менять ориентацию текста на 360 градусов. Чтобы разобраться, как в Ворде сделать вертикальный текст необходимо рассмотреть возможности программы Word с использованием таблиц или надписей.
Создание вертикального текста в Ворде с помощью таблиц
Первый способ по созданию вертикального текста с помощью таблиц более предпочтителен и пользуется общепринятой популярностью. Данный способ позволяет располагать текст в ячейках таблицы, как горизонтально, так и вертикально.
Создаем таблицу, если возникают вопросы, как это сделать, смотрите в предыдущей статье: «Как в Ворде сделать таблицу». Будем использовать готовую матрицу таблицы – переходим на вкладку ВСТАВКА и нажимаем кнопку Таблица. Вносим данные в созданную таблицу, затем выделяем первую строку, после чего в меню появится РАБОТА С ТАБЛИЦАМИ, переходим в Макет и нажимаем Направление текста.
Существует и другой способ. Выделите любую строку таблицы, нажмите правой кнопкой мыши и выберите Направление текста…, далее появится диалоговое окно, в котором можно указать ориентацию текста в ячейки.
Результат изменения с горизонтального на вертикальное направление текста первой строки таблицы
Создание вертикального текста в Ворде с помощью надписей
Второй способ расположения вертикального текста в Ворде можно организовать с помощью надписи. Этот метод менее популярен, но имеет свое преимущество – применение настроек, как к объекту и соответственно можно расположить в любой части страницы документа. Для добавления надписи необходимо перейти во вкладку ВСТАВКА, нажать на кнопку Текстовое поле и выбрать Простая надпись. В документе отобразится добавленная надпись, текст которой необходимо перевернуть в вертикальное расположение. Для этого нажимаем на границу надписи два раза и выбираем вкладку СРЕДСТВА РИСОВАНИЯ, затем кнопку Направление текста.
Прочитав статью, как в Ворде сделать вертикальный текст, Вы можете самостоятельно использовать два способа и изменять ориентацию текста в вертикальное положение, когда это Вам необходимо.
июль 2015Не удается найти страницу | Autodesk Knowledge Network
(* {{l10n_strings.REQUIRED_FIELD}})
{{l10n_strings.CREATE_NEW_COLLECTION}}*
{{l10n_strings.ADD_COLLECTION_DESCRIPTION}}
{{l10n_strings.COLLECTION_DESCRIPTION}} {{addToCollection.description.length}}/500 {{l10n_strings.TAGS}} {{$item}} {{l10n_strings.PRODUCTS}} {{l10n_strings.DRAG_TEXT}}{{l10n_strings.DRAG_TEXT_HELP}}
{{l10n_strings.LANGUAGE}} {{$select.selected.display}}{{article.content_lang.display}}
{{l10n_strings.AUTHOR}}{{l10n_strings.AUTHOR_TOOLTIP_TEXT}}
{{$select.selected.display}} {{l10n_strings.CREATE_AND_ADD_TO_COLLECTION_MODAL_BUTTON}} {{l10n_strings.CREATE_A_COLLECTION_ERROR}} Направление— CSS: каскадные таблицы стилей
Свойство CSS direction
устанавливает направление текста, столбцов таблицы и горизонтального переполнения. Используйте rtl
для языков, пишущих справа налево (например, иврит или арабский), и ltr
для языков, написанных слева направо (например, английский и большинство других языков).
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https: // github.com / mdn / interactive-examples и отправьте нам запрос на перенос.
Обратите внимание, что направление текста обычно определяется внутри документа (например, с помощью атрибута HTML dir
), а не путем прямого использования свойства direction
.
Свойство устанавливает базовое направление текста для элементов уровня блока и направление вложений, создаваемых свойством unicode-bidi
. Он также устанавливает выравнивание текста по умолчанию, элементы уровня блока и направление перемещения ячеек в строке таблицы.
В отличие от атрибута dir
в HTML, свойство direction
не наследуется из столбцов таблицы в ячейки таблицы, поскольку наследование CSS следует дереву документа, а ячейки таблицы находятся внутри строк, но не внутри столбцов.
Свойство direction
и unicode-bidi
— это два единственных свойства, на которые не влияет сокращенное свойство all
.
направление: ltr;
направление: RTL;
направление: наследование;
направление: начальное;
направление: не задано;
Значения
-
л
- Текст и другие элементы идут слева направо.Это значение по умолчанию.
-
RTL
- Текст и другие элементы идут справа налево.
Чтобы свойство direction
оказало какое-либо влияние на элементы встроенного уровня, значение свойства unicode-bidi
должно быть , внедрить
или переопределить
.
Настройка направления справа налево
В приведенном ниже примере показаны две строки текста, каждая из которых отображается в направлении : rtl
. Хотя арабский текст отображается правильно с этой настройкой, английский текст теперь имеет точку в необычном месте.
blockquote {
направление: RTL;
ширина: 300 пикселей;
}
<цитата>
Этот абзац на английском языке, но неправильно идет справа налево.
<цитата>
الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.
Таблицы BCD загружаются только в браузере
Свойство режима записи CSS
Пример
Укажите, должны ли строки текста располагаться горизонтально или вертикально:
п.test1 {режим записи: горизонтальный-tb;
}
p.test2 {
режим письма: вертикальный-rl;
}
span.test2 {
режим записи:
вертикальный-rl;
}
Определение и использование
Свойство writing-mode
определяет, будут ли строки текста располагаться горизонтально или вертикально.
Значение по умолчанию: | горизонтальный-tb |
---|---|
Унаследовано: | да |
Анимация: | нет.Читать about animatable |
Версия: | CSS3 |
Синтаксис JavaScript: | объект .style.writingMode = «vertical-rl» |
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Имущество | |||||
---|---|---|---|---|---|
режим письма | 48.0 | 12,0 | 41,0 | 11,0 | 35,0 |
Синтаксис CSS
режим письма: горизонтальный-тб | вертикальный-рл | вертикальный-л;
Значения свойств
Значение | Описание |
---|---|
горизонтальный tb | Позвольте контенту течь горизонтально слева направо, вертикально от сверху вниз |
вертикальный-rl | Позвольте контенту перетекать вертикально сверху вниз, горизонтально из справа налево |
вертикальный-lr | Позвольте контенту перетекать вертикально сверху вниз, горизонтально из слева направо |
связанные страницы
Учебное пособие по CSS: текстовые эффекты CSS
Символьные коды | Вертикальный текст в HTML
Китайский вертикальный текст
Многие браузеры могут правильно отображать вертикальный китайский текст с помощью CSS.Стандарт W3C CSS 3 включает свойство режима письма
, которое может указывать вертикальный текст.
Для китайского языка свойство — writing-mode: vertical-rl
, что означает, что текст перемещается сверху вниз и справа налево. Это свойство поддерживается в обновленных версиях Firefox, Google Chrome и Microsoft Edge, , но пока нет в Safari или Internet Explorer.
Чтобы добавить поддержку для Internet Explorer , используйте устаревший атрибут CSS -ms-writing-mode: tb-rl.
Китайский тест
Просмотр HTML
Текст здесь
Примечание. Дизайнеры также могут добавить свойство высоты, чтобы контролировать, сколько места по вертикали занимает текст. На этой странице высота
установлена на 15em.
Китайский горизонтальный текст
Следующий двуязычный текст был взят из Taipei Times.
Дебби, белорукий гиббон из зоопарка Тайбэя, покоится на ветке со своим младенцем Бибо на недатированной фотографии.
立 動物園 的 白手 長臂猿 「黛比」 孩子 「比 波」 坐在 樹枝 上 休息 , 日期。
Фото любезно предоставлено Тайбэйским зоопарком
照片 : 台北市 立 動物園 提供
Китайский вертикальный текст
Примечание: Если текст расположен вертикально, поворачиваются английские буквы, но не китайские символы.
Дебби, белорукий гиббон из зоопарка Тайбэя, покоится на ветке со своим младенцем Бибо на недатированной фотографии.
立 動物園 的 白手 長臂猿 「黛比」 孩子 「比 波」 坐在 樹枝 上 休息 , 日期。
Фото любезно предоставлено Тайбэйским зоопарком
照片 : 台北市 立 動物園 提供
Transform: Rotate (только для декоративного использования)
Свойство transform: rotate
доступно в CSS, но на самом деле не предназначено для языков с вертикальным скриптом. Его следует использовать только для декоративных целей.
Например, transform: rotate (90deg)
приводит к вертикальному тексту, но также вызывает поворот символов.Для вертикального китайского текста это неправильный , потому что символы остаются в той же ориентации, написаны ли они по горизонтали или вертикали.
Однако, если вам нужно перевернуть текст вверх ногами, решением будет , тогда преобразование : поворот (180deg
).
Другие вертикальные сценарии
Другие вертикальные скрипты включают Mongolian и Ogam, но пока нет последовательной поддержки для этих скриптов. На данный момент лучшим вариантом может быть отображение текста в горизонтальной версии скрипта или его перевод.
Если вам нужно отобразить текст вертикально (например, для исторической точности), вы также можете использовать файл PDF или изображение с горизонтальной расшифровкой. Его можно сочетать с горизонтальной версией того же текста.
Ссылки
Режим записи
Рубиновый стандартный
Стандарт RUBY XML представляет собой вертикальную текстовую схему, которая позволяет разработчикам
отображать аннотации к тексту CJK в Интернете.
Начало страницы
ориентация текста | Codrops
Свойство text-Ориентация
определяет ориентацию символов в строке содержимого.Это применимо только к типографским режимам по вертикали .
Восточноазиатские языки, такие как китайский или японский, могут быть написаны как горизонтально, перетекая сверху вниз, так и вертикально, перетекая справа налево. Традиционное монгольское письмо пишется вертикально, слева направо. Несмотря на то, что направление потока блоков является вертикальным, каждый отдельный глиф по умолчанию остается вертикальным.
Часто веб-страницы на восточноазиатских языках содержат смешанные символы и цифры на основе латиницы.Каждый символ Unicode по умолчанию имеет ориентацию, основанную на характеристиках соответствующих систем письма, и страницы с символами из нескольких языков будут по-прежнему отображаться в правильной ориентации.
Языки, основанные на латинице, при вертикальном отображении со свойством writing-mode
имеют глифы, отображаемые сбоку, что позволяет нормально читать встроенный текст, хотя страница повернута на 90 градусов по часовой стрелке на бок. Однако мы можем сделать так, чтобы каждый символ отображался вертикально с помощью свойства text-Ориентация
.
Значения
- смешанный
- Это начальное значение. В сценариях, предназначенных только для горизонтальной ориентации, символы будут набраны сбоку (повернуты на 90 ° по часовой стрелке), в то время как для вертикальных сценариев символы будут набраны вертикально.
- прямая
- Весь текст будет набран вертикально, каждый символ будет иметь стандартную горизонтальную ориентацию.
- боком
- Весь текст будет набран боком (повернут на 90 ° по часовой стрелке), как при горизонтальном расположении.
Примеры
Свойство ориентации текста
влияет только на контент, имеющий режим вертикального письма. По умолчанию браузер уже отображает каждый символ в ориентации, присущей их системам письма, но могут быть случаи, когда мы захотим изменить эту ориентацию. Например, расположение символов или цифр на основе латинского алфавита вертикально, когда строки содержимого идут вбок.
Возьмем этот пример разметки:
Художник и теоретик Барнетт Ньюман был одним из самых интеллектуальных художников Нью-Йоркской школы.В 1933 он баллотировался на пост мэра своего города по прописке с культурной платформой, и он хорошо осознавал такие современные ужасы, как нацизм и атомная бомба.
По умолчанию числа 1933 будут отображаться боком, как и остальные символы, когда режим письма установлен на вертикальный, но мы можем сделать их вертикальными, изменив значение для диапазона text-Ориентация.
.vertical-text {
режим письма: вертикальный-rl;
}
.vertical-text span {
ориентация текста: вертикальная;
}
Live Demo
В следующем примере используется шрифт Bungee, специально разработанный для вертикального текста. Однако не так много шрифтов на основе латиницы, оптимизированных для вертикального отображения, поэтому может потребоваться настроить интервал между символами с помощью свойства letter-spacing
. Учитывая, что такие макеты в основном предназначены для коротких строк отображаемого текста, усилия, необходимые для внесения этих настроек, не должны быть слишком непреодолимыми.
Поддержка браузера
* обозначает обязательный префикс.
- Поддерживается:
- Да
- Нет
- Частично
- Полифилл
Статистика с caniuse.com
Смешанные
и вертикальные значения
поддерживаются начиная с Chrome 48 и Firefox 41. Поддержка значения сбоку
поддерживается только в Firefox 44.
режимов написания и макета CSS - Smashing Magazine
Об авторе
Рэйчел Эндрю (Rachel Andrew) - веб-разработчик, писатель и спикер.Она является автором ряда книг, в том числе The New CSS Layout. Она одна из тех, кто стоит за… Больше о Рэйчел ↬
Понимание режимов написания CSS полезно, если вы хотите работать с вертикальными скриптами или изменить режим письма по творческим причинам. Однако они также лежат в основе наших новых методов компоновки, и эти идеи все чаще применяются во всем CSS. В этой статье вы узнаете, почему Рэйчел Эндрю считает, что понимание режимов письма так важно.
Это статья не о практическом или творческом применении этого свойства.Вместо этого я хочу продемонстрировать, почему понимание режимов письма так важно - даже для тех из нас, кому редко требуется менять режим записи страницы или компонента. Поддержка нескольких режимов записи является ключевым моментом в разработке наших новых методов компоновки Flexbox и Grid Layout. Понимание этого поможет лучше понять, как работают эти методы компоновки.
Что такое режимы записи?
Режим письма документа или компонента относится к направлению, в котором течет текст.В CSS для работы с режимами записи мы используем свойство writing-mode
. Это свойство может принимать следующие значения:
-
horizontal-tb
-
vertical-rl
-
vertical-lr
-
sideways-rl
-
sideways-lr
45
Если читать эту статью в Smashing Magazine на английском языке, то режим написания этого документа - -
grid-row-start: 1;
— начало блока -
начало столбца сетки: 2
— начало строки строки -
конец строки сетки: 3
— конец блока -
конец столбца сетки: 5
— конец строки строки
horizontal-tb
или Horizontal Top To Bottom .В английском предложения пишутся горизонтально - первая буква каждой строки начинается слева. Такой язык, как арабский, также имеет режим письма по горизонтали-tb
. Он пишется горизонтально, сверху вниз, однако арабский шрифт пишется справа налево, поэтому предложения на арабском языке начинаются справа.
Китайский, японский и корейский языки пишутся вертикально, причем первый символ первого предложения находится в верхнем правом углу. Следующие предложения добавляются слева.Следовательно, используется режим записи vertical-rl
. Режим вертикального письма справа налево.
Монгольский тоже пишется вертикально, но слева направо. Следовательно, если вы хотите набрать монгольский шрифт, вы должны использовать режим письма vertical-lr
.
Два других значения Writing-mode
предназначены больше для творческих целей, чем для набора вертикальных шрифтов. При использовании sideways-lr
и sideways-rl
текст поворачивается боком - даже символы, которые обычно пишутся вертикально и вертикально.К сожалению, на данный момент значения поддерживаются только в Firefox. Следующий CodePen показывает все различные значения Writing-mode
, вам нужно будет использовать Firefox, если вы хотите увидеть боком - *
в действии.
См. Перо [демонстрация режима письма] (https://codepen.io/rachelandrew/pen/dxVVRj) Рэйчел Эндрю.
См. Демонстрацию режима письма пером, написанную Рэйчел Эндрю.Writing Modes можно использовать при создании документа, который использует язык, написанный с использованием этого режима письма.Их также можно использовать творчески, например, для установки заголовка вертикально вниз по стороне некоторого контента. В этой статье, однако, я хочу взглянуть на влияние, которое поддержка вертикальных языков и возможность вертикального текста оказывает на макет CSS и на CSS в целом.
Прежде чем я это сделаю - если вас интересует использование режимов письма для вертикального текста - вот несколько полезных ресурсов:
Блочные и встроенные измерения
Когда мы меняем режим письма в документе, что мы делаем переключает направление потока блока .Поэтому нам быстро становится очень полезно понять, что подразумевается под блоком и встроенным.
Первое, что мы узнаем о CSS, это то, что некоторые элементы являются блочными, например, абзацем. Эти элементы отображаются один за другим в направлении блока. Встроенные элементы, такие как слово в предложении, отображаются один за другим в строчном направлении. Работая в режиме горизонтального письма, мы привыкли к тому, что размер блока идет сверху вниз по вертикали, а встроенный размер слева направо по горизонтали.
Поскольку блочные и встроенные элементы относятся к режиму записи нашего документа, однако, встроенное измерение является горизонтальным, только если мы находимся в горизонтальном режиме записи. Это касается не ширины, а встроенного размера. Размер блока вертикальный только в горизонтальном режиме записи. Следовательно, это относится не к высоте, а к размеру блока.
Логические, относительные к потоку свойства
Эти термины, встроенный размер и размер блока также используются в качестве имен новых свойств CSS, разработанных для отражения нашего нового мира, ориентированного на режим письма.Если в горизонтальном режиме записи вы используете свойство inline-size
вместо width
, оно будет действовать точно так же, как width - до тех пор, пока вы не переключите режим записи вашего компонента. Если вы используете ширину
, которая всегда будет физическим размером, она всегда будет размером компонента по горизонтали. Если вы используете inline-size
, это будет размер во встроенном измерении, как показано в примере ниже.
См. Pen [ширина и встроенный размер] (https: // codepen.io / rachelandrew / pen / RXLLyd) Рэйчел Эндрю.
См. Сравнение ширины пера и встроенного размера Рэйчел Эндрю. То же самое и для высотой
. Свойство height
всегда будет иметь размер по вертикали. Это связано с высотой предмета. Однако свойство размера блока дает размер в размере блока по вертикали, если мы находимся в горизонтальном режиме записи, и по горизонтали в вертикальном.
Как я описал в своей статье «Понимание логических свойств и значений», есть сопоставления для всех физических свойств, которые привязаны к размерам экрана.Как только вы начинаете думать об этом, так много CSS определяется по отношению к физическому расположению экрана. Мы устанавливаем позиционирование, поля, отступы и границы, используя top, right, bottom и left. Мы плаваем влево и вправо. Иногда мы хотим привязать вещи к физическому измерению, однако все чаще мы думаем о своих схемах без привязки к физическому местоположению. Спецификация логических свойств и значений разворачивает этот независимый от режима записи способ работы прямо через CSS.
Режимы записи, сетка и Flexbox
Когда наши новые методы компоновки попали на сцену, они принесли с собой независимый взгляд на режим записи компонента, размещаемого в виде гибкого или сеточного макета. Впервые людей просили думать о начале и конце, а не о левом и правом, верхнем и нижнем.
Когда я впервые начал выступать по теме CSS Grid, мои ранние презентации были кратким изложением всех свойств в спецификации.Я упоминал, что свойство grid-area
можно использовать для установки всех четырех линий для размещения элемента сетки. Однако порядок этих линий не был привычным для всех четырех полей: сверху, справа, снизу и слева. Вместо этого нам нужно использовать верхний, левый, нижний, правый — в обратном порядке! Пока я не понял связь между сеткой и режимами письма, это казалось очень странным решением. Я понял, что мы устанавливаем обе начальные линии, а затем обе конечные. Использование верхнего, правого, нижнего и левого полей будет работать нормально, если мы будем в режиме горизонтального письма, однако поверните сетку на бок, и это не имеет смысла.Если мы используем grid-area: 1/2/3/5;
, как в ручке ниже, линии устанавливаются следующим образом:
См. Pen [grid-area] (https://codepen.io/rachelandrew/pen/zgEEQW) Рэйчел Эндрю.
См. Сетку Пера Рэйчел Эндрю.Строки и столбцы Flexbox
Если вы используете Flexbox и добавляете display: flex
к контейнеру, ваши элементы будут отображаться в виде строки, поскольку начальное значение свойства flex-direction
равно row
.Строка будет следовать за внутренним размером используемого режима письма. Поэтому, если ваш режим записи — по горизонтали-tb
, строка будет идти по горизонтали. Если направление текста текущего скрипта слева направо, то элементы будут выстраиваться, начиная слева, если справа налево, они будут выстраиваться, начиная с справа.
Однако используйте режим вертикального письма, например vertical-rl
и flex-direction: row
заставит элементы располагаться вертикально, так как внутреннее направление — вертикальное.В следующем CodePen все примеры имеют flex-direction: строка
, изменился только режим или направление письма.
См. Перо [flex-direction: row] (https://codepen.io/rachelandrew/pen/XvezrE) Рэйчел Эндрю.
См. «Pen flex-direction: row» Рэйчел Эндрю. Добавьте flex-direction: столбец
и макет элементов в размер блока вашего режима письма. В режиме горизонтального письма размер блока — сверху вниз, поэтому столбец вертикальный. При режиме записи вертикальный-rl
столбец горизонтальный.Как и в предыдущем примере, единственная разница между приведенными ниже гибкими макетами — это используемый режим записи.
См. Перо [flex-direction: column] (https://codepen.io/rachelandrew/pen/RXLjbX) Рэйчел Эндрю.
См. Столбец Pen flex-direction: Рэйчел Эндрю.Автоматическое размещение сетки
При использовании автоматического размещения в сетке вы увидите поведение, подобное гибкому макету. Элементы сетки автоматически размещаются в соответствии с режимом написания документа. По умолчанию элементы размещаются в строках, которые будут внутренним направлением — горизонтально в горизонтальном режиме записи и вертикально в вертикальном.
См. Перо [строка автоматического размещения сетки] (https://codepen.io/rachelandrew/pen/eqGeYV) Рэйчел Эндрю.
См. Строку автоматического размещения Pen Grid от Рэйчел Эндрю. Попробуйте изменить поток элементов на столбец
, как в примере ниже. Элементы теперь будут перемещаться в размерном блоке — вертикально в горизонтальном режиме письма и горизонтально в вертикальном.
См. Перо [столбец автоматического размещения сетки] (https://codepen.io/rachelandrew/pen/xvXPby) Рэйчел Эндрю.
См. Столбец автоматического размещения Pen Grid от Рэйчел Эндрю.Размещение строк по сетке
Размещение на основе строк также учитывает режим письма. Линии нашей сетки начинаются с 1, как для строк, так и для столбцов. Если мы разместим элемент от строки столбца 1 до строки столбца 3 и находимся в горизонтальном режиме записи с направлением слева направо, этот элемент будет растягиваться от самой левой строки столбца через две дорожки сетки по горизонтали. Таким образом, охватывая две колонки.
Измените режим записи на vertical-rl
, и линия столбца 1 будет в верхней части сетки, элемент будет охватывать две дорожки по вертикали.По-прежнему охватывает два столбца, но теперь столбцы идут горизонтально.
См. Перо [Поля: соседние братья и сестры] (https://codepen.io/rachelandrew/pen/mNBqEy) Рэйчел Эндрю.
См. «Поля пера: соседние братья и сестры» Рэйчел Эндрю.Выравнивание в сетке и Flexbox
Одним из первых мест, где многие люди познакомились с тем, как Flexbox работает с режимами письма, было выравнивание элементов в гибком макете. Если мы возьмем приведенный выше пример flex-direction: row
и воспользуемся свойством justify-content
для выравнивания всех элементов с flex-end
, элементы переместятся в конец своей строки.Это означает, что в режиме горизонтального письма с направлением слева направо все элементы перемещаются вправо, так как конец этой строки находится справа. Если направление справа налево, то все они перемещаются влево.
В режиме вертикального письма они перемещаются вниз, если для этого есть место. Я установил встроенного размера
для компонентов в этом примере, чтобы гарантировать, что у нас есть свободное место в наших гибких контейнерах, чтобы увидеть выравнивание в действии.
Выравнивание немного легче понять в макете сетки, поскольку у нас всегда есть две оси, с которыми можно поиграть.Сетка двумерная, эти два измерения — блочное и встроенное. Поэтому вы можете запомнить одно правило, если хотите знать, использовать ли свойства, начинающиеся с align-
, или те, которые начинаются с justify-
. В макете сетки свойства align-
: — align-content
, align-items
, align-self
используются для выравнивания оси блока. В режиме горизонтального письма это означает вертикальное, а в режиме вертикального письма — горизонтально.
Еще раз: мы не используем left и right, top и bottom, поскольку мы хотим, чтобы наша сетка работала одинаково независимо от режима письма. Таким образом, мы выравниваем, используя начало
и конец
. Если мы выровняем по start
по измерению блока, это будет top
при horizontal-tb
, но будет right
при vertical-rl
. Взгляните на пример ниже, значения выравнивания идентичны в обеих сетках, единственное различие — используемый режим записи.
См. Перо [Поля: соседние братья и сестры] (https://codepen.io/rachelandrew/pen/jgGaML) Рэйчел Эндрю.
См. «Поля пера: соседние братья и сестры» Рэйчел Эндрю. Свойства justify-content
, justify-items
, justify-self
всегда используются для встроенного выравнивания в макете сетки. Это будет горизонтально в режиме горизонтального письма и вертикально в режиме вертикального письма.
См. Pen [Поля: соседние братья и сестры] (https: // codepen.io / rachelandrew / pen / RXLjpP) Рэйчел Эндрю.
См. «Поля пера: соседние братья и сестры» Рэйчел Эндрю. Выравнивание Flexbox несколько усложняется тем фактом, что главная ось может переключаться со строки на столбец. Поэтому в Flexbox нам нужно думать о методе выравнивания как о главной оси по сравнению с поперечной осью. На поперечной оси используются свойства align-
. На главной оси все, что у вас есть, это justify-content
, потому что мы работаем с элементами как с группой во Flexbox.На поперечной оси вы можете использовать align-content
в случаях, когда у вас есть несколько гибких линий и пробелов в гибком контейнере, чтобы разнести их. Вы также можете использовать align-items
и align-self
для перемещения гибких элементов на поперечной оси относительно друг друга и их гибкой линии.
См. Перо [выравнивание Flexbox] (https://codepen.io/rachelandrew/pen/YmrExP) Рэйчел Эндрю.
См. Выравнивание Pen Flexbox Рэйчел Эндрю.Дополнительные сведения о выравнивании в макете CSS см. В моих предыдущих статьях журнала Smashing Magazine:
Осведомленность о режиме письма и старый CSS
Не все CSS полностью адаптировались к этому независимому от режима записи способу работы, связанному с потоком.Места, где он еще не начался, выделяются как необычные, чем больше вы думаете о вещах в терминах блока и инлайн, начала и конца. Например, в многоколоночном макете мы указываем column-width
, что на самом деле означает встроенный размер столбца, поскольку он не сопоставляется с физической шириной при работе в режиме вертикального письма.
См. Перо [Многоцветный и режим письма] (https://codepen.io/rachelandrew/pen/pMWdLL) Рэйчел Эндрю.
См. Многоцветное перо и режим письма Рэйчел Эндрю. Как видите, режимы записи лежат в основе большей части того, что мы делаем в CSS, даже если мы никогда не используем другой режим записи, кроме horizontal-tb
.
Я считаю невероятно полезным думать о макете CSS в этом независимом от режима записи способе. Хотя, возможно, еще немного рано переключать все наши свойства и значения на логические, мы уже находимся в мире, относящемся к потоку, когда имеем дело с новыми методами макета. Если ваша ментальная модель состоит из блоков и встроенных элементов, начала и конца, а не привязана к четырем углам экрана, это проясняет многие вещи, с которыми мы сталкиваемся при использовании FlexBox и сетки.
(il)Надежная вертикальная компоновка текста
Немногие системы форматирования сегодня могут обрабатывать вертикальную компоновку текста, и большинство из них размещают текст только в столбцах справа налево. Этот документ очерчивает систему, которая может не только обрабатывать общие сценарии по вертикали справа налево. столбцы, но это может изящно принимать необычные комбинации скриптов и текстовые столбцы с направлением слева направо. Модель описана здесь как система CSS, но эти концепции могут применяться и к системам, не относящимся к CSS.
Модель CSS и Unicode обеспечивают поддержку логических верстка текста, но только в горизонтальном направлении. Хотя CSS3 Text пытается использовать горизонтальные элементы управления BIDI для обработки вертикального BIDI, система, которую он устанавливает, нечетко сформулированный и негибкий, опирается на предположения, которые могут не соответствовать действительности, и требует, чтобы содержимое стилизованного документа и его разметка были адаптированы к CSS. а не наоборот. В лучшем дизайне будет использоваться внутренняя свойства символов и расширение логики Unicode для размещения текст.Таким образом, макетная модель, основанная на логике и знании письма. системы могут масштабироваться для корректной обработки любой комбинации скриптов, могут правильно (если не оптимально) выложить текст с любой комбинацией стилей свойства, и может хорошо интегрироваться с многоуровневым Unicode + Markup + Styling модель документов с семантическими тегами.
«Каскад» в каскадных таблицах стилей
В отличие от многих систем форматирования, в которых свойства стиля окончательно применяется к элементу страницы в какой-то момент, CSS собирает и применяет к element несколько правил стиля от автора, читателя и пользовательского агента.В случай конфликта, происхождение правила и специфика селектор элемента правила определяет, какое из конфликтующих значений свойств действует на элемент. Этот процесс сортировки и применения стилевых правил называется каскадным , и это позволяет правила стиля из нескольких источников и с отдельным форматированием стремятся к строгому взаимодействию.
Каскад означает, что свойства стиля, указанные вместе, не гарантированно вступят в силу вместе. Это повышает стандарты дизайна для создания свойств CSS и подталкивает их к более логичному, скорее чем физическое, описание предполагаемой конструкции.
CSS и Unicode BIDI
CSS2 представил направление
и unicode-bidi
свойства для включения директив разметки, таких как HTML dir
атрибут в модель рендеринга CSS и разрешить использование разметки
семантика при назначении вложений BIDI.Направление
недвижимость
может принимать значения ltr
и rtl
, и это значение
наследуется дочерним элементам. Свойство unicode-bidi
назначает вложения и переопределения в направлении, заданном направление
недвижимость. Его поведение определяется с точки зрения
Коды внедрения и переопределения Unicode.
/ * сопоставляем атрибут 'dir' с 'direction' + встраивание * / * [dir = "ltr"] {direction: ltr; юникод-биди: вставлять; } * [dir = "rtl"] {направление: rtl; юникод-биди: вставлять; } / * встраиваем цитаты, чтобы они всегда оставались единым целым * / д {юникод-биди: вставлять;}
При применении к блоку текста свойство direction
указывает направление встраивания блока; Документы CSS не используют
эвристика для угадывания направления встраивания блока.
Эти свойства предназначены для отражения различий BIDI, необходимых для правильный порядок текста. Авторы в целом не одобряют от использования свойств в пользу прямой разметки, которая запускать соответствующие значения.
CSS3 текст
был предназначен для обновления и расширения возможностей макета текста CSS2
добавив поддержку большего количества функций международного набора и представив
элементы управления для размещения вертикального текста.Он определяет последовательность блоков
свойство, которое переключает направление наложения строк и захватывает rtl
и ltr
значения направления
свойство для использования в качестве встроенного элемента управления в вертикальном тексте.
режим записи: направление: блок-прогрессия: Обычное использование: lr-tb л тб Латинская, греческая, кириллица (и многие другие) рл-тб RTL тб Арабский, иврит системы письма tb-rl л rl некоторые восточноазиатские системы письма тб-лр RTL лр Монгольская письменность
Это хороший пример того, как , а не , настраивает вертикальную текстовую систему.
Для взаимодействия с Unicode Алгоритм BIDI, CSS3 Text отображает характер вертикальных скриптов направленность на основе последовательности блоков абзаца.
Поскольку всем вертикальным скриптам в Юникоде назначается канонический направленность слева направо, переупорядочивание BIDI выполняется как обычно, когда текстовые столбцы располагаются справа налево.
Однако, если столбцы текста располагаются в другую сторону — от
слева направо — затем те же символы (пока все
учитывая направленность слева направо в Юникоде) обрабатываются как справа налево
символов ( R
).Это было сделано потому, что скрипты с написанием слева направо
например, латинский читать снизу вверх, когда строки текста расположены влево
направо. В этом случае скрипты сверху вниз должны идти в направлении напротив слева направо, а противоположность ltr — rtl.
Возникновение с направленностью вертикальных скриптов мешает другим битам макета текста, и большая часть этого взаимодействия осталась неопределенной. Формирование символов, например, зависит от переупорядоченной строки BIDI. в обычном порядке.Не только порядок персонажей, но и их формирование алгоритм и код рендеринга шрифта должны компенсировать изменил входные данные для алгоритма BIDI, и текст CSS3 не смог объяснить необходимые изменения.
Например, монгольский — это курсивный вертикальный шрифт. Как арабский (чтобы к которому он относится), это также сценарий формирования: буква на начало слова имеет форму не так, как в середине или в конец.Unicode определяет монгольский язык как сценарий с письмом слева направо, поэтому шейпинг превращает крайний левый символ слова в инициал, а крайний правый персонаж в финал. Однако если монгольское слово упорядочены справа налево, тогда первая буква слова будет на право, и поэтому имеет форму финала, а не инициала. Это потому что формирование происходит после переупорядочения . Вертикальный монгольский текст, обработанный таким образом, будет выглядеть перевернутым и читаться как набор чушь, и никакое вращение глифа не может решить проблему.Сделать буквы соединяются правильно при переопределении CSS справа налево, Части текста на монгольском языке должны быть перевернуты, а затем их глифы повернуты на 180 ° — но об этом даже не упоминается в CSS3 Text.
Чтобы приспособить неточно определенные настройки текста CSS3 к переупорядочению BIDI (и
формирование символов и рендеринг шрифтов), система компоновки не может просто передать
строка для стандартных функций обработки Unicode.
Предположим, однако, что системе макета удается внутренне удерживать
притворство, что «сверху вниз» — это «справа налево».Это все еще нужно
взаимодействовать с инструкциями BIDI из внешнего мира, что не
разделите заблуждение. Стремясь заставить внешний мир казаться так как он адаптирован к этим изменениям, CSS3 Text инструктирует дизайнера использовать direction: rtl
при назначении block-progression: lr
к блоку текста с написанием сверху вниз (например, на монгольском или китайском, оба
на самом деле ltr
скриптов), по сути, прося его солгать о
свойства текста.Как и большинство лжи, в общем случае это работает,
но по мере усложнения ситуации система выходит из строя …
Прежде всего, если ожидаемая последовательность блоков не вступит в силу — будет ли через каскад или из-за отсутствия поддержки UA — направление текста и назначенное направление встраивания больше не совпадает и тонкости Unicode BIDI может нанести ущерб порядку текста.
(这 是) 一些 中国 字.
управляющих символа BIDI, размещенных автором контента для упорядочивания горизонтального текста теперь влияют на набор направленности персонажей.
В этой последовательности:
在 这个 对话, بهار 告诉 الیکا :
این کتاب را به برادرم ببر و برایش بخوان.
Знаки препинания в середине обозначаются как «тонкий пробел», «двоеточие», «пробел».Последовательность знаков препинания с одной стороны окружена некоторым текстом RTL. (ندا) и вложение RTL (цитата) на Другой. Если оставить в покое, тонкое пространство и толстая кишка присоединятся к персидскому имя и цитата в одной последовательности справа налево, например:
在 这个 对话, بهار 告诉 الیکا :
این کتاب را به برادرم ببر و برایش بخوان.
Автор текста (или программа для редактирования) был достаточно умен. чтобы вставить две метки слева направо (
LRM
) вокруг последовательность знаков препинания, чтобы этого не произошло.Если, однако, этот параграф на китайском языке трактуется как rtl при вставке вертикального контекста, то последовательность знаков препинания будет упорядочена Неправильный путь. (Из-за кодов оно по-прежнему будет слева направо, вместо письма справа налево, как в остальном тексте.)
CSS-вложений, установленных на элементах в пределах форматированного блока: больше не обязательно идти правильным путем.
Этот бит кода задает неправильную направленность, если текст должен быть вставлен на страницу с настройками вертикального макета текста которые заставляют китайцев делать вид, что это RTL.
примечание: before { content: «注意:»; направление: ltr; юникод-биди: вставлять; }
HTML
dir
атрибутов, которые были добавлены с предположением обычный, горизонтальный текст может иметь или не нуждаться в своих эффектах быть отмененным.وسط این خملة فرسی,
在 中国 (PRC) 人民 用 人民币.
خملة چینی هست p>وسط این خملة فرسی,
在 中国 (PRC) 人民 用 人民币.
ملة نی هستЕсли этот абзац переходит в последовательность блоков слева направо, китайская цитата потребует вложения справа налево, чтобы она соответствовала Направленность с изменением CSS, а не слева направо.
Нет никаких упоминаний о том, как должно происходить формирование персонажа.
В заключение, злоупотребление контролем направленности для создания ограниченной системы правильно разложить текст не масштабируется.Это взлом, а не решение.
Чтобы описать, как текст перетекает в строки, нужно знать три вещей:
- направление текста внутри строки (встроенная последовательность)
- в каком направлении линии складываются (последовательность блоков)
- в какую сторону смотрят глифы (ориентация глифа)
Однако не все комбинации направления текста и ориентации глифа действительны.Поэтому, если некоторые из присущих персонажу характеристик известно, часто можно вывести одно из другого. Системы Юникода Воспользуйтесь этой моделью в горизонтальном тексте: вам не нужно вручную указывать каждому запуску иврита, чтобы он располагался справа налево, и вам не нужно указывать, что монгольские иероглифы поворачиваются сами боком, когда текст идет горизонтально слева направо.
Логическое и физическое описание
В чисто физической схеме компоновки каждый из этих свойства макета текста будут даны как абсолютные: Встроенный прогрессия английского языка сверху вниз, его глиф ориентация — 90 градусов по часовой стрелке, прогрессия блока — от справа налево.Однако, поскольку взаимосвязь между этими свойствами реализовано в сознании автора, а не в системе,
- Автор должен вручную вмешиваться каждый раз, когда есть сценарий изменять.
- Если одно из трех свойств не вступает в силу (из-за Каскад или отсутствие поддержки UA), то макет ломается и текст становится нечитаемым.
Лучшая система будет включать знания о внутренних характеристики и определить свойства стиля с точки зрения отношения между ними.
Внутренняя направленность и ориентация
У каждого шрифта есть характерное направление письма, и каждый символ в Юникоде на основе этой характеристики присваивается значение направленности. К сожалению, Unicode в настоящее время определяет только горизонтальный направленность, даже несмотря на то, что вертикальные и двунаправленные сценарии имеют также вертикальная направленность. Например, пока английский может пойти либо сверху вниз, либо снизу вверх (поскольку у него нет вертикального направленность), японский должен идти только сверху вниз, даже в прогрессия блока слева направо.Монгольский также имеет сверху вниз вертикальная направленность. Однако, в отличие от японского, в нем нет определенного горизонтальная направленность (просто каноническая для целей BIDI).
Классификация скриптов по направленности
Скрипты можно разделить на три ориентировочные категории:
- горизонтальный
- Скрипты с горизонтальной, но не вертикальной направленностью. Включает: латынь, Арабский, Иврит, Деванагари
- вертикальный
- Скрипты с вертикальной, но не горизонтальной направленностью.Включает: монгольский, Маньчжурский
- двунаправленный
- Скрипты с вертикальной и горизонтальной направленностью. Включает: Хан, Хангыль, Йи, Огам
Двунаправленные письменности могут быть дополнительно классифицированы по тому, как их глифы трансформируются при переключении ориентации. CJK Перевод символов; они всегда в вертикальном положении.Другой скрипты, такие как Огам и некоторые варианты классического Йи, должны быть повернутый.
Логический поток текста
Подразумевающее направление
Скрипты в исходной ориентации не нуждаются в дополнительной стилистике. подсказки для правильного макета: их встроенная последовательность и ориентация глифа оба являются обязательными по своей сути, поэтому система стилей может знать сама как их выложить. Направленность и ориентация глифов переопределения не требуются и не должны использоваться. (Фактически, их использование ухудшает систему, создавая клубок зависимостей, как показано в разделе, посвященном текущей версии CSS3 Text.)
Скриптам с внешней ориентацией не нужны ни направленность, ни глиф. отменяет либо. Им просто нужны подсказки: нужно ли переводить вертикально, или, если они повернуты вбок, какая сторона «вверх». При условии, правила размещения текста в исходной ориентации: достаточно, чтобы определить встроенную последовательность и точную ориентацию глифа.
Ориентация по блокам
Для скриптов в неродной ориентации естественный встроенный текстовый поток зависит от направления укладки строк: текст удобнее всего размещен так, как будто весь текстовый блок был просто повернут от горизонтальный. Например, английский текст в вертикальных линиях, которые складываются из слева направо будут сталкиваться с вершинами глифов слева и направление текста — снизу вверх.Тот же текст, тем же логика, будет в контексте наложения строк справа налево лицом вправо и поток внутри каждой строки сверху вниз.
Простой поворот отображаемого текста от горизонтали макета недостаточно, потому что, хотя основной сценарий горизонтальный, он может включать вертикальный текст (например, китайский), который необходимо быть выложенным соответствующим образом для вертикальных линий.
Ввести эту логику в систему стилей очень просто: определите «вверх» для неродных глифов, чтобы они указывали на начало стека строк, а встроенная прогрессия следует из этой ориентации.Ориентация глифа и встроенная прогрессия, таким образом, будет адаптироваться к любой прогрессии блока вступает в силу.
Эта схема компоновки наиболее подходит для работы с текстом, имеющим перевернут на бок для разметки — например, для заголовков страниц или подписи или заголовки таблиц. Тем не менее, основной вариант использования для разметки текст в неродной ориентации смешивается по горизонтали и вертикали скрипты, что вводит требование сделать вторичный сценарии хорошо сочетаются с основным сценарием.
Например, документ преимущественно на монгольском языке с вертикальными линиями. укладывая слева направо, обычно кладет свой латинский текст с глифами лицом вправо. Это заставляет текст работать в той же встроенной последовательности как монгольский и обращены в том же направлении, что и в других восточноазиатских макеты (с вертикальными линиями, расположенными справа налево), но глифы обращены к дну стека строк, а не к вверху, чего бы они не сделали в абзаце, написанном преимущественно на английском языке.
Еще одна распространенная компоновка — сохранение глифов горизонтального скрипта. в вертикальном положении и расположите их сверху вниз; это часто делается с Аббревиатуры латинским шрифтом в вертикальном восточноазиатском тексте.
Для обработки этих макетов система стилей должна предлагать элементы управления для выбирая среди этих различных схем расположения. Обратите внимание, однако, что сценариям в их родной ориентации эти подсказки не нужны; только неродные делают.Кроме того, здесь есть только один простой переключатель схемы: дизайнеру не нужно устанавливать отдельные абсолютные встроенные элементы управления прогрессией и ориентацией глифа или для установки свойств стиля при каждом запуске текста отдельного сценария.
Три переключателя логического расположения текста
Таким образом, чтобы разложить блок произвольного текста со смешанным шрифтом, система компоновки должна предлагать только три элемента управления:
- направленность основного скрипта (свойство BIDI)
- направление развития блока (стилистическое свойство)
- Схема ориентации глифа (стилистическое свойство)
Формализованная в синтаксисе CSS, это становится:
-
направление
Первичная направленность.Может принимать следующие значения
-
л
- Направление слева направо в горизонтальном тексте; Вертикальному тексту не присуща направленность. (Горизонтальный шрифт) Примеры: латинский, тибетский.
-
RTL
- Направленность справа налево в горизонтальном тексте; Вертикальному тексту не присуща направленность.(Горизонтальный шрифт) Примеры: арабский, иврит.
-
ттб
- Направленность вертикального текста сверху вниз; В горизонтальном тексте нет присущей направленности. (Вертикальный шрифт) Пример: традиционный монгольский
-
лтр-ттб
- Направление слева направо в горизонтальном тексте; Направление сверху вниз в вертикальном тексте.(Двунаправленный сценарий) Примеры: хань, современный И.
-
LTR-BTT
- Направление слева направо в горизонтальном тексте; Направление снизу вверх в вертикальном тексте. (Двунаправленный сценарий) Пример: огам
-
-
блок-прогрессия
Направление прохождения блока (наложения строк).Может принимать следующие значения
-
тб
- Укладка строк сверху вниз (горизонтальный текст). Обычно используется для большинства не восточноазиатских макетов.
-
rl
- Наложение строк справа налево (вертикальный текст). Обычно используется для традиционной раскладки CJK.
-
лр
- Наложение строк слева направо (вертикальный текст).Обычно используется для традиционной монгольской раскладки.
-
-
ориентация текста вертикальная
Схема ориентации глифов для использования в вертикальном тексте. Может принимать следующие значения
-
натуральный
- Невертикальные прогоны скрипта выкладываются так, как будто «вверх» к верху стека строк (влево или вправо, в зависимости от о прогрессировании блока в действии).(Вертикальные скрипты представлены как вертикальные.)
-
осталось
- Невертикальные прогоны скрипта выкладываются так, как будто «вверх» к левой стороне стека строк. (Вертикальные скрипты представлены как вертикальные.)
-
правый
- Невертикальные прогоны скрипта выкладываются так, как будто «вверх» справа от стека строк.(Вертикальные скрипты представлены как вертикальные.)
-
прямая
- Символы невертикальных сценариев читаются сверху вниз, с каждый кластер графема ориентирован вертикально. (Вертикальные скрипты представлены как вертикальные.)
Для обработки вертикальных скриптов в горизонтальной компоновке, свойство
text-Ориентация-горизонтальное
также необходимо; он вступает в силу только тогда, когда прогресс блока сверху вниз.Чтобы обсуждение было менее подробным, я отнесение рассмотрения горизонтальной компоновки к приложению.-
Если направленность текста установлена правильно (и он должен устанавливаться автоматически из содержимого / разметки до тех пор, пока дизайнер не трогает позже), любая комбинация стилистические значения блочной прогрессии и ориентации текста приведут к в правильном (хотя, возможно, и не оптимальном) макете текста.
Таким образом, система стилей может справиться с большинством тонкостей компоновки. как обычные, так и необычные комбинации самого текста. Что нужно сделать это, однако, значит знать внутренние свойства персонажей и логика их выкладки.
UAX # 50: Вертикальное расположение текста Unicode
Стандартное приложение Unicode® № 50
Сводка
Таблицы кода Unicode обычно показывают символы, ориентированные на горизонтальное представление.Однако некоторые глифы на самом деле ориентированы на вертикальное представление. Некоторые символы меняют форму или ориентацию при повороте текста с горизонтального на вертикальное.
Когда представлен текст, существуют различные соглашения об ориентации символов по отношению к строке. В большинстве случаев символы ориентированы вертикально, аналогично их представлению в кодовых таблицах Unicode.В некоторых случаях, когда символы представлены вертикальными линиями, они будут отображаться повернутыми или преобразованными по-разному. Например, в Восточной Азии иероглифы хань, слоги Кана, слоги хангыль и латинские буквы в акронимах расположены вертикально, в то время как слова и предложения в латинице обычно располагаются боком. В этом отчете описывается свойство символа Юникода. который может служить стабильной ориентацией символов по умолчанию для надежного обмена документами.
Статус
Этот документ был рассмотрен участниками Unicode и другими заинтересованными сторонами и одобрен. для публикации Консорциумом Unicode. Это стабильный документ, и его можно использовать в качестве справочного материала. материал или цитируется в качестве нормативной ссылки в других спецификациях.
Приложение к стандарту Unicode (UAX) является неотъемлемой частью стандарта Unicode, но опубликовано в Интернете как отдельный документ.Стандарт Unicode может требовать соответствия нормативному содержанию в Приложении к стандарту Unicode, если это указано в главе «Соответствие» этого документа. версия стандарта Unicode. Номер версии документа UAX соответствует версии стандарта Unicode, частью которого он является.
Пожалуйста, отправляйте исправления и другие комментарии, заполнив онлайн-форму [Отзыв].Связанная информация, полезная для понимания этого приложения, находится в Приложении № 41 к стандарту Unicode, «Общие ссылки на стандартные приложения Unicode». Последнюю версию стандарта Unicode см. В [Unicode]. Список текущих технических отчетов Unicode см. В разделе [Отчеты]. Для получения дополнительной информации о версиях стандарта Unicode см. [Версии]. Сведения об исправлениях, которые могут относиться к этому приложению, см. В [Исправления].
Содержание
Когда текст отображается вертикальными линиями, существуют различные соглашения об ориентации символов относительно линия. В Восточной Азии иероглифы хань, слоги Кана и слоги хангыль, вместе с латинскими буквами аббревиатур оставаться в вертикальном положении, это означает, что они отображаются с той же ориентацией, что и в таблицах кода, но слова и предложения, состоящие из символов латинский шрифт обычно ориентирован боком, как видно на рисунке 1.
Рис. 1. Вертикальный текст на японском языке
Во многих частях света большинство персонажей стоят прямо, как видно на рисунке 2.
Рис. 2. Вертикальный западный текст
Большинство языков и скриптов написаны горизонтально и вертикально. презентация — это особый случай, обычно используемый для коротких фрагментов текста (как на рис. 2).Однако некоторые языки имеют издательские традиции, предусматривающие использование длинного формата. вертикальное представление текста, особенно восточноазиатских языков, таких как японский. На этих языках ориентация расположения символов может быть разной, в зависимости от сценария, стиля и иногда контекста. Предпочтительная или желаемая ориентация также может меняться со временем.
Хотя выбор ориентации персонажа может варьироваться в зависимости от документа, важно, чтобы выбор, сделанный автором для конкретного документа, был четко учредил, чтобы система рендеринга могла отображать то, что задумал автор.Также важно, чтобы этот выбор был установлен независимо от ресурсов шрифта, поскольку системы рендеринга могут использовать шрифты, отличные от тех, которые предназначены или указаны в документе. Наконец, выбор автора должен быть относительно кратким, для облегчения создания документов и минимизации размера документа.
В этом отчете описывается свойство символа Юникода. который может служить стабильной ориентацией символа по умолчанию для надежного обмена документами.
Для надежного обмена документами, это свойство определяет однозначное значение по умолчанию, чтобы реализации могли надежно отображать поток символов основанный исключительно на значениях свойств, вне зависимости от другой информации например, представленные в таблицах выбранного шрифта.
Цель состоит в том, чтобы форматы документов предлагали автору возможность указание желаемой ориентации данного символа (либо все вхождения, либо конкретное вхождение), и что в отсутствие явной спецификации ориентация неявно определяется свойством, представленным в этом отчете.
В виде обычного текста, который по определению не позволяет записывать какие-либо данные, кроме персонажи, ориентация по необходимости определяется свойством.
Фактический выбор значений свойств должен привести к разумному или разборчивому дефолт, но это может быть не качество издательского материала, и это может быть не лучшим выбором, если используется в определенном стиле или контексте.
Стоимость недвижимости выбирается в первую очередь соответствовать существующей практике в японском контексте в Японии а затем в других контекстах Восточной Азии в их соответствующих средах. Для персонажей, которые обычно не используются в таких средах, учтено сходство с существующими персонажами. Часто используемые символы латиницы и других шрифтов которые появляются в Японии и других странах Восточной Азии, также принимаются во внимание, но с более низким приоритетом.
Область действия свойства ограничена областью Unicode. Например, Unicode напрямую не поддерживает представление текстов и надписей на египетском Иероглифы. Вместо этого Unicode предоставляет символы, предназначенные для использования при написании около таких текстов или надписей, либо для использования в сочетании с системой разметки, такой как Manuel de Codage . Хотя значения свойств определены для египетских иероглифов, они имеют значение только для появления этих символов в дискурсивные тексты; когда символы используются с разметкой, разметка в конечном итоге контролирует ориентацию.См. [Unicode], раздел 11.4. для более полного обсуждения объема символов египетских иероглифов.
Свойство, определенное в этом отчете: информативный. Цель этого отчета — предоставить, при отсутствии другой информации, разумный способ определить правильный ориентация персонажей, но это поведение может быть отменено протоколом более высокого уровня, например, через разметку или предпочтениями макетного приложения.Это определение по умолчанию определено в сопроводительном файле данных. [Data50], но никоим образом не подразумевает, что персонаж используется только в этой ориентации.
Для получения дополнительной информации о последствиях соответствия см. [Unicode], раздел 3.5, Свойства, в в частности определение (D35) информативного свойства.
3.1 Значения свойств
Возможные значения свойств приведены в таблице 1.
Таблица 1. Значения свойств
U | Символы, которые отображаются вертикально, с одинаковой ориентацией что появляется в таблицах кода. |
R | Символы, которые отображаются боком, повернуты 90 градусов по часовой стрелке по сравнению с кодом графики. |
Ту | Персонажи, которые стоят не просто вертикально или боком, а в общем требуется другой глиф, чем в диаграммах кода, когда используется в вертикальных текстах. Кроме того, в качестве запасного варианта символ может отображаться с глифом кодовой таблицы в вертикальном положении. |
Тр | То же, что и Ту, за исключением того, как запасной вариант, символ может отображаться с глифом кодовой таблицы повернут на 90 градусов по часовой стрелке. |
Обратите внимание, что ориентация описывается относительно появление в таблицах кода.
3.2 Кластеры графем
Как и во всех вопросах типографики, интересная единица текст — это не символ, а кластер графемы: он не имеет смысл использовать базовый символ в вертикальном положении и комбинированный знак прикреплен к нему сбоку. Реализации должны применять ориентацию к каждому кластеру графема.
Возможный выбор понятия графемного кластера: либо унаследованного кластера графема, либо у расширенного кластер графема, как определено в [UAX29].
Тогда ориентация кластера графема в целом будет определяется ориентацией первого символа в кластер, за следующим исключением:
Если кластер содержит объединяющий знак объединения (общая категория Me), то весь кластер имеет значение Vertical_Orientation U.
3.3 вертикальных символа в кодовых таблицах
Диаграммы кода Unicode обычно показывают символы в ориентации они берут при использовании в горизонтальных линиях. Однако до Unicode 7.0 было несколько исключений, в основном для персонажей или сценариев, которые обычно написано вертикальными линиями; в этих случаях диаграммы кода, используемые для отображения символы в той же ориентации, что и в вертикальных линиях. Кроме того, такие персонажи часто поворачивается при отображении горизонтальными линиями; На рисунке 3 показан пример монгольского текста по горизонтали. строки, в которых монгольские символы повернуты На 90 градусов против часовой стрелки относительно кодовых диаграмм до Unicode 7.0.
Рис. 3. Монгольский текст на горизонтальных линиях
Таблицы кода Unicode 7.0 изменили ориентацию символов для монгольского и Phags-pa вращением против часовой стрелки так, чтобы они соответствовали ориентации в горизонтальных линиях. Это изменение делает диаграммы кода более согласованными с другими скриптами. с точки зрения ориентации персонажей.Он также выравнивает таблицы кода с многие новейшие системы рендеринга, такие как OpenType, и поэтому ожидается, что это упростит реализацию свойства. Однако реализация должна знать, что базовые системы рендеринга могут не иметь точно такая же ориентация символов, как и в кодовых таблицах.
Хотя это свойство определяет только ориентацию по умолчанию по сравнению с диаграммами кода, высокоуровневые протоколы или приложения могут сочетаться информация, представленная в таблицах шрифтов со значениями свойств, чтобы более надежно вычислить, в какой ориентации они должны отображать такие глифы, для достижения желаемого визуального результата.
В таблице 2 представлены репрезентативные глифы для горизонтального и вертикального внешнего вида символы со значениями свойства Vertical_Orientation Tu и Tr.
Вертикальные глифы, показанные в таблице, являются примерными, и их наличие не означает, что реализации шрифтов обязательно должны поддерживать их. Разработчики шрифтов должны вместо этого исследовать соглашения о вертикальных глифах для предполагаемых регионы чтобы определить, нужен ли вертикальный глиф для определенного символа, и каким должен быть соответствующий вертикальный глиф.
Горизонтальный столбец также может указывать более одного глифа, если региональный или другой различия существуют. Разработчики шрифтов должны придерживаться региональных соглашений при определении внешнего вида. горизонтальных глифов.
Таблица 2. Изменения символов для вертикальной ориентации
Начиная с версии 10.0.0 стандарта Unicode, файл данных со списком присвоений значений свойствам Vertical_Orientation [Data50] официально включен в базу данных символов Unicode. [UCD].В редакциях 17 и ранее данной спецификации файл данных предоставлялся в каталогах с поддержкой версий по следующему стабильному URL-адресу:
http://www.unicode.org/Public/vertical/
Спасибо первоначальному редактору Эрику Мюллеру, последующему соредактору Лаурениу Янку, которая привела к изменению статуса спецификации и включению ее данных в UCD для версии 10.0, а также рецензентам: Джули Аллен, Ван Андерсон, Джон Коуэн, Джон Даггетт, Марк Дэвис, Мартин Дюрст, Элика Дж.Этемад, Майкл Эверсон, Асмус Фрейтаг, Соджи Икеда, Норикадзу Ишизу, Нозому Като, Ясуо Кида, Нат Маккалли, Шинью Мураками, Эддисон Филлипс, Рузбех Пурнадер, Дуэйн Робинсон, Киоко Сато, Хироши Такенака, Бобби Тунг, Филипп Верди, Кен Уистлер, Таро Ямамото, рабочая группа W3C CSS, группа интересов W3C I18N, и Рабочая группа W3C по интернационализации.
Ссылки на это приложение см. В приложении № 41 к стандарту Unicode, «Общие ссылки на стандартные приложения Unicode».
Ниже приводится сводка изменений по сравнению с предыдущей опубликованной версией этого приложения.
Редакция 22- Переиздан для Unicode 12.0.0.
- В файл данных внесены изменения для вновь назначенных символов и блоков в Unicode 12.0, со следующими символами, которым присвоено значение свойства vo = U:
- U + 13430..U + 1343F, U + 1B130..U + 1B16F, U + 1FA70..U + 1FAFF.
Предыдущие версии доступны по ссылке «Предыдущая версия» в заголовке.
© 2019 Unicode, Inc. Все права защищены. В Консорциум Unicode не дает никаких явных или подразумеваемых гарантий в отношении каких-либо добрый, и не несет ответственности за ошибки или упущения.Никакой ответственности предполагается за случайные и косвенные убытки в связи с с использованием информации или программ или в результате их использования содержится или сопровождает этот технический отчет. Условия использования Unicode подать заявление.
Unicode и логотип Unicode являются товарными знаками Unicode, Inc.