writing-mode в CSS


Содержание

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

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

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

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

Синтаксис ?

Обозначения

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

Значения

Пример

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

Примечание

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

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

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

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

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

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

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

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

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

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

Браузеры

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

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

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

writing-mode

Easily manage projects with monday.com

The writing-mode property changes the alignment of the text so that it can be read from top to bottom or from left to right, depending on the language. For example, let’s say we want to add some text that is read from top to bottom and from right to left, like this:

This is most useful in languages such as Chinese, Japanese or Korean where the text is often set vertically. In the English language, it’s more likely that you’ll want to use this property for aesthetics reasons, such as aligning a heading in a block of text like this:

See the Pen YWBWGA by CSS-Tricks (@css-tricks) on CodePen.

Values

In the examples below I’ve made the first letter of the text red, just so it’s easier to see which direction you need to start reading.

horizontal-tb

This is the default value of the property: text is read from left to right and top to bottom.

vertical-rl

Text is read from right to left and top to bottom:

vertical-lr

Text is read from left to right and top to bottom:

Browser support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Writing-mode в CSS

Переводчик:
Дата: 12.01.2020
Комментарии: 0

Автор исходного материала: Ахмад Шадид ( Ahmad Shadeed )
Все права принадлежат автору.

Недавно, изучая CSS какого-то сайта в консоли оперы я наткнулся на свойство, о котором раньше не слышал: writing-mode. Как выяснилось после недолгих поисков, оно предназначено для отображения языков со способом письма слева направо и сверху вниз (например, арабский, традиционный японский). Интересно, однако, что используя его для английского или русского текста можно легко получить вертикальный текст и на них.

«Свойство “writing-mode” определяет расположение линий текста по горизонтали или вертикали и направление блоков. Из MDN»

Направление текста по умолчанию

Браузеры, поддерживающие writing-mode по умолчанию определяют его в “horizontal-tb”, т.е. горизонтальное расположение линий текста и письмо справа налево.

Пример 1 Предположим, что нам нужно реализовать дизайн, показанный на картинке:

Здесь несколько блоков содержимого и заголовок, повернутый на 90° по часовой стрелке от стандартного расположения. Если не применять CSS writing-mode, то нам понадобится:

1. Создать позиционирующий контекст для общего контейнера используя position:relative.
2. Позиционировать заголовок с помощью position:absolute
3. Применить transform-origin определяя точку для поворота. В нашем случае это transform-origin: left top.
4. Повернуть заголовок использовав transform: rotate(90deg).
5. Ну и наконец добавить отступ внутри контейнера, чтобы основной контент не располагался прямо поверх заголовка.

Многовато работы для такой простой задачи, не правда ли? С использованием writing-mode решение становится немного короче:

Посмотреть на результат можно здесь: http://codepen.io/shadeed/pen/rLKgLr
Как видно, не надо ничего позиционировать и добавлять отступы.

В данном случае нас интересует виджет для шаринга, расположенный вертикально слева от основного текста. Это легко можно сделать и без writing-mode, однако интересен тот факт, что используя writing-mode мы можем выровнять виджет по вертикали простым свойством text-align.
Например:

Получим выравнивание по концу родительского элемента.

И получим вертикально выравнивание по центру, которое не раз доставляло хлопоты множеству людей. Посмотреть пример можно здесь: http://codepen.io/shadeed/pen/wWXbwb

Полная поддержка 84.65% — это очень много. В настоящее время writing-mode можно использовать во всех современных браузерах.

writing-mode

The writing-mode property allows us to determine the direction in which content flows on the web page.

The CSS Writing Modes Level 3 specification is a comprehensive specification which addresses the various requirements for catering to international writing systems. The writing-mode property applies to use-cases related to vertical writing systems. East Asian languages, like Chinese and Japanese, can be written horizontally, flowing from top-to-bottom as well as vertically, flowing from right-to-left. Mongolian is written vertically, flowing from left-to-right.

Writing Modes introduce some concepts with regards to content flow that are addressed by several CSS properties. The block flow direction refers to the direction in which block-level boxes are stacked and the direction in which they flow within the block container. The writing-mode property affects this behavior.

The inline base direction determines the direction of content flow on a line of text, where the line starts and where it ends. Although there are CSS properties that can affect this behavior, HTML already possesses markup features to control bi-directionality, e.g. the dir attribute. We should use those instead of CSS styling to ensure layout remains correct in the absence of style sheets.

The text-orientation property controls the orientation of individual characters and is covered in its own entry. Every Unicode character has an implicit bidirectional type and the Unicode bidirectional algorithm defines how directionality is determined for bidirectional Unicode text.

Official Syntax

  • Syntax:
  • Initial: horizontal-tb
  • Applies To: All elements except table row groups, table column groups, table rows, table columns, ruby base container, ruby annotation container
  • Animatable: No
  • Values

    Ultimately it is the magic of shadows. Were the shadows to be banished from its corners, the alcove would in that instant revert to mere void.

    A phosphorescent jewel gives off its glow and color in the dark and loses its beauty in the light of day. Were it not for shadows, there would be no beauty

    block flow direction

    inline base direction

    Latin-based writing mode vertical-rl Text is rendered from top-to-bottom, with a right-to-left block flow direction. Both the writing-mode and typographic-mode are vertical.

    Han-based writing mode vertical-lr Text is rendered from top-to-bottom, with a left-to-right block flow direction. Both the writing-mode and typographic-mode are vertical.

    Mongolian-based writing mode sideways-rl Text is rendered from top-to-bottom, with a right-to-left block flow direction. The writing-mode is vertical but the typographic-mode is horizontal, with the glyphs set sideways on their right side.
    *Experimental value, may be differed to CSS Writing Modes Level 4

    Ultimately it is the magic of shadows. Were the shadows to be banished from its corners, the alcove would in that instant revert to mere void.

    A phosphorescent jewel gives off its glow and color in the dark and loses its beauty in the light of day. Were it not for shadows, there would be no beauty

    block flow direction

    inline base direction

    sideways-lr Text is rendered from top-to-bottom, with a left-to-right block flow direction. The writing-mode is vertical but the typographic-mode is horizontal, with the glyphs set sideways on their left side.
    *Experimental value, may be differed to CSS Writing Modes Level 4

    be no beauty. for shadows, there would light of day. Were it not loses its beauty in the color in the dark and gives off its glow and A phosphorescent jewel

    void. instant revert to mere alcove would in that from its corners, the shadows to be banished of shadows. Were the Ultimately it is the magic

    block flow direction

    inline base direction

    Mongolian-based writing mode

    Examples

    The following examples illustrate how the writing-mode property affects the layout of different scripts.

    Live Demo

    Although vertical text is most commonly seen and used on sites in East Asian languages, the design aspect of using vertical text can be applied to Latin-based writing systems as well. The following is an example of a responsive navigation bar that uses a vertical text layout on narrow screens. Resize the preview panel when opening this demo to see the navigation changing:

    The next example shows how a blog category can be displayed as a vertical label on the right of the post on wide screen layouts. The label is not necessarily critical information, but it is useful to have, so placing it on the right of the page, laid out vertically, allows the reader’s attention to be focused on the header and text of the article.

    Browser Support

    CSS writing-mode property

    Property to define whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

    Can I use CSS writing-mode property?

    Compatibility table for support of CSS writing-mode property in desktop and mobile browsers.

    Legend

    • Green = Supported
    • Red = Not supported
    • Greenish yellow = Partial support
    • Gray = Support unknown

    CSS writing-mode property

    Global usage

    Property to define whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.


    1. 5.5
    2. 6
    3. 7
    4. 8
    5. 9
    6. 10
    7. 11
    1. 12
    2. 13
    3. 14
    4. 15
    5. 16
    6. 17
    7. 18
    8. 76

    Firefox

    1. 2
    2. 3
    3. 3.5
    4. 3.6
    5. 4
    6. 5
    7. 6
    8. 7
    9. 8
    10. 9
    11. 10
    12. 11
    13. 12
    14. 13
    15. 14
    16. 15
    17. 16
    18. 17
    19. 18
    20. 19
    21. 20
    22. 21
    23. 22
    24. 23
    25. 24
    26. 25
    27. 26
    28. 27
    29. 28
    30. 29
    31. 30
    32. 31
    33. 32
    34. 33
    35. 34
    36. 35
    37. 36
    38. 37
    39. 38
    40. 39
    41. 40
    42. 41
    43. 42
    44. 43
    45. 44
    46. 45
    47. 46
    48. 47
    49. 48
    50. 49
    51. 50
    52. 51
    53. 52
    54. 53
    55. 54
    56. 55
    57. 56
    58. 57
    59. 58
    60. 59
    61. 60
    62. 61
    63. 62
    64. 63
    65. 64
    66. 65
    67. 66
    68. 67
    69. 68
    70. 69
    71. 70
    72. 71
    73. 72

    Chrome

    1. 4
    2. 5
    3. 6
    4. 7
    5. 8
    6. 9
    7. 10
    8. 11
    9. 12
    10. 13
    11. 14
    12. 15
    13. 16
    14. 17
    15. 18
    16. 19
    17. 20
    18. 21

    19. 22
    20. 23
    21. 24
    22. 25
    23. 26
    24. 27
    25. 28
    26. 29
    27. 30
    28. 31
    29. 32
    30. 33
    31. 34
    32. 35
    33. 36
    34. 37
    35. 38
    36. 39
    37. 40
    38. 41
    39. 42
    40. 43
    41. 44
    42. 45
    43. 46
    44. 47
    45. 48
    46. 49
    47. 50
    48. 51
    49. 52
    50. 53
    51. 54
    52. 55
    53. 56
    54. 57
    55. 58
    56. 59
    57. 60
    58. 61
    59. 62
    60. 63
    61. 64
    62. 65
    63. 66
    64. 67
    65. 68
    66. 69
    67. 70
    68. 71
    69. 72
    70. 73
    71. 74
    72. 75
    73. 76
    74. 77
    75. 78
    76. 79
    77. 80
    78. 81

    Safari

    1. 3.1
    2. 3.2
    3. 4
    4. 5
    5. 5.1
    6. 6
    7. 6.1
    8. 7
    9. 7.1
    10. 8
    11. 9
    12. 9.1
    13. 10
    14. 10.1
    15. 11
    16. 11.1
    17. 12
    18. 12.1
    19. 13
    20. TP

    Opera

    1. 9
    2. 9.5-9.6
    3. 10.0-10.1
    4. 10.5
    5. 10.6
    6. 11
    7. 11.1
    8. 11.5
    9. 11.6
    10. 12
    11. 12.1
    12. 15
    13. 16
    14. 17
    15. 18
    16. 19
    17. 20
    18. 21
    19. 22
    20. 23
    21. 24
    22. 25
    23. 26
    24. 27
    25. 28
    26. 29
    27. 30
    28. 31
    29. 32

    30. 33
    31. 34
    32. 35
    33. 36
    34. 37
    35. 38
    36. 39
    37. 40
    38. 41
    39. 42
    40. 43
    41. 44
    42. 45
    43. 46
    44. 47
    45. 48
    46. 49
    47. 50
    48. 51
    49. 52
    50. 53
    51. 54
    52. 55
    53. 56
    54. 57
    55. 58
    56. 60
    57. 62
    58. 63
    59. 64

    iOS Safari

    1. 3.2
    2. 4.0-4.1
    3. 4.2-4.3
    4. 5.0-5.1
    5. 6.0-6.1
    6. 7.0-7.1
    7. 8
    8. 8.1-8.4
    9. 9.0-9.2
    10. 9.3
    11. 10.0-10.2
    12. 10.3
    13. 11.0-11.2
    14. 11.3-11.4
    15. 12.0-12.1
    16. 12.2-12.4
    17. 13.0-13.2

    Opera Mini

    Android Browser

    1. 2.1
    2. 2.2
    3. 2.3
    4. 3
    5. 4
    6. 4.1
    7. 4.2-4.3
    8. 4.4
    9. 4.4.3-4.4.4
    10. 76

    Blackberry Browser

    Opera Mobile

    1. 10
    2. 11
    3. 11.1
    4. 11.5
    5. 12
    6. 12.1
    7. 46

    Chrome for Android

    Firefox for Android

    IE Mobile

    UC Browser for Android

    Samsung Internet

    1. 4
    2. 5.0-5.4
    3. 6.2-6.4
    4. 7.2-7.4
    5. 8.2
    6. 9.2
    7. 10.1

    QQ Browser

    Baidu Browser

    KaiOS Browser

    Browser support tables for modern web technologies

    Created & maintained by @Fyrd, design by @Lensco.

    Support data contributions by the GitHub community.

    Usage share statistics by StatCounter GlobalStats for October, 2020

    CSS Writing Modes

    Since you may not have a lot of time, I’m going to start at the end, with the dessert.

    You can use a little-known, yet important and powerful CSS property to make text run vertically. Like this.

    Or instead of running text vertically, you can layout a set of icons or interface buttons in this way. Or, of course, with anything on your page.

    The CSS I’ve applied makes the browser rethink the orientation of the world, and flow the layout of this element at a 90° angle to “normal”. Check out the live demo, highlight the headline, and see how the cursor is now sideways.

    The code for accomplishing this is pretty simple.

    That’s all it takes to switch the writing mode from the web’s default horizontal top-to-bottom mode to a vertical right-to-left mode. If you apply such code to the html element, the entire page is switched, affecting the scroll direction, too.

    In my example above, I’m telling the browser that only the h1 will be in this vertical-rl mode, while the rest of my page stays in the default of horizontal-tb .

    So now the dessert course is over. Let me serve up this whole meal, and explain the the CSS Writing Mode Specification.

    Why learn about writing modes?

    There are three reasons I’m teaching writing modes to everyone—including western audiences—and explaining the whole system, instead of quickly showing you a simple trick.

    We live in a big, diverse world, and learning about other languages is fascinating. Many of you lay out pages in languages like Chinese, Japanese and Korean. Or you might be inspired to in the future.

    Using writing-mode to turn bits sideways is cool. This CSS can be used in all kinds of creative ways, even if you are working only in English.

  • Most importantly, I’ve found understanding Writing Modes incredibly helpful when understanding Flexbox and CSS Grid. Before I learned Writing Mode, I felt like there was still a big hole in my knowledge, something I just didn’t get about why Grid and Flexbox work the way they do. Once I wrapped my head around Writing Modes, Grid and Flexbox got a lot easier. Suddenly the Alignment properties, align-* and justify-* , made sense.

  • Whether you know about it or not, the writing mode is the first building block of every layout we create. You can do what we’ve been doing for 25 years – and leave your page set to the default left-to-right direction, horizontal top-to-bottom writing mode. Or you can enter a world of new possibilities where content flows in other directions.

    CSS properties

    I’m going to focus on the CSS writing-mode property in this article. It has five possible options:

    The CSS Writing Modes Specification is designed to support a wide range of written languages in all our human and linguistic complexity. Which—spoiler alert—is pretty insanely complex. The global evolution of written languages has been anything but simple.

    So I’ve got to start with explaining some basic concepts of web page layout and writing systems. Then I can show you what these CSS properties do.

    Inline Direction, Block Direction, and Character Direction

    In the world of the web, there’s a concept of ‘block’ and ‘inline’ layout. If you’ve ever written display: block or display: inline , you’ve leaned on these concepts.

    In the default writing mode, blocks stack vertically starting at the top of the page and working their way down. Think of how a bunch of block-levels elements stack—like a bunch of a paragraphs—that’s the block direction.

    Inline is how each line of text flows. The default on the web is from left to right, in horizontal lines. Imagine this text that you are reading right now, being typed out one character at a time on a typewriter. That’s the inline direction.

    The character direction is which way the characters point. If you type a capital “A” for instance, on which side is the top of the letter? Different languages can point in different directions. Most languages have their characters pointing towards the top of the page, but not all.

    Put all three together, and you start to see how they work as a system.

    The default settings for the web work like this.

    Now that we know what block, inline, and character directions mean, let’s see how they are used in different writing systems from around the world.

    The four writing systems of CSS Writing Modes

    The CSS Writing Modes Specification handles all the use cases for four major writing systems; Latin, Arabic, Han and Mongolian.

    Latin-based systems

    One writing system dominates the world more than any other, reportedly covering about 70% of the world’s population.

    The text is horizontal, running from left to right, or LTR. The block direction runs from top to bottom.

    It’s called the Latin-based system because it includes all languages that use the Latin alphabet, including English, Spanish, German, French, and many others. But there are many non-Latin-alphabet languages that also use this system, including Greek, Cyrillic (Russian, Ukrainian, Bulgarian, Serbian, etc.), and Brahmic scripts (Devanagari, Thai, Tibetan), and many more.

    You don’t need to do anything in your CSS to trigger this mode. This is the default.

    Best practices, however, dictate that you declare in your opening element which language and which direction (LTR or RTL) you are using. This website, for instance, uses to let the browser know this content is published in Great Britian’s version of English, in a left to right direction.

    Arabic-based systems

    Arabic, Hebrew and a few other languages run the inline direction from right to left. This is commonly known as RTL.

    Note that the inline direction still runs horizontally. The block direction runs from top to bottom. And the characters are upright.

    It’s not just the flow of text that runs from right to left, but everything about the layout of the website. The upper right-hand corner is the starting position. Important things are on the right. The eyes travel from right to left. So, typically RTL websites use layouts that are just like LTR websites, only flipped.

    On websites that support both LTR and RTL, like the United Nations’ site at un.org, the two layouts are mirror images of each other.

    For many web developers, our experiences with internationalization have focused solely on supporting Arabic and Hebrew script.

    CSS layout hacks for internationalization & RTL

    To prepare an LTR project to support RTL, developers have had to create all sorts of hacks. For example, the Drupal community started a convention of marking every margin-left and -right , every padding-left and -right , every float: left and float: right with the comment /* LTR */ . Then later developers could search for each instance of that exact comment, and create stylesheets to override each left with right , and vice versa. It’s a tedious and error prone way to work. CSS itself needed a better way to let web developers write their layout code once, and easily switch language directions with a single command.

    Our new CSS layout system does exactly that. Flexbox, Grid and Alignment use start and end instead of left and right . This lets us define everything in relationship to the writing system, and switch directions easily. By writing justify-content: flex-start , justify-items: end , and eventually margin-inline-start: 1rem we have code that doesn’t need to be changed.

    This is a much better way to work. I know it can be confusing to think through start and end as replacements for left and right. But it’s better for any multiligual project, and it’s better for the web as a whole.

    Sadly, I’ve seen CSS preprocessor tools that claim to “fix” the new CSS layout system by getting rid of start and end and bringing back left and right. They want you to use their tool, write justify-content: left , and feel self-righteous. It seems some folks think the new way of working is broken and should be discarded. It was created, however, to fulfill real needs. And to reflect a global internet. As Bruce Lawson says, WWW stands for the World Wide Web, not the Wealthy Western Web. Please don’t try to convince the industry that there’s something wrong with no longer being biased towards western culture. Instead, spread the word about why this new system is here.

    Spend a bit of time drilling the concept of inline and block into your head, and getting used to start and end . It will be second nature soon enough.

    I’ve also seen CSS preprocessors that let us use this new way of thinking today, even as all the parts aren’t fully supported by browsers yet. Some tools let you write text-align: start instead of text-align: left , and let the preprocessor handle things for you. That is terrific, in my opinion. A great use of the power of a preprocessor to help us switch over now.

    But let’s get back to RTL.

    How to declare your direction

    You don’t want to use CSS to tell the browser to switch from an LTR language to RTL. You want to do this in your HTML. That way the browser has the information it needs to display the document even if the CSS doesn’t load.

    This is accomplished mainly on the html element. You should also declare your main language. As I mentioned above, the 24 ways website is using to declare the LTR direction and the use of British English. The UN Arabic website uses to declare the site as an Arabic site, using a RTL layout.

    Things get more complicated when you’ve got a page with a mix of languages. But I’m not going to get into all of that, since this article is focused on CSS and layouts, not explaining everything about internationalization.

    Let me just leave direction here by noting that much of the heavy work of laying out the characters which make up each word is handled by Unicode. If you are interested in learning more about LTR, RTL and bidirectional text, watch this video: Introduction to Bidirectional Text, a presentation by Elika Etemad.

    Meanwhile, let’s get back to CSS.

    The writing mode CSS for Latin-based and Arabic-based systems

    For both of these systems—Latin-based and Arabic-based, whether LTR or RTL—the same CSS property applies for specifying the writing mode: writing-mode: horizontal-tb . That’s because in both systems, the inline text flow is horizontal, while the block direction is top-to-bottom. This is expressed as horizontal-tb .

    horizontal-tb is the default writing mode for the web, so you don’t need to specify it unless you are overriding something else higher up in the cascade. You can just imagine that every site you’ve ever built came with:

    Now let’s turn our attention to the vertical writing systems.

    Han-based systems

    This is where things start to get interesting.

    Han-based writing systems include CJK languages, Chinese, Japanese, Korean and others. There are two options for laying out a page, and sometimes both are used at the same time.

    Much of CJK text is laid out like Latin-based languages, with a horizontal top-to-bottom block direction, and a left-to-right inline direction. This is the more modern way to doing things, started in the 20th century in many places, and further pushed into domination by the computer and later the web.

    The CSS to do this bit of the layouts is the same as above:

    Or, you know, do nothing, and get that result as a default.

    Alternatively Han-based languages can be laid out in a vertical writing mode, where the inline direction runs vertically, and the block direction goes from right to left.

    See both options in this diagram:

    Note that the horizontal text flows from left to right, while the vertical text flows from right to left. Wild, eh?

    This Japanese issue of Vogue magazine is using a mix of writing modes. The cover opens on the left spine, opposite of what an English magazine does.

    This page mixes English and Japanese, and typesets the Japanese text in both horizontal and vertical modes. Under the title “Richard Stark” in red, you can see a passage that’s horizontal-tb and LTR, while the longer passage of text at the bottom of the page is typeset vertical-rl . The red enlarged cap marks the beginning of that passage. The long headline above the vertical text is typeset LTR, horizontal-tb .

    The details of how to set the default of the whole page will depend on your use case. But each element, each headline, each section , each article can be marked to flow the opposite of the default however you’d like.

    For example, perhaps you leave the default as horizontal-tb , and specify your vertical elements like this:

    Or alternatively you could change the default for the page to a vertical orientation, and then set specific elements to horizontal-tb , like this:

    If your page has a sideways scroll, then the writing mode will determine whether the page loads with upper left corner as the starting point, and scroll to the right ( horizontal-tb as we are used to), or if the page loads with the upper right corner as the starting point, scrolling to the left to display overflow. Here’s an example of that change in scrolling direction, in a CSS Writing Mode demo by Chen Hui Jing. Check out her demo — you can switch from horizontal to vertical writing modes with a checkbox and see the difference.

    Mongolian-based systems

    Now, hopefully so far all of this kind of makes sense. It might be a bit more complicated than expected, but it’s not so hard. Well, enter the Mongolian-based systems.

    Mongolian is also a vertical script language. Text runs vertically down the page. Just like Han-based systems. There are two major differences. First, the block direction runs the other way. In Mongolian, block-level elements stack from left to right.

    Here’s a drawing of how Wikipedia would look in Mongolian if it were laid out correctly.

    Perhaps the Mongolian version of Wikipedia will be redone with this layout.

    Now you might think, that doesn’t look so weird. Tilt your head to the left, and it’s very familiar. The block direction starts on the left side of the screen and goes to the right. The inline direction starts on the top of the page and moves to the bottom (similar to RTL text, just turned 90° counter-clockwise). But here comes the other huge difference. The character direction is “upside down”. The top of the Mongolian characters are not pointing to the left, towards the start edge of the block direction. They point to the right. Like this:

    Now you might be tempted to ignore all this. Perhaps you don’t expect to be typesetting Mongolian content anytime soon. But here’s why this is important for everyone — the way Mongolian works defines the results writing-mode: vertical-lr . And it means we cannot use vertical-lr for typesetting content in other languages in the way we might otherwise expect.

    If we took what we know about vertical-rl and guessed how vertical-lr works, we might imagine this:

    But that’s wrong. Here’s how they actually compare:

    See the unexpected situation? In both writing-mode: vertical-rl and writing-mode: vertical-lr latin text is rotated clockwise. Neither writing mode let’s us rotate text counter-clockwise.

    If you are typesetting Mongolian content, apply this CSS in the same way you would apply writing-mode to Han-based writing systems. To the whole page on the html element, or to specific pages of the page like this:

    Now, if you are using writing-mode for a graphic design effect on a language that is otherwise typesets horizontally, I don’t think writing-mode: vertical-lr is useful. If the text wraps onto two lines, it stacks in a very unexpected way. So I’ve sort of obliterated it from my toolkit. I find myself using writing-mode: vertical-rl a lot. And never using -lr . Hm.

    Writing modes for graphic design

    So how do we use writing-mode to turn English headlines sideways? We could rely on transform: rotate()

    Here are two examples, one for each direction. (By the way, each of these demos use CSS Grid for their overall layout, so be sure to test them in a browser that supports CSS Grid, like Firefox Nightly.)

    In this demo 4A, the text is rotated clockwise using this code:

    In this demo 4B, the text is rotated counter-clockwise using this code:

    I use vertical-rl to rotate the text so that it takes up the proper amount of space in the overall flow of the layout. Then I rotate it 180° to spin it around to the other direction. And then I use text-align: right to get it to rise up to the top of it’s container. This feels like a hack, but it’s a hack that works.

    Now what I would like to do instead is use another CSS value that was designed for this use case — one of the two other options for writing mode.

    If I could, I would lay out example 4A with:

    And layout example 4B with:

    The problem is that these two values are only supported in Firefox. None of the other browsers recognize sideways-* . Which means we can’t really use it yet.

    In general, the writing-mode property is very well supported across browsers. So I’ll use writing-mode: vertical-rl for now, with the transform: rotate(180deg); hack to fake the other direction.

    There’s much more to what we can do with the CSS designed to support multiple languages, but I’m going to stop with this intermediate introduction.

    If you do want a bit more of a taste, look at this example that adds text-orientation: upright; to the mix — turning the individual letters of the latin font to be upright instead of sideways.

    It’s this demo 4C, with this CSS applied:

    You can check out all my Writing Modes demos at labs.jensimmons.com/#writing-modes.

    I’ll leave you with this last demo. One that applies a vertical writing mode to the sub headlines of a long article. I like how small details like this can really bring a fresh feeling to the content.

    About the author

    Dubbed “the Terry Gross of the tech industry,” Jen Simmons is the host and executive producer of The Web Ahead. Her in-depth interviews explain emerging technology and predict the future of the web — and won the 2015 Net Award for Podcast of the Year.

    Jen is a Designer and Developer Advocate at Mozilla, where she advocates for web standards and researches the coming revolution in graphic design on the web. She’s spoken at events including SXSW, An Event Apart, Fluent, Generate, Future of Web Design, and Respond. Her talk, Modern Layouts: Getting Out of Our Ruts, was awarded Best Conference Presentation at CSS Dev Conf 2014.

    Jen launched her first client website in 1998 and spent years making sites for small businesses, arts organizations, and creative individuals. Her more well-known clients include CERN, the W3C, Google, Drupal, Temple University, and the Annenberg Foundation. Jen earned a MFA in Film and Media Arts from Temple University. She lives in New York City.

    Brought to you by

    The easiest way to publish fast, flexible HTML5 websites your clients will love.

    CSS Writing Modes Level 3

    W3C Proposed Recommendation, 24 October 2020

    Abstract

    CSS Writing Modes Level 3 defines CSS support for various writing modes and their combinations, including left-to-right and right-to-left text ordering as well as horizontal and vertical orientations.

    CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc.

    Status of this document

    This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at https://www.w3.org/TR/.

    This document was produced by the CSS Working Group as a Proposed Recommendation.

    This document is intended to become a W3C Recommendation. This document will remain a Proposed Recommendation at least until 22 November 2020 in order to ensure the opportunity for review from the W3C Membership and other interested parties.

    GitHub Issues are preferred for discussion of this specification. When filing an issue, please put the text “css-writing-modes” in the title, preferably like this: “[css-writing-modes] …summary of comment…”. All issues and comments are archived, and there is also a historical archive. Advisory Committee Representatives should consult their WBS questionnaires.

    Publication as a Proposed Recommendation does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

    This document was produced by a group operating under the W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

    This document is governed by the 1 March 2020 W3C Process Document.

    For changes since the last draft, see the Changes section.

    1. Introduction to Writing Modes

    CSS Writing Modes Level 3 defines CSS features to support for various international writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and vertical (e.g. Asian scripts).

    A in CSS is determined by the writing-mode, direction, and text-orientation properties. It is defined primarily in terms of its inline base direction and block flow direction:

    Latin-based writing mode

    Mongolian-based writing mode

    Han-based writing mode

    The is the primary direction in which content is ordered on a line and defines on which sides the “start” and “end” of a line are. The direction property specifies the inline base direction of a box and, together with the unicode-bidi property and the inherent directionality of any text content, determines the ordering of inline-level content within a line.


    The is the direction in which block-level boxes stack and the direction in which line boxes stack within a block container. The writing-mode property determines the block flow direction.

    The determines if text should apply typographic conventions specific to vertical flow for vertical scripts. This concept distinguishes vertical flow for vertical scripts from rotated horizontal flow.

    A is one with horizontal lines of text, i.e. a downward or upward block flow. A is one with vertical lines of text, i.e. a leftward or rightward block flow.

    These terms should not be confused with (which is a downward or upward block flow) and (which is leftward or rightward block flow). To avoid confusion, CSS specifications avoid this latter set of terms.

    Writing systems typically have one or two native writing modes. Some examples are:

    • Latin-based systems are typically written using a left-to-right inline direction with a downward (top-to-bottom) block flow direction.
    • Arabic-based systems are typically written using a right-to-left inline direction with a downward (top-to-bottom) block flow direction.
    • Mongolian-based systems are typically written using a top-to-bottom inline direction with a rightward (left-to-right) block flow direction.
    • Han-based systems are commonly written using a left-to-right inline direction with a downward (top-to-bottom) block flow direction, or a top-to-bottom inline direction with a leftward (right-to-left) block flow direction. Many magazines and newspapers will mix these two writing modes on the same page.

    The text-orientation component of the writing mode controls the glyph orientation.

    See Unicode Technical Note #22 [UTN22] (HTML version) for a more in-depth introduction to writing modes and vertical text.

    1.1. Module Interactions

    This module replaces and extends the unicode-bidi and direction features defined in [CSS2] sections 8.6 and 9.10. The interaction of its features with other text operations in setting lines of text is described in CSS Text 3 § Text Processing Order of Operations.

    The computed values of the writing-mode, direction, and text-orientation properties (even on elements to which these properties themselves don’t apply [CSS-CASCADE-4]) are broadly able to influence the computed values of other, unrelated properties through calculations such as the computation of font-relative lengths or the cascade of flow-relative properties which purposefully depend on the computed writing mode or on font metrics that can depend on the writing mode .

    1.2. Value Types and Terminology

    This specification follows the CSS property definition conventions from [CSS2]. Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3]. Other CSS modules may expand the definitions of these value types.

    In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the CSS-wide keywords keywords as their property value. For readability they have not been repeated explicitly.

    Other important terminology and concepts used in this specification are defined in [CSS2] and [CSS-TEXT-3].

    2. Inline Direction and Bidirectionality

    While the characters in most scripts are written from left to right, certain scripts are written from right to left. In some documents, in particular those written with the Arabic or Hebrew script, and in some mixed-language contexts, text in a single (visually displayed) block may appear with mixed directionality. This phenomenon is called , or «bidi» for short.

    The Unicode standard (Unicode Standard Annex #9) defines a complex algorithm for determining the proper ordering of bidirectional text. The algorithm consists of an implicit part based on character properties, as well as explicit controls for embeddings and overrides. CSS relies on this algorithm to achieve proper bidirectional rendering.

    The HTML specifications ([HTML401], section 8.2, and [HTML] section 14.3.5) define bidirectionality behavior for HTML elements.

    If a document language provides markup features to control bidi, authors and users should use those features instead and not specify CSS rules to override them.

    2.1. Specifying Directionality: the direction property

    Name:
    Value: ltr | rtl
    Initial: ltr
    Applies to: all elements
    Inherited: yes
    Percentages: n/a
    Computed value: specified value
    Canonical order: n/a
    Animation type: not animatable

    Because HTML UAs can turn off CSS styling, we recommend HTML authors to use the HTML dir attribute and element to ensure correct bidirectional layout in the absence of a style sheet. Authors should not use direction in HTML documents.

    This property specifies the inline base direction or directionality of any bidi paragraph, embedding, isolate, or override established by the box. (See unicode-bidi.) In addition, it informs the ordering of table column layout, the direction of horizontal overflow, and the default alignment of text within a line, and other layout effects that depend on the box’s inline base direction.

    Values for this property have the following meanings:

    This value sets inline base direction (bidi directionality) to line-left-to-line-right. This value sets inline base direction (bidi directionality) to line-right-to-line-left.

    The direction property has no effect on bidi reordering when specified on inline boxes whose unicode-bidi value is normal, because the box does not open an additional level of embedding with respect to the bidirectional algorithm.

    The direction property, when specified for table column boxes, is not inherited by cells in the column since columns are not the ancestors of the cells in the document tree. Thus, CSS cannot easily capture the «dir» attribute inheritance rules described in [HTML401], section 11.3.2.1.

    2.2. Embeddings and Overrides: the unicode-bidi property

    Name:
    Value: normal | embed | isolate | b >| isolate-overr >| plaintext
    Initial: normal
    Applies to: all elements, but see prose
    Inherited: no
    Percentages: n/a
    Computed value: specified value
    Canonical order: per grammar
    Animation type: not animatable

    Because HTML UAs can turn off CSS styling, we recommend HTML authors to use the HTML dir attribute, element, and appropriate distinction of text-level vs. grouping-level HTML element types to ensure correct bidirectional layout in the absence of a style sheet. Authors should not use unicode-bidi in HTML documents.

    The following informative table summarizes the box-internal and box-external effects of unicode-bidi:

    Effect of non-normal values of unicode-bidi on inline boxes

    Outside
    strong neutral
    Inside scoped embed isolate
    override bidi-override isolate-override
    plaintext plaintext

    Values for this property have the following (normative) meanings:

    The box does not open an additional level of embedding with respect to the bidirectional algorithm. For inline boxes, implicit reordering works across box boundaries. If the box is inline, this value creates a by opening an additional level of embedding with respect to the b >This value has no effect on boxes that are not inline.

    On an inline box, this its contents. This is similar to a directional embedding (and increases the embedding level accordingly) except that each sequence of inline-level boxes uninterrupted by any block boundary or forced paragraph break is treated as an :

      the content within the sequence is ordered as if ins >forced paragraph breaks within the box still create a corresponding break in the containing paragraph.

    This value has no effect on boxes that are not inline.

    This value puts the box’s immediate inline content in a . For an inline, this means that the box acts like a directional embedding in the bidirectional algorithm, except that reordering within it is strictly in sequence according to the direction property; the implicit part of the bidirectional algorithm is ignored. For a block container, the override is applied to an anonymous inline box that surrounds all of its content. This combines the isolation behavior of isolate with the directional overr >isolate , but within the box content is ordered as if bidi-override were specified. It effectively nests a directional override inside an isolated sequence.

    This value behaves as isolate except that for the purposes of the Unicode bidirectional algorithm, the base directionality of each of the box’s bidi paragraphs (if a block container) or isolated sequences (if an inline) is determined by following the heuristic in rules P2 and P3 of the Unicode bidirectional algorithm (rather than by using the direction property of the box).

    Following Unicode Bidirectional Algorithm clause HL3 [UAX9], values other than normal effectively insert the corresponding Unicode bidi control codes into the text stream at the start and end of the inline element before passing the paragraph to the Unicode bidirectional algorithm for reordering. (See § 2.4.2 CSS–Unicode Bidi Control Translation, Text Reordering.)

    Bidi control codes injected by unicode-bidi at the start/end of display: inline boxes

    unicode-b >direction value
    ltr rtl
    start end start end
    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)
    * The LRO/RLO+PDF pairs are also applied to the root inline box of a block container if these values of unicode-b >block container .

    Because the unicode-bidi property does not inherit, setting bidi-override or plaintext on a block box will not affect any descendant blocks. Therefore these values are best used on blocks and inlines that do not contain any block-level structures.

    Because the Unicode algorithm has a limit of 125 levels of embedding, care should be taken not to overuse unicode-b >unicode-bidi: isolate is preferred to keep the element together in case the display is changed to inline (see example below).

    2.3. Example of Bidirectional Text

    The following example shows an XML document with bidirectional text. It illustrates an important design principle: document language designers should take bidi into account both in the language proper (elements and attributes) and in any accompanying style sheets. The style sheets should be designed so that bidi rules are separate from other style rules, and such rules should not be overridden by other style sheets so that the document language’s bidi behavior is preserved.

    In this example, lowercase letters stand for inherently left-to-right characters and uppercase letters represent inherently right-to-left characters. The text stream is shown below in logical backing store order.

    Since this is arbitrary XML, the style sheet is responsible for setting the writing direction. This is the style sheet:

    If the line length is long, the formatting of this text might look like this:

    The first element is a block with a right-to-left base direction, the second element is a block with a left-to-right base direction. The

    s are blocks that inherit the base direction from their parents. Thus, the first two

    s are read starting at the top right, the final three are read starting at the top left.

    The element is inline-level, and since its value for unicode-bidi is normal (the initial value), it has no effect on the ordering of the text.

    The element, on the other hand, creates an isolated sequence with the given internal directionality. Note that this causes HEBREW18 to be to the right of english19 .

    If lines have to be broken, the same text might format like this:

    Notice that because HEBREW18 must be read before english19 , it is on the line above english19 . Just breaking the long line from the earlier formatting would not have worked.

    Note also that the first syllable from english19 might have fit on the previous line, but hyphenation of left-to-right words in a right-to-left context, and vice versa, is usually suppressed to avoid having to display a hyphen in the middle of a line.

    2.4. Applying the Bidirectional Reordering Algorithm

    User agents that support bidirectional text must apply the Unicode bidirectional algorithm to every sequence of inline-level boxes uninterrupted by any block boundary or “bidi type B” . This sequence forms the unit in the bidirectional algorithm.

    2.4.1. Bidi Paragraph Embedding Levels

    In CSS, the paragraph embedding level must be set (following UAX9 clause HL1) according to the direction property of the paragraph’s containing block rather than by the heuristic given in steps P2 and P3 of the Unicode algorithm.

    There is, however, one exception: when the computed unicode-bidi of the paragraph’s containing block is plaintext, the Unicode heuristics in P2 and P3 are used as described in [UAX9], without the HL1 override.

    2.4.2. CSS–Unicode Bidi Control Translation, Text Reordering

    The final order of characters within each bidi paragraph is the same as if the bidi control codes had been added as described for unicode-bidi (above), markup had been stripped, and the resulting character sequence had been passed to an implementation of the Unicode bidirectional algorithm for plain text that produced the same line-breaks as the styled text.

    Note that bidi control codes in the source text are still honored, and might not correspond to the document tree structure. This can split inlines or interfere with bidi start/end control pairing in interesting ways.

    2.4.3. Bidi Treatment of Atomic Inlines

    In this process, replaced elements with display: inline are treated as neutral characters, unless their unicode-bidi property is either embed or bidi-override, in which case they are treated as strong characters in the direction specified for the element. (This is so that, in case the replaced element falls back to rendering inlined text content, its bidi effect on the surrounding text is consistent with its replaced rendering.)

    All other atomic inline-level boxes are treated as neutral characters always.

    2.4.4. Paragraph Breaks Within Embeddings and Isolates

    If an inline box is broken around a bidi paragraph boundary (e.g. if split by a block or forced paragraph break), then the HL3 bidi control codes assigned to the end of the box are also added before the interruption and the codes assigned to the start of the box are also added after it. (In other words, any embedding levels, isolates, or overrides started by the box are closed at the paragraph break and reopened on the other side of it.)

    For example, where
    is a forced paragraph break the bidi ordering is identical between

    for all values of unicode-bidi on inline elements and .

    Note that this behavior is applied by CSS for CSS-declared bidi controls applied to the box tree; it does not apply to Unicode’s bidi formatting controls, which are defined to terminate their effect at the end of the bidi paragraph.

    2.4.5. Reordering-induced Box Fragmentation

    Since bidi reordering can split apart and reorder text that is logically contiguous, bidirectional text can cause an inline box containing such text to be split and its fragments reordered within a line.

    For each line box, UAs must take the fragments of each inline box and assign the margins, borders, and padding in visual order (not logical order). The start-most fragment on the first line box in which the box appears has the start edge’s margin, border, and padding; and the end-most fragment on the last line box in which the box appears has the end edge’s margin, border, and padding. For example, in the horizontal-tb writing mode:

    • When the parent’s direction property is ltr, the left-most box fragment on the first line box in which the box appears has the left margin, left border and left padding, and the right-most box fragment on the last line box in which the box appears has the right padding, right border and right margin.
    • When the parent’s direction property is rtl, the right-most fragment of the first line box in which the box appears has the right padding, right border and right margin, and the left-most fragment of the last line box in which the box appears has the left margin, left border and left padding.

    Analogous rules hold for vertical writing modes.

    The box-decoration-break property can override this behavior to draw box decorations on both sides of each fragment. [CSS3-BREAK]

    3. Vertical Writing Modes

    In addition to extensions to CSS2.1’s support for bidirectional text, this module introduces the rules and properties needed to support vertical text layout in CSS.

    3.1. Introduction to Vertical Writing

    This subsection is non-normative.

    Unlike languages that use the Latin script which are primarily laid out horizontally, Asian languages such as Chinese and Japanese can be laid out vertically. The Japanese example below shows the same text laid out horizontally and vertically. In the horizontal case, text is read from left to right, top to bottom. For the vertical case, the text is read top to bottom, right to left. Indentation from the left edge in the left-to-right horizontal case translates to indentation from the top edge in the top-to-bottom vertical case.

    Comparison of vertical and horizontal Japanese: iBunko application (iOS)

    For Chinese and Japanese lines are ordered either right to left or top to bottom, while for Mongolian and Manchu lines are ordered left to right.

    The change from horizontal to vertical writing can affect not just the layout, but also the typesetting. For example, the position of a punctuation mark within its spacing box can change from the horizontal to the vertical case, and in some cases alternate glyphs are used.

    Vertical text that includes Latin script text or text from other scripts normally displayed horizontally can display that text in a number of ways. For example, Latin words can be rotated sideways, or each letter can be oriented upright:

    Examples of Latin in vertical Japanese: Daijirin Viewer 1.4 (iOS)

    In some special cases such as two-digit numbers in dates, text is fit compactly into a single vertical character box:

    Mac Fan, December 2010, p.49

    Layouts often involve a mixture of vertical and horizontal elements:

    Mixture of vertical and horizontal elements

    Vertical text layouts also need to handle bidirectional text layout; clockwise-rotated Arabic, for example, is laid out bottom-to-top.

    3.2. Block Flow Direction: the writing-mode property

    Name:
    Value: horizontal-tb | vertical-rl | vertical-lr
    Initial: horizontal-tb
    Applies to: All elements except table row groups, table column groups, table rows, table columns, ruby base container, ruby annotation container
    Inherited: yes
    Percentages: n/a
    Computed value: specified value
    Canonical order: n/a
    Animation type: not animatable

    This property specifies whether lines of text are laid out horizontally or vertically and the direction in which blocks progress. Possible values:

    Top-to-bottom block flow direction. Both the writing mode and the typographic mode are horizontal. Right-to-left block flow direction. Both the writing mode and the typographic mode are vertical. Left-to-right block flow direction. Both the writing mode and the typographic mode are vertical.

    The writing-mode property specifies the block flow direction, which determines the ordering direction of block-level boxes in a block formatting context; the ordering direction of line boxes in a block container that contains inlines; the ordering direction of rows in a table; etc. By virtue of determining the stacking direction of line boxes, the writing-mode property also determines whether the line boxes’ orientation (and thus the writing mode) is horizontal or vertical. The text-orientation property then determines how text is laid out within the line box.

    The content of replaced elements do not rotate due to the writing mode: images and external content such as from s, for example, remain upright, and the default object size of 300px×150px does not re-orient. However embedded replaced content involving text (such as MathML content or form elements) should match the replaced element’s writing mode and line orientation if the UA supports such a vertical writing mode for the replaced content.

    In the following example, two block elements (1 and 3) separated by an image (2) are presented in various flow writing modes.

    Here is a diagram of horizontal writing mode ( writing-mode: horizontal-tb ):

    Here is a diagram for the right-to-left vertical writing mode commonly used in East Asia ( writing-mode: vertical-rl ):

    And finally, here is a diagram for the left-to-right vertical writing mode used for Manchu and Mongolian ( writing-mode: vertical-lr ):

    In the following example, some form controls are rendered inside a block with vertical-rl writing mode. The form controls are rendered to match the writing mode.

    If a box has a different writing-mode value than its parent box (i.e. nearest ancestor without display: contents):

    • If the box would otherwise become an in-flow box with a computed display of inline, its display computes instead to inline-block.
    • If the box is a block container, then it establishes an independentblock formatting context.
    • More generally, if its specified inner display type is flow, then its computed inner display type becomes flow-root. [CSS-DISPLAY-3]

    As all other inherited CSS properties do, the writing-mode property inherits to SVG elements inlined (rather than linked) into the source document. This could cause unintentional side effects when, for example, an SVG image designed only for horizontal flow was embedded into a vertical flow document.

    Authors can prevent this from happening by adding the following rule:

    3.2.1. Obsolete SVG1.1 writing-mode Values

    SVG1.1 [SVG11] defines some additional values: lr , lr-tb , rl , rl-tb , tb , and tb-rl .

    These values are obsolete in any context except SVG1 documents and are therefore optional for non-SVG UAs.


    3.2.1.1. Supporting SVG1.1 writing-mode values in CSS syntax

    UAs that wish to support these values in the context of CSS must compute them as follows:

    Mapping of Obsolete SVG1.1 writing-mode values to modern CSS

    Specified Computed
    lr horizontal-tb
    lr-tb
    rl
    rl-tb
    tb vertical-rl
    tb-rl

    The SVG1.1 values were also present in an older of the CSS writing-mode specification, which is obsoleted by this specification. The additional tb-lr value of that revision is replaced by vertical-lr.

    3.2.1.2. Supporting SVG1.1 writing-mode values in presentational attributes

    In order to support legacy content with presentational attributes, and to allow authors to create documents that support older clients, SVG UAs must add the following style sheet rules to their default UA stylesheet:

    4. Inline-level Alignment

    When different kinds of inline-level content are placed together on a line, the baselines of the content and the settings of the vertical-align property control how they are aligned in the transverse direction of the line box. This section discusses what baselines are, how to find them, and how they are used together with the vertical-align property to determine the alignment of inline-level content.

    4.1. Introduction to Baselines

    This section is non-normative.

    A is a line along the inline axis of a line box along which individual glyphs of text are aligned. Baselines guide the design of glyphs in a font (for example, the bottom of most alphabetic glyphs typically align with the alphabetic baseline), and they guide the alignment of glyphs from different fonts or font sizes when typesetting.

    Alphabetic text in two font sizes with the baseline and em-boxes

    Different writing systems prefer different baseline tables.

    Preferred baselines in various writing systems

    A well-constructed font contains a , which indicates the position of one or more baselines within the font’s design coordinate space. (The design coordinate space is scaled with the font size.)

    In a well-designed mixed-script font, the glyphs are positioned in the coordinate space to harmonize with one another when typeset together. The baseline table is then constructed to match the shape of the glyphs, each baseline positioned to match the glyphs from its preferred scripts.

    The baseline table is a property of the font, and the positions of the various baselines apply to all glyphs in the font.

    Different baseline tables can be provided for alignment in horizontal and vertical text. UAs should use the vertical tables in vertical typographic modes and the horizontal tables otherwise.

    4.2. Text Baselines

    In this specification, only the following baselines are considered:

    alphabetic The , which typically aligns with the bottom of uppercase Latin glyphs. central The , which typically crosses the center of the em box. If the font is missing this baseline, it is assumed to be halfway between the ascender (over) and descender (under) edges of the em box.

    In vertical typographic mode, the central baseline is used as the dominant baseline when text-orientation is mixed or upright. Otherwise the alphabetic baseline is used.

    A future CSS module will deal with baselines in more detail and allow the choice of other dominant baselines and alignment options.

    4.3. Atomic Inline Baselines

    If an atomic inline (such as an inline-block, inline-table, or replaced inline element) does not have a baseline, then the UA synthesizes a baseline table thus:

    alphabetic The alphabetic baseline is assumed to be at the under margin edge. central The central baseline is assumed to be halfway between the under and over margin edges of the box.

    The vertical-align property in [CSS2] defines the baseline of inline-table and inline-block boxes with some exceptions.

    4.4. Baseline Alignment

    The (which can change based on the typographic mode) is used in CSS for alignment in two cases:

    • Aligning glyphs from different fonts within the same inline box. The glyphs are aligned by matching up the positions of the dominant baseline in their corresponding fonts.
    • Aligning a child inline-level box within its parent. For the vertical-align value of baseline , child is aligned to the parent by matching the parent’s dominant baseline to the same baseline in the child. (E.g. if the parent’s dominant baseline is alphabetic, then the child’s alphabetic baseline is matched to the parent’s alphabetic baseline, even if the child’s dominant baseline is something else.) For values of sub , super , , and

    , the baselines are aligned as for baseline , but the child is shifted according to the offset given by its vertical-align value.

    Given following sample markup:

    And the following style rule:

    The baseline tables of the parent ( .outer ) and the child ( .inner ) will not match up due to the font size difference. Since the dominant baseline is the alphabetic baseline, the child box is aligned to its parent by matching up their alphabetic baselines.

    If we assign vertical-align: super to the .inner element from the example above, the same rules are used to align the .inner child to its parent; the only difference is in addition to the baseline alignment, the child is shifted to the superscript position.

    5. Introduction to Vertical Text Layout

    Each writing system has one or more native orientations. Modern scripts can therefore be classified into three orientational categories:

    Scripts that have horizontal, but not vertical, native orientation. Includes: Latin, Arabic, Hebrew, Devanagari Scripts that have vertical, but not horizontal, native orientation. Includes: Mongolian, Phags Pa Scripts that have both vertical and horizontal native orientation. Includes: Han, Hangul, Japanese Kana

    A is one that has a native vertical orientation: i.e. one that is either vertical-only or that is bi-orientational. A is one that has a native horizontal orientation: i.e. one that is either horizontal-only or that is bi-orientational . (See Appendix A for a categorization of scripts by native orientation.)

    In modern typographic systems, all glyphs are assigned a horizontal orientation, which is used when laying out text horizontally. To lay out vertical text, the UA needs to transform the text from its horizontal orientation. This transformation is the , and there are two types:

    rotate Rotate the glyph from horizontal to vertical translate Translate the glyph from horizontal to vertical

    Scripts with a native vertical orientation have an intrinsic bi-orientational transform, which orients them correctly in vertical text: most CJK (Chinese/Japanese/Korean) characters translate, that is, they are always upright. Characters from other scripts, such as Mongolian, rotate.

    Scripts without a native vertical orientation can be either rotated (set sideways) or translated (set upright): the transform used is a stylistic preference depending on the text’s usage, rather than a matter of correctness. The text-orientation property’s mixed and upright values are provided to specify rotation vs. translation of horizontal-only text.

    5.1. Orienting Text: the text-orientation property

    Name:
    Value: mixed | upright | sideways
    Initial: mixed
    Applies to: all elements except table row groups, rows, column groups, and columns
    Inherited: yes
    Percentages: n/a
    Computed value: specified value
    Canonical order: n/a
    Animation type: not animatable

    This property specifies the orientation of text within a line. Current values only have an effect in vertical typographic modes: the property has no effect on boxes in horizontal typographic modes .

    Values have the following meanings:

    This value is typical for layout of dominantly vertical-script text.

    In vertical writing modes, typographic character units from horizontal-only scripts are typeset upright, i.e. in their standard horizontal orientation. Typographic character units from vertical scripts are typeset with their intrinsic orientation and shaped normally. See Vertical Orientations for further details.

    This value causes the used value of direction to be ltr, and for the purposes of bidi reordering, causes all characters to be treated as strong LTR.

    Note: The used value, rather than the computed value, of direction is influenced so that rtl can inherit properly into any descendants (such as the contents of a horizontal inline-block) where this directional override does not apply.

    In vertical writing modes, this causes all text to be typeset sideways, as if in a horizontal layout, but rotated 90° clockwise.

    Changing the value of this property may affect inline-level alignment. Refer to Text Baselines for more details.

    UAs may accept as a value that computes to sideways if needed for backward compatibility reasons.

    5.1.1. Vertical Typesetting and Font Features

    When typesetting text in vertical-rl and vertical-lr modes, text is typeset either “upright” or “sideways” as defined below:

    upright typesetting Typographic character units are indiv >vert feature must be enabled.) Furthermore, characters from horizontal cursive scripts (such as Arabic) are shaped in their isolated forms when typeset upright.

    Note that even when typeset “upright”, some glyphs should appear rotated. For example, dashes and enclosing punctuation should be oriented relative to the inline axis. In OpenType, this is typically handled by glyph substitution, although not all fonts have alternate glyphs for all relevant codepoints. (East Asian fonts usually provide alternates for East Asian codepoints, but Western fonts typically lack any vertical typesetting features and East Asian fonts typically lack vertical substitutions for Western codepoints.) Unicode published draft data on which characters should appear sideways as the SVO property in this data file; however, this property has been abandoned for the current revision of [UAX50].

    Typographic character units which are classified as Tr or Tu in [UAX50] are expected to have alternate glyphs or positioning for typesetting upright in vertical text. In the case of Tr characters, if such vertical alternate glyphs are missing from the font, the UA may wish to [RFC6919] (but is not expected to) synthesize the missing glyphs by typesetting them sideways etc.

    sideways typesetting Typographic character units typeset as a run rotated 90° clockwise from their upright orientation, using horizontal metrics and composition, and vertical typesetting features are not used. However, if the font has features meant to be enabled for sideways text that is typeset in vertical lines (e.g. to adjust brush stroke angles or alignment), those features are used. (An example of such a feature would be the proposed vrtr OpenType font feature.)

    5.1.2. Mixed Vertical Orientations

    [UAX50] defines the Vertical_Orientation property for the default glyph orientation of mixed-orientation vertical text. When text-orientation is mixed, the UA must determine the orientation of each typographic character unit by its Vertical_Orientation property: typeseting it upright if its orientation property is U , Tu , or Tr ; or typesetting it sideways (90° clockwise from horizontal) if its orientation property is R .

    Note that UAX50 does not handle scripts that rotate -90° in vertical contexts, so they will not be typeset correctly with mixed orientation. The sideways-lr value in Level 4, however, can correctly display such scripts.

    The OpenType vrt2 feature, which is intended for mixed-orientation typesetting, is not used by CSS. It delegates the responsibility for orienting glyphs to the font designer. CSS instead dictates the orientation through [UAX50] and orients glyphs by typesetting them sideways or upright as appropriate.

    5.1.3. Obsolete: the SVG1.1 glyph-orientation-vertical property

    Name:
    Value: auto | 0deg | 90deg | 0 | 90
    Initial: n/a
    Applies to: n/a
    Inherited: n/a
    Percentages: n/a
    Computed value: n/a
    Canonical order: n/a
    Animatable: n/a
    Shorthand glyph-orientation-vertical value Longhand text-orientation value
    auto mixed
    0deg upright
    0 upright
    90deg sideways
    90 sideways

    UAs must ignore and treat as invalid any other values for the glyph-orientation-vertical property; and treat as invalid the glyph-orientation-horizontal property in its entirety.

    Note: The 180deg and 270deg values, the radian and gradian values, and the glyph-orientation-horizontal property are not mapped because they have no known use cases nor significant amounts of dependent content, and are therefore not part of CSS, and have been likewise dropped from SVG.

    6. Abstract Box Terminology

    CSS2.1 [CSS2] defines the box layout model of CSS in detail, but only for the horizontal-tb writing mode. Layout is analogous in writing modes other than horizontal-tb ; however directional and dimensional terms in CSS2.1 must be abstracted and remapped appropriately.

    This section defines abstract directional and dimensional terms and their mappings in order to define box layout for other writing modes, and to provide terminology for future specs to define their layout concepts abstractly. (The next section explains how to apply them to CSS2.1 layout calculations and how to handle orthogonal flows.) Although they derive from the behavior of text, these abstract mappings exist even for boxes that do not contain any line boxes: they are calculated directly from the values of the writing-mode and direction properties.

    There are three sets of directional terms in CSS:

    Interpreted relative to the page, independent of writing mode. The are , , , and . Interpreted relative to the flow of content. The flow-relative directions are start and end, or block-start, block-end, inline-start, and inline-end if the dimension is also ambiguous. Interpreted relative to the orientation of the line box. The line-relative directions are line-left, line-right, line-over, and line-under.

    The are and , which correspond to measurements along the () and (), respectively. Abstract dimensions are identical in both flow-relative and line-relative terms, so there is only one set of these terms.

    Note: [CSS3-FLEXBOX] also defines flex-relative terms, which are used in describing flex layout.

    6.1. Abstract Dimensions

    The are defined below:

    The dimension perpendicular to the flow of text within a line, i.e. the vertical dimension in horizontal writing modes, and the horizontal dimension in vertical writing modes. The dimension parallel to the flow of text within a line, i.e. the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. The axis in the block dimension, i.e. the vertical axis in horizontal writing modes and the horizontal axis in vertical writing modes. The axis in the inline dimension, i.e. the horizontal axis in horizontal writing modes and the vertical axis in vertical writing modes. A measurement in the block dimension: refers to the physical height (vertical dimension) in horizontal writing modes, and to the physical width (horizontal dimension) in vertical writing modes. A measurement in the inline dimension: refers to the physical width (horizontal dimension) in horizontal writing modes, and to the physical height (vertical dimension) in vertical writing modes.

    6.2. Flow-relative Directions

    The , block-start, block-end, inline-start, and inline-end, are defined relative to the flow of content on the page. In an LTR horizontal-tb writing mode, they correspond to the top, bottom, left, and right directions, respectively. They are defined as follows:

    The side that comes earlier in the block flow direction, as determined by the writing-mode property: the physical top in horizontal-tb mode, the right in vertical-rl, and the left in vertical-lr. The side opposite block-start. The s >direction value of rtl, this means the line-right side. The side opposite start.

    Where contextually unambiguous or encompassing both meanings, the terms and are used in place of block-start/inline-start and block-end/inline-end, respectively.

    Note that while determining the block-start and block-end s >writing-mode property but also the direction property.

    6.3. Line-relative Directions

    The determines which side of a line box is the logical “top” (ascender side). It is given by the writing-mode property. Usually the line-relative “top” corresponds to the block-start side, but this is not always the case: in Mongolian typesetting (and thus by default in vertical-lr writing modes), the line-relative “top” corresponds to the block-end side. Hence the need for distinct terminology.

    A primarily Mongolian document, such as the one above, is written in vertical lines stacking left to right, but lays its Latin text with the tops of the glyphs towards the right. This makes the text run in the same inline direction as Mongolian (top-to-bottom) and face the same direction it does in other East Asian layouts (which have vertical lines stacking right to left), but the glyphs’ tops are facing the bottom of the line stack rather than the top, which in an English paragraph would be upside-down. (See this Diagram of Mongolian Text Layout.)

    In addition to a line-relative “top” and “bottom” to map things like ‘vertical-align: top’, CSS also needs to refer to a line-relative “left” and “right” in order to map things like text-align: left. Thus there are four , which are defined relative to the line orientation as follows:

    or Nominally the side that corresponds to the ascender side or “top” side of a line box. (The side overlines are typically drawn on.) or Opposite of over: the line-relative “bottom” or descender side. (The side underlines are typically drawn on.) The line-relative «left» side of a line box, which is nominally the side from which LTR text would start. The line-relative «right» side of a line box, which is nominally the side from which RTL text would start. (Opposite of line-left.)

    See the table below for the exact mappings between physical and line-relative directions.

    Line orientation in horizontal-tb

    Vertical baseline of an upright glyph

    Since the baseline is vertical, the definitions for mixed or sideways above still apply; i.e., line-over is on right, and line-under is on left.

    This is in line with font systems such as OpenType which defines the ascender on right and the descender on left in their vertical metrics.

    6.4. Abstract-to-Physical Mappings

    The following table summarizes the abstract-to-physical mappings (based on the used direction and writing-mode):

    Abstract-Physical Mapping

    writing-mode horizontal-tb vertical-rl vertical-lr
    direction ltr rtl ltr rtl ltr rtl
    block-size height width
    inline-size w >height
    block-start top right left
    block-end bottom left right
    inline-start left right top bottom top bottom
    inline-end right left bottom top bottom top
    over top right
    under bottom left
    line-left left top
    line-right right bottom

    Note: The used direction depends on the computed writing-mode and text-orientation: in vertical writing modes, a text-orientation value of upright forces the used direction to ltr.

    7. Abstract Box Layout

    7.1. Principles of Layout in Vertical Writing Modes

    CSS box layout in vertical writing modes is analogous to layout in the horizontal writing modes, following the principles outlined below:

    Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes. Likewise, layout calculation rules (such as those in CSS2.1, Section 10.6) that apply to the vertical dimension in horizontal writing modes instead apply to the horizontal dimension in vertical writing modes. Thus:

    Layout rules that refer to the width use the height instead, and vice versa.

    Layout rules that refer to the *-left and *-right box properties (border, margin, padding, positioning offsets) use *-top and *-bottom instead, and vice versa, mapping the horizontal writing-mode rules of CSS2.1 into vertical writing-mode rules using the flow-relative directions. The side of the box these properties apply to doesn’t change: only which values are inputs to which layout calculations changes. The margin-left property still affects the lefthand margin, for example; however in a vertical-rl writing mode it takes part in margin collapsing in place of margin-bottom.

    Layout rules that depend on the direction property to choose between left and right (e.g. overflow, overconstraint resolution, the initial value for text-align, table column ordering) are abstracted to the start and end sides and applied appropriately.

    For example, in vertical writing modes, table rows are vertical and table columns are horizontal. In a vertical-rl mixed rtl table, the first column would be on the bottom (the inline-start s >auto values for margin-top and margin-bottom it would be centered vertically within its block flow.

    Table in vertical-rl RTL writing mode

    For features such as text alignment, floating, and list marker positioning, that primarily reference the left or right sides of the line box or its longitudinal parallels and therefore have no top or bottom equivalent, the line-left and line-right sides are used as the reference for the left and right sides respectively.

    Likewise for features such as underlining, overlining, and baseline alignment (the unfortunately-named vertical-align), that primarily reference the top or bottom sides of the linebox or its transversal parallels and therefore have no left or right equivalent, the line-over and line-under sides are used as the reference for the top and bottom sides respectively.

    The details of these mappings are provided below.

    7.2. Dimensional Mapping

    Certain properties behave logically as follows:

    • The first and second values of the border-spacing property represent spacing between columns and rows respectively, not necessarily the horizontal and vertical spacing respectively. [CSS2]
    • The line-height property always refers to the logical height. [CSS2]

    The height properties (height, min-height, and max-height) refer to the physical height, and the width properties (width, min-width, and max-width) refer to the physical width. However, the rules used to calculate box dimensions and positions are logical.

    For example, the calculation rules in CSS2.1 Section 10.3 are used for the inline dimension measurements: they apply to the inline size (which could be either the physical width or physical height) and to the inline-start and inline-end margins, padding, and border. Likewise the calculation rules in CSS2.1 Section 10.6 are used in the block dimension: they apply to the block size and to the block-start and block-end margins, padding, and border. [CSS2]

    As a corollary, percentages on the margin and padding properties, which are always calculated with respect to the containing block width in CSS2.1, are calculated with respect to the inline size of the containing block in CSS3.

    7.3. Orthogonal Flows

    When a box has a different writing-mode from its containing block two cases are possible:

    • The two writing modes are parallel to each other. (For example, vertical-rl and vertical-lr).
    • The two writing modes are perpendicular to each other. (For example, horizontal-tb and vertical-rl).

    When a box has a writing mode that is perpendicular to its containing block it is said to be in, or establish, an .

    To handle this case, CSS layout calculations are divided into two phases: sizing a box, and positioning the box within its flow.

    • In the sizing phase—calculating the width and height of the box—the dimensions of the box and the containing block are mapped to the inline size and block size and calculations are performed accordingly using the writing mode of the box establishing the orthogonal flow.
    • In the positioning phase—calculating the positioning offsets, margins, borders, and padding—the dimensions of the box and its containing block are mapped to the inline size and block size and calculations are performed according to the writing mode of the containing block of the box establishing the orthogonal flow.

    Since auto margins are resolved consistent with the containing block’s writing mode, a box establishing an orthogonal flow can, once sized, be aligned or centered within its containing block just like other block-level boxes by using auto margins.

    An example of orthogonal flow

    For example, if a vertical block is placed ins >inline size , even though the physical height is the block size, not the inline size , of the parent block.

    On the other hand, because the containing block is in a horizontal writing mode, the vertical margins on the child participate in margin-collapsing, even though they are in the inline-axis of the child, and horizontal auto margins will expand to fill the containing block, even though they are in the block-axis of the child.

    This means that when applying shrink-to-fit formula to a box such as an inline-block, float, or table-cell, if its child establishes an orthogonal flow, the calculation dependency must be changed so that the sizing phase of the child runs first and its used block size becomes an input to the inline-size shrink-to-fit formula of the parent.

    7.3.1. Available Space of Orthogonal Flows

    It is common in CSS for a containing block to have a definite inline size, but not a definite block size. This typically happens in CSS2.1 when a containing block has an auto height, for example: its w >block size depends on its contents. In such cases the available inline space is defined as the inline size of the containing block; but the available block space , which would otherwise be the block size of the containing block, is infinite.

    Putting a box in an orthogonal flow can result in the opposite: for the box’s available block space to be definite, but its available inline space to be indefinite. In such cases a percentage of the containing block’s inline size cannot be defined, and inline axis computations cannot be resolved. In these cases, an additional fallback size is used in place of the available inline space for calculations that require a definite available inline space : this size is the smallest of

    • the size represented by the containing block’s inner max size (if that is fixed) floored by its inner min size (if that is fixed)
    • the nearest ancestor scrollport’s inner size if that is fixed, else / capped by its inner max size if that is fixed, floored by its inner min size if that is fixed
    • the initial containing block’s size

    See [css-sizing-3] for further details on CSS sizing terminology and concepts.

    7.3.2. Auto-sizing Orthogonal Flow Roots

    The automatic sizing of orthogonal multi-column containers (in both axes) and of other display types not mentioned above is not defined in this specification.

    7.3.3. Fragmenting Orthogonal Flows

    This section is informative.

    With regards to fragmentation, the rules in CSS2.1 still hold in vertical writing modes and orthogonal flows: break opportunities do not occur inside line boxes, only between them. UAs that support [CSS3COL] may break in the (potentially zero-width) gap between columns, however.

    Note that if content spills outside the pagination stream established by the root element, the UA is not required to print such content. Authors wishing to mix writing modes with long streams of text are thus encouraged to use CSS columns to keep all content flowing in the document’s pagination direction.

    In other words, if your document would require two scrollbars on the screen it probably won’t all print. Fix your layout, e.g. by using columns so that it all scrolls (and therefore paginates) in one direction if you want to make sure it’ll all print. T-shaped documents tend not to print well.

    7.4. Flow-Relative Mappings

    Flow-relative directions are calculated with respect to the writing mode of the containing block of the box and used to abstract layout rules related to the box properties (margins, borders, padding) and any properties related to positioning the box within its containing block (float, clear, top, bottom, left, right, caption-s >caption-side , whose top / top-outside and bottom / bottom-outside values are associated to the block-start and block-end sides of the table, respectively.)

    For example, the margin that is dropped when a box’s inline dimension is over-constrained is the end margin as determined by the writing mode of the containing block.

    The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin. Similarly the block-start padding and border are substituted for the top padding and border, and the block-end padding and border substituted for the bottom padding and border. Note this means only block-start and block-end margins ever collapse.

    Flow-relative directions are calculated with respect to the writing mode of the box and used to abstract layout related to the box’s contents:

    • The initial value of the text-align property aligns to the start edge of the line box.
    • The text-indent property indents from the start edge of the line box.
    • For tables, the ordering of columns begins on the inline-start s >7.5. Line-Relative Mappings

    The line-relative directions are over, under, line-left, and line-right. In an LTR horizontal-tb writing mode, they correspond to the top, bottom, left, and right directions, respectively.

    The line-right and line-left directions are calculated with respect to the writing mode of the box and used to interpret the left and right values of the following properties:

    The line-right and line-left directions are calculated with respect to the writing mode of the containing block of the box and used to interpret the left and right values of the following properties:

    The over and under directions are calculated with respect to the writing mode of the box and used to define the interpretation of the «top» (over) and «bottom» (under) sides of the line box as follows:

    • For the vertical-align property, the «top» of the line box is its over edge; the «bottom» of the line box is its under edge. Positive length and percentage values shift the baseline towards the line-over edge. [CSS2]
    • For the text-decoration property, the underline is drawn on the under s >Note that the CSS Text Decoration Module defines this in more detail and provides additional controls for controlling the position of underlines and overlines. [CSS3-TEXT-DECOR]

    7.6. Purely Physical Mappings

    The following values are purely physical in their definitions and do not respond to changes in writing mode:

    • the rect() notation of the clip property [CSS2]
    • the background properties [CSS2][CSS3BG]
    • the border-image properties [CSS3BG]
    • the offsets of the box-shadow and text-shadow properties

    8. The Principal Writing Mode

    The of the document is determined by the used writing-mode, direction, and text-orientation values of the root element. This writing mode is used, for example, to determine the direction of scrolling and the default page progression direction.

    As a special case for handling HTML documents, if the root element has a body child element [HTML], the used value of the of writing-mode and direction properties on root element are taken from the computed writing-mode and direction of the first such child element instead of from the root element’s own values. The UA may also propagate the value of text-orientation in this manner. Note that this does not affect the computed values of writing-mode , direction , or text-orientation of the root element itself.

    Note: Propagation is done on used values rather than computed values to avoid disrupting other aspects of style computation, such as inheritance, logical property mapping logic, or length value computation.

    8.1. Propagation to the Initial Containing Block

    The principal writing mode is propagated to the initial containing block and to the viewport, thereby affecting the layout of the root element and the scrolling direction of the viewport.

    8.2. Page Flow: the page progression direction

    In paged media CSS classifies all pages as either left or right pages. The page progression direction (see [CSS3PAGE]), which determines whether the left or right page in a spread is first in the flow and whether the first page is by default a left or right page, depends on the principal writing mode as follows:

    principal writing mode page progression
    horizontal-tb and ltr left-to-right
    horizontal-tb and rtl right-to-left
    vertical-rl right-to-left
    vertical-lr left-to-right

    Note: Unless otherwise overridden, the first page of a document begins on the second half of a spread, e.g. on the right page in a left-to-right page progression.

    9. Glyph Composition

    9.1. Horizontal-in-Vertical Composition: the text-combine-upright property

    Name:
    Value: none | all
    Initial: none
    Applies to: non-replaced inline elements
    Inherited: yes
    Percentages: n/a
    Computed value: specified keyword
    Canonical order: n/a
    Animation type: not animatable

    This property specifies the combination of multiple typographic character units into the space of a single typographic character unit . If the combined text is wider than 1em, the UA must fit the contents within 1em, see below. The resulting composition is treated as a single upright glyph for the purposes of layout and decoration. This property only has an effect in vertical writing modes. Values have the following meanings:

    No special processing. Attempt to typeset horizontally all consecutive typographic character units within the box such that they take up the space of a single typographic character unit within the vertical line box.

    In East Asian documents, the text-combine-upright effect is often used to display Latin-based strings such as components of a date or letters of an initialism, always in a horizontal writing mode regardless of the writing mode of the line:

    Example of horizontal-in-vertical tate-chu-yoko

    The figure is the result of the rules

    and the following markup:

    In Japanese, this effect is known as tate-chu-yoko.

    Future levels of CSS Writing Modes will introduce values to automatically detect commonly-affected sequences. For example, CSS Writing Modes Level 4 introduces the digits value to combine sequences of digits.

    9.1.1. Text Run Rules

    To avoid complexity in the rendering and layout, text-combine-upright can only combine plain text: consecutive typographic character units that are not interrupted by a box boundary.

    However, because the property inherits, the UA should ensure that the contents of the box effecting the combination are not part of an otherwise-combinable sequence that happens to begin or end outside the box; if so, then the text is laid out normally, as if text-combine-upright were none.

    For example, given the rule

    if the following markup were given:

    no text would combine.

    9.1.2. Layout Rules

    When combining text as for text-combine-upright: all, the glyphs of the combined text are b >1em . Processing of document white space included in the combined text is not defined in this level. The effective size of the composition is assumed to be 1em square; anything outside the square is not measured for layout purposes. The UA should center the glyphs horizontally and vertically within the measured 1em square.

    The baseline of the resulting composition must be chosen such that the square is centered between the text-over and text-under baselines of its parent inline box prior to any baseline alignment shift (vertical-align). For bidi reordering, the composition is treated the same as a typographic character unit with text-orientation: upright. For line breaking before and after the composition, it is treated as a regular inline with its actual contents. For other text layout purposes, e.g. emphasis marks, text-decoration, spacing, etc. the resulting composition is treated as a single glyph representing the Object Replacement Character U+FFFC.

    9.1.3. Compression Rules

    The UA must ensure that the combined advance width of the composition fits within 1em by compressing the combined text if necessary. (This does not necessarily mean that the glyphs will fit within 1em, as some glyphs are designed to draw outside their geometric boundaries.) OpenType implementations must use width-specific variants (OpenType features hwid / twid / qwid ; other glyph-width features such as fwid or pwid are not included) to compress text in cases where those variants are available for all typographic character units in the composition. Otherwise, the UA may use any means to compress the text, including substituting half-width, third-width, and/or quarter-width glyphs provided by the font, using other font features designed to compress text horizontally, scaling the text geometrically, or any combination thereof.

    For example, a simple OpenType-based implementation might compress the text as follows:

    1. Enable 1/ n -width glyphs for combined text of n typographic character units (i.e. use OpenType hwid for 2 typographic character units , twid for 3 typographic character units , etc.) if the number of typographic character units > 1. Note that the number of typographic character units ≠ number of Unicode codepoints!
    2. If the result is wider than 1em, horizontally scale the result to 1em.

    A different implementation that utilizes OpenType layout features might compose the text first with normal glyphs to see if that fits, then substitute in half-width or third-width forms as available and necessary, possibly adjusting its approach or combining it with scaling operations depending on the available glyph substitutions.

    In some fonts, the ideographic glyphs are given a compressed design such that they are 1em wide but shorter than 1em tall. To accommodate such fonts, the UA may vertically scale the composition to match the advance height of 水 U+6C34 as rendered according to the specified font settings. In such a case the resulting composition assumes the advance height of 水 U+6C34 rather than 1em.

    9.1.3.1. Full-width Characters

    In order to preserve typographic color when compressing the text to 1em, when the combined text consists of more than one typographic character unit, then any full-w >typographic character units should first be converted to their non-full-width equivalents by reversing the algorithm defined for text-transform: full-width in [CSS-TEXT-3] before applying other compression techniques.

    Properties that affect glyph selection, such as the font-variant and font-feature-settings properties defined in [CSS3-FONTS], can potentially affect the selection of variants for characters included in combined text runs. Authors are advised to use these properties with care when text-combine-upright is also used.

    10. Privacy and Security Considerations

    This specification introduces no new privacy leaks, or security considerations beyond «implement it correctly».

    Changes

    Changes since the September 2020 CSS Writing Modes Module Level 3 Candidate Recommendation

    No substantive change; minor editorial fixes (see issue 4293, 4272, and 4273).

    Changes since the July 2020 CSS Writing Modes Module Level 3 Candidate Recommendation

    • Added back acc > Changes since the May 2020 CSS Writing Modes Module Level 3 Candidate Recommendation
    • Clarified that propagation of the principal writing mode from the body element to the initial containing block and viewport does affect the used value on root element as well, but not its computed value. Also, optionally allow propagating text-orientation as well. (Issue 3066)
    • Make the processing of white space in a text-combine-upright combined text sequence explicitely undefined in this level (Issue 4139)

    When combining text as for text-combine-upright: all, the glyphs of the combined text are b >1em .

    Changes since the December 2020 CSS Writing Modes Module Level 3 Candidate Recommendation

    • Fixed the fallback “available space” for orthogonal flows to handle max-height (and min-height) which it forgot to cons > Changes since the December 2015 CSS Writing Modes Module Level 3 Candidate Recommendation
    • Deferred the s >digits value of text-combine-upright to Level 4.
    • Deferred the automatic multi-column behavior of orthogonal flows to Level 4.
    • Changed the fallback “available space” for orthogonal flows to use the nearest fixed-size scrollport where available. (Issue 1391)
    • Added Privacy and Security Considerations section.
    • Miscellaneous editorial clarifications.

    Changes since the March 2014 CSS Writing Modes Module Level 3 Candidate Recommendation

    • Fixed orthogonal flows auto-sizing rules to better handle shrink-wrapping.
    • Removed sideways-left and s >sideways-right , and added s >use-glyph-orientation value of text-orientation and defined glyph-orientation-vertical as an alias of text-orientation consistent with how CSS aliases are handled (see page-break-ins > Acknowledgements

    L. David Baron, Brian Birtles, James Clark, John Daggett, Nami Fujii, Daisaku Hataoka, Martin Heijdra, Laurentiu Iancu, Richard Ishida, Jonathan Kew, Yasuo Kida, Tatsuo Kobayashi, Toshi Kobayashi, Ken Lunde, Shunsuke Matsuki, Nat McCully, Eric Muller, Paul Nelson, Kenzou Onozawa, Chris Pratley, Xidorn Quan, Florian Rivoal, Dwayne Robinson, Simon Sapin, Marcin Sawicki, Dirk Schulze, Hajime Shiozawa, Alan Stearns, Michel Suignard, Takao Suzuki, Gérard Talbot, Masataka Yakura, Taro Yamamoto, Steve Zilles

    Appendix A: Vertical Scripts in Unicode

    This section is informative.

    This appendix lists the vertical-only and bi-orientational scripts in Unicode 6.0 [UNICODE] and their transformation from horizontal to vertical orientation. Any script not listed explicitly is assumed to be horizontal-only. The script classification of Unicode characters is given by [UAX24].

    Vertical Scripts in Unicode

    Code Name Transform (Clockwise) Vertical Intrinsic Direction
    Bopo Bopomofo ttb
    Egyp Egyptian Hieroglyphs ttb
    Hira Hiragana ttb
    Kana Katakana ttb
    Hani Han ttb
    Hang Hangul ttb
    Merc Meroitic Cursive ttb
    Mero Meroitic Hieroglyphs ttb
    Mong Mongolian 90° ttb
    Ogam Ogham -90° btt
    Orkh Old Turkic -90° ttb
    Phag Phags Pa 90° ttb
    Yiii Yi ttb

    Exceptions: For the purposes of this specification, all fullwidth (F) and wide (W) characters are treated as belonging to a vertical script, and halfwidth characters (H) are treated as belonging to a horizontal script. [UAX11]

    Note that for vertical-only characters (such as Mongolian and Phags Pa letters), the glyphs in the Unicode code charts are shown in their vertical orientation. In horizontal text, they are typeset in a 90° counter-clockwise rotation from this orientation.

    Due to limitations in the current featureset of Unicode Technical Report 50 and CSS Writing Modes, vertical mixed typesetting cannot automatically handle either Ogham or Old Turkic. For these scripts, sideways-lr (in CSS Writing Modes Level 4) can be used to typeset passages.

    Conformance

    Document conventions

    Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

    All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

    Examples in this specification are introduced with the words “for example” or are set apart from the normative text with , like this:

    This is an example of an informative example.

    Informative notes begin with the word “Note” and are set apart from the normative text with , like this:

    Note, this is an informative note.

    Advisements are normative sections styled to evoke special attention and are set apart from other normative text with , like this: UAs MUST provide an accessible alternative.

    Conformance classes

    Conformance to this specification is defined for three conformance classes:

    style sheet A CSS style sheet. renderer A UA that interprets the semantics of a style sheet and renders documents that use them. authoring tool A UA that writes a style sheet.

    A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module.

    A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.)

    An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module.

    Requirements for Responsible Implementation of CSS

    The following sections define several conformance requirements for implementing CSS responsibly, in a way that promotes interoperability in the present and future.

    Partial Implementations

    So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported property values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.

    Implementations of Unstable and Proprietary Features

    To avoid clashes with future stable CSS features, the CSSWG recommends following best practices for the implementation of unstable features and proprietary extensions to CSS.

    Implementations of CR-level Features

    Once a specification reaches the Candidate Recommendation stage, implementers should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec, and should avoid exposing a prefixed variant of that feature.

    To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group.

    Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at https://www.w3.org/Style/CSS/Test/. Questions should be directed to the public-css-testsuite@w3.org mailing list.

    Index

    Terms defined by this specification

    • abstract dimensions , in §6.1
    • all , in §9.1
    • alphabetic baseline , in §4.2
    • baseline , in §4.1
    • baseline table , in §4.1
    • bidi-isolate , in §2.2
    • bidi-isolated , in §2.2
    • bidi isolation , in §2.2
    • bidi-override , in §2.2
    • bidi paragraph , in §2.4
    • bidirectionality , in §2
    • bi-orientational , in §5
    • bi-orientational transform , in §5
    • block-axis , in §6.1
    • block axis , in §6.1
    • block dimension , in §6.1
    • block-end , in §6.2
    • block end , in §6.2
    • block flow direction , in §1
    • block size , in §6.1
    • block-size , in §6.1
    • block start , in §6.2
    • block-start , in §6.2
    • bottom , in §6
    • central baseline , in §4.2
    • direction , in §2.1
    • directional embedding , in §2.2
    • directional override , in §2.2
    • dominant baseline , in §4.4
    • embed , in §2.2
    • end , in §6.2
    • establish an orthogonal flow , in §7.3
    • flow-relative , in §6
    • flow-relative direction , in §6.2
    • forced paragraph break , in §2.4
    • glyph-orientation-vertical , in §5.1.3
    • height , in §6
    • horizontal axis , in §6
    • horizontal block flow , in §1
    • horizontal dimension , in §6
    • horizontal-only , in §5
    • horizontal script , in §5
    • horizontal-tb , in §3.2
    • horizontal writing mode , in §1
    • inline axis , in §6.1
    • inline-axis , in §6.1
    • inline base direction , in §1
    • inline dimension , in §6.1
    • inline end , in §6.2
    • inline-end , in §6.2
    • inline size , in §6.1
    • inline-size , in §6.1
    • inline start , in §6.2
    • inline-start , in §6.2
    • isolate , in §2.2
    • isolated sequence , in §2.2
    • isolate-override , in §2.2
    • isolation , in §2.2
    • left , in §6
    • line-left , in §6.3
    • line orientation , in §6.3
    • line-over , in §6.3
    • line-relative , in §6
    • line-relative direction , in §6.3
    • line-right , in §6.3
    • line-under , in §6.3
    • logical height , in §6.1
    • logical width , in §6.1
    • ltr , in §2.1
    • mixed , in §5.1
    • none , in §9.1
    • normal , in §2.2
    • orthogonal , in §7.3
    • orthogonal flow , in §7.3
    • over , in §6.3
    • physical , in §6
    • physical bottom , in §6
    • physical dimensions , in §6
    • physical direction , in §6
    • physical left , in §6
    • physical right , in §6
    • physical top , in §6
    • plaintext , in §2.2
    • principal writing mode , in §8
    • right , in §6
    • rtl , in §2.1
    • sideways , in §5.1
    • sideways-right , in §5.1
    • start , in §6.2
    • text-combine-upright , in §9.1
    • text-orientation , in §5.1
    • top , in §6
    • typographic mode , in §1
    • under , in §6.3
    • unicode-bidi , in §2.2
    • upright , in §5.1
    • vertical axis , in §6
    • vertical block flow , in §1
    • vertical dimension , in §6
    • vertical-lr , in §3.2
    • vertical-only , in §5
    • vertical-rl , in §3.2
    • vertical script , in §5
    • vertical writing mode , in §1
    • width , in §6
    • writing mode , in §1
    • writing-mode , in §3.2
    • x-axis , in §6
    • y-axis , in §6

    https://www.w3.org/TR/css-box-3/#propdef-margin-bottomReferenced in:

    • 7.1. Principles of Layout in Vertical Writing Modes(2)

    https://www.w3.org/TR/css-box-3/#propdef-margin-leftReferenced in:

    • 7.1. Principles of Layout in Vertical Writing Modes(2)

    https://www.w3.org/TR/css-box-3/#propdef-margin-rightReferenced in:

    • 7.1. Principles of Layout in Vertical Writing Modes

    https://www.w3.org/TR/css-box-3/#propdef-margin-topReferenced in:

    • 7.1. Principles of Layout in Vertical Writing Modes

    https://www.w3.org/TR/css-break-4/#propdef-box-decoration-breakReferenced in:

    • 2.4.5. Reordering-induced Box Fragmentation

    https://www.w3.org/TR/css-cascade-4/#computed-valueReferenced in:

    • 1.1. Module Interactions
    • 5.1. Orienting Text: the text-orientation property
    • 8. The Principal Writing Mode

    https://www.w3.org/TR/css-cascade-4/#valdef-all-inheritReferenced in:

    • 2.2. Embeddings and Overrides: the unicode-bidi property

    https://www.w3.org/TR/css-cascade-4/#inheritanceReferenced in:

    • 8. The Principal Writing Mode

    https://www.w3.org/TR/css-cascade-4/#used-valueReferenced in:

    • 5.1. Orienting Text: the text-orientation property(2)
    • 6.4. Abstract-to-Physical Mappings
    • 8. The Principal Writing Mode(2)

    https://www.w3.org/TR/css-display-3/#block-containerReferenced in:

    • 2.2. Embeddings and Overrides: the unicode-bidi property(2)
    • 3.2. Block Flow Direction: the writing-mode property
    • 7.3.2. Auto-sizing Orthogonal Flow Roots

    https://www.w3.org/TR/css-display-3/#block-formatting-contextReferenced in:

    • 3.2. Block Flow Direction: the writing-mode property

    https://www.w3.org/TR/css-display-3/#block-levelReferenced in:

    • 7.3.2. Auto-sizing Orthogonal Flow Roots

    https://www.w3.org/TR/css-display-3/#containing-blockReferenced in:

    • 7.3.2. Auto-sizing Orthogonal Flow Roots

    https://www.w3.org/TR/css-display-3/#display-typeReferenced in:

    • 7.3.2. Auto-sizing Orthogonal Flow Roots

    https://www.w3.org/TR/css-display-3/#valdef-display-flowReferenced in:

    • 3.2. Block Flow Direction: the writing-mode property

    https://www.w3.org/TR/css-display-3/#valdef-display-flow-rootReferenced in:

    • 3.2. Block Flow Direction: the writing-mode property

    https://www.w3.org/TR/css-display-3/#in-flowReferenced in:

    • 3.2. Block Flow Direction: the writing-mode property

    https://www.w3.org/TR/css-display-3/#independent-formatting-contextReferenced in:

    • 3.2. Block Flow Direction: the writing-mode property

    https://www.w3.org/TR/css-display-3/#initial-containing-blockReferenced in:

    • 8.1. Propagation to the Initial Containing Block

    https://www.w3.org/TR/css-display-3/#valdef-display-inlineReferenced in:

    • 2.2. Embeddings and Overrides: the unicode-bidi property
    • 3.2. Block Flow Direction: the writing-mode property

    https://www.w3.org/TR/css-display-3/#inline-boxReferenced in:

    • 2.4.5. Reordering-induced Box Fragmentation

    https://www.w3.org/TR/css-display-3/#valdef-display-inline-blockReferenced in:

    • 3.2. Block Flow Direction: the writing-mode property
    • 9.1.2. Layout Rules
    • Changes since the May 2020 CSS Writing Modes Module Level 3 Candidate Recommendation

    https://www.w3.org/TR/css-display-3/#inner-display-typeReferenced in:

    • 3.2. Block Flow Direction: the writing-mode property(2)

    https://www.w3.org/TR/css-display-3/#replaced-elementReferenced in:

    • 2.4.3. Bidi Treatment of Atomic Inlines
    • 3.2. Block Flow Direction: the writing-mode property

    https://www.w3.org/TR/css-display-3/#valdef-display-run-inReferenced in:

    • Changes since the March 2014 CSS Writing Modes Module Level 3 Candidate Recommendation

    https://www.w3.org/TR/css-inline-3/#root-inline-boxReferenced in:

    • 2.2. Embeddings and Overrides: the unicode-bidi property

    https://www.w3.org/TR/css-inline-3/#propdef-vertical-alignReferenced in:

    • 4. Inline-level Alignment(2)
    • 4.3. Atomic Inline Baselines
    • 4.4. Baseline Alignment(2)(3)
    • 7.1. Principles of Layout in Vertical Writing Modes
    • 7.5. Line-Relative Mappings
    • 9.1.2. Layout Rules

    https://www.w3.org/TR/css-masking-1/#funcdef-rectReferenced in:

    • 7.6. Purely Physical Mappings

    https://www.w3.org/TR/css-overflow-3/#scrollportReferenced in:

    • 7.3.1. Available Space of Orthogonal Flows
    • Changes since the December 2015 CSS Writing Modes Module Level 3 Candidate Recommendation

    https://drafts.csswg.org/css-ruby-1/#ruby-annotation-container-boxReferenced in:

    • Changes since the March 2014 CSS Writing Modes Module Level 3 Candidate Recommendation

    https://drafts.csswg.org/css-ruby-1/#ruby-base-container-boxReferenced in:

    • Changes since the March 2014 CSS Writing Modes Module Level 3 Candidate Recommendation

    https://www.w3.org/TR/css-sizing-3/#valdef-width-autoReferenced in:

    • 7.3.1. Available Space of Orthogonal Flows
    • 7.3.2. Auto-sizing Orthogonal Flow Roots

    https://www.w3.org/TR/css-sizing-3/#automatic-sizeReferenced in:

    • 7.3.2. Auto-sizing Orthogonal Flow Roots(2)

    https://www.w3.org/TR/css-sizing-3/#availableReferenced in:

    • 7.3.1. Available Space of Orthogonal Flows(2)(3)(4)(5)(6)
    • 7.3.2. Auto-sizing Orthogonal Flow Roots

    https://www.w3.org/TR/css-sizing-3/#availableReferenced in:

    • 7.3.1. Available Space of Orthogonal Flows(2)(3)(4)(5)(6)
    • 7.3.2. Auto-sizing Orthogonal Flow Roots

    https://www.w3.org/TR/css-sizing-3/#availableReferenced in:

    • 7.3.1. Available Space of Orthogonal Flows(2)(3)(4)(5)(6)
    • 7.3.2. Auto-sizing Orthogonal Flow Roots

    https://www.w3.org/TR/css-sizing-3/#definiteReferenced in:

    • 7.3.2. Auto-sizing Orthogonal Flow Roots

    https://www.w3.org/TR/css-sizing-3/#fallbackReferenced in:

    • 7.3.1. Available Space of Orthogonal Flows
    • 7.3.2. Auto-sizing Orthogonal Flow Roots

    https://www.w3.org/TR/css-sizing-3/#fit-content-sizeReferenced in:

    • 7.3.2. Auto-sizing Orthogonal Flow Roots

    https://www.w3.org/TR/css-sizing-3/#max-widthReferenced in:

    • 7.3.1. Available Space of Orthogonal Flows(2)

    https://www.w3.org/TR/css-sizing-3/#max-content-inline-sizeReferenced in:

    • 7.3.2. Auto-sizing Orthogonal Flow Roots

    https://www.w3.org/TR/css-sizing-3/#max-contentReferenced in:

    • 7.3. Orthogonal Flows

    https://www.w3.org/TR/css-sizing-3/#min-widthReferenced in:

    • 7.3.1. Available Space of Orthogonal Flows(2)

    https://www.w3.org/TR/css-sizing-3/#min-content-inline-sizeReferenced in:

    • 7.3.2. Auto-sizing Orthogonal Flow Roots

    https://www.w3.org/TR/css-sizing-3/#min-contentReferenced in:

    • 7.3. Orthogonal Flows

    https://www.w3.org/TR/css-sizing-3/#preferred-size-propertiesReferenced in:

    • 7.3.2. Auto-sizing Orthogonal Flow Roots

    https://www.w3.org/TR/css-sizing-3/#stretch-fit-inline-sizeReferenced in:

    • 7.3.2. Auto-sizing Orthogonal Flow Roots(2)

    https://www.w3.org/TR/css-text-3/#characterReferenced in:

    • 5.1.1. Vertical Typesetting and Font Features

    https://www.w3.org/TR/css-text-3/#white-spaceReferenced in:

    • 9.1.2. Layout Rules
    • Changes since the May 2020 CSS Writing Modes Module Level 3 Candidate Recommendation

    https://www.w3.org/TR/css-text-3/#propdef-letter-spacingReferenced in:

    • 9.1.2. Layout Rules
    • Changes since the May 2020 CSS Writing Modes Module Level 3 Candidate Recommendation

    https://www.w3.org/TR/css-text-3/#propdef-text-alignReferenced in:

    • 6.3. Line-relative Directions
    • 7.1. Principles of Layout in Vertical Writing Modes
    • 7.4. Flow-Relative Mappings
    • 7.5. Line-Relative Mappings

    https://www.w3.org/TR/css-text-3/#propdef-text-indentReferenced in:

    • 7.4. Flow-Relative Mappings

    https://www.w3.org/TR/css-text-3/#propdef-text-transformReferenced in:

    • 9.1.3.1. Full-width Characters

    https://www.w3.org/TR/css-text-3/#typographic-character-unitReferenced in:

    • 5.1. Orienting Text: the text-orientation property(2)(3)(4)
    • 5.1.1. Vertical Typesetting and Font Features(2)(3)
    • 5.1.2. Mixed Vertical Orientations
    • 9.1. Horizontal-in-Vertical Composition: the text-combine-upright property(2)(3)(4)
    • 9.1.1. Text Run Rules
    • 9.1.2. Layout Rules
    • 9.1.3. Compression Rules(2)(3)(4)(5)(6)
    • 9.1.3.1. Full-width Characters(2)

    https://www.w3.org/TR/css3-values/#angle-valueReferenced in:

    • 5.1.3. Obsolete: the SVG1.1 glyph-orientation-vertical property

    https://www.w3.org/TR/css3-values/#integer-valueReferenced in:

    • 5.1.3. Obsolete: the SVG1.1 glyph-orientation-vertical property

    https://www.w3.org/TR/css3-values/#length-valueReferenced in:

    • 4.4. Baseline Alignment

    https://www.w3.org/TR/css3-values/#percentage-valueReferenced in:

    • 4.4. Baseline Alignment

    https://www.w3.org/TR/css-values-4/#css-wide-keywordsReferenced in:

    • 1.2. Value Types and Terminology

    https://www.w3.org/TR/css-values-4/#font-relative-lengthReferenced in:

    • 1.1. Module Interactions

    https://www.w3.org/TR/css-values-4/#comb-oneReferenced in:

    • 2.1. Specifying Directionality: the direction property
    • 2.2. Embeddings and Overrides: the unicode-bidi property(2)(3)(4)(5)
    • 3.2. Block Flow Direction: the writing-mode property(2)
    • 5.1. Orienting Text: the text-orientation property(2)
    • 5.1.3. Obsolete: the SVG1.1 glyph-orientation-vertical property(2)(3)(4)
    • 9.1. Horizontal-in-Vertical Composition: the text-combine-upright property

    https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-sideways-lrReferenced in:

    • 5.1.2. Mixed Vertical Orientations
    • Changes since the December 2015 CSS Writing Modes Module Level 3 Candidate Recommendation
    • Changes since the March 2014 CSS Writing Modes Module Level 3 Candidate Recommendation
    • Appendix A: Vertical Scripts in Unicode

    https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-sideways-rlReferenced in:

    • Changes since the December 2015 CSS Writing Modes Module Level 3 Candidate Recommendation
    • Changes since the March 2014 CSS Writing Modes Module Level 3 Candidate Recommendation

    https://www.w3.org/TR/CSS21/tables.html#propdef-border-spacingReferenced in:

    • 7.2. Dimensional Mapping

    https://www.w3.org/TR/CSS21/visuren.html#propdef-bottomReferenced in:

    • 7.4. Flow-Relative Mappings

    https://www.w3.org/TR/CSS21/tables.html#propdef-caption-sideReferenced in:

    • 7.4. Flow-Relative Mappings(2)
    • 7.5. Line-Relative Mappings
    • Changes since the March 2014 CSS Writing Modes Module Level 3 Candidate Recommendation

    https://www.w3.org/TR/CSS21/visuren.html#propdef-clearReferenced in:

    • 7.4. Flow-Relative Mappings
    • 7.5. Line-Relative Mappings

    https://www.w3.org/TR/CSS21/visufx.html#propdef-clipReferenced in:

    • 7.6. Purely Physical Mappings

    https://www.w3.org/TR/CSS21/visuren.html#propdef-displayReferenced in:

    • 2.2. Embeddings and Overrides: the unicode-bidi property(2)
    • 2.4.3. Bidi Treatment of Atomic Inlines
    • 3.2. Block Flow Direction: the writing-mode property(2)(3)

    https://www.w3.org/TR/CSS21/visuren.html#propdef-floatReferenced in:

    • 7.4. Flow-Relative Mappings
    • 7.5. Line-Relative Mappings

    https://www.w3.org/TR/CSS21/visudet.html#propdef-heightReferenced in:

    • 7.2. Dimensional Mapping

    https://www.w3.org/TR/CSS21/visuren.html#propdef-leftReferenced in:

    • 7.4. Flow-Relative Mappings

    https://www.w3.org/TR/CSS21/visudet.html#propdef-line-heightReferenced in:

    • 7.2. Dimensional Mapping
    • 9.1.2. Layout Rules
    • Changes since the May 2020 CSS Writing Modes Module Level 3 Candidate Recommendation

    https://www.w3.org/TR/CSS21/visudet.html#propdef-max-heightReferenced in:

    • 7.2. Dimensional Mapping
    • Changes since the December 2020 CSS Writing Modes Module Level 3 Candidate Recommendation

    https://www.w3.org/TR/CSS21/visudet.html#propdef-max-widthReferenced in:

    • 7.2. Dimensional Mapping

    https://www.w3.org/TR/CSS21/visudet.html#propdef-min-heightReferenced in:

    • 7.2. Dimensional Mapping
    • Changes since the December 2020 CSS Writing Modes Module Level 3 Candidate Recommendation

    https://www.w3.org/TR/CSS21/visudet.html#propdef-min-widthReferenced in:

    • 7.2. Dimensional Mapping

    https://www.w3.org/TR/CSS21/page.html#propdef-page-break-insideReferenced in:

    • Changes since the March 2014 CSS Writing Modes Module Level 3 Candidate Recommendation

    https://www.w3.org/TR/CSS21/visuren.html#propdef-rightReferenced in:

    • 7.4. Flow-Relative Mappings

    https://www.w3.org/TR/CSS21/visuren.html#propdef-topReferenced in:

    • 7.4. Flow-Relative Mappings

    https://www.w3.org/TR/CSS21/visudet.html#propdef-widthReferenced in:

    • 7.2. Dimensional Mapping

    https://www.w3.org/TR/css-fonts-3/#propdef-font-feature-settingsReferenced in:

    • 9.1.3.1. Full-width Characters

    https://www.w3.org/TR/css-fonts-3/#propdef-font-variantReferenced in:

    • 9.1.3.1. Full-width Characters

    https://www.w3.org/TR/css3-images/#default-object-sizeReferenced in:

    • 3.2. Block Flow Direction: the writing-mode property

    https://www.w3.org/TR/css-text-decor-3/#propdef-text-decorationReferenced in:

    • 7.5. Line-Relative Mappings

    https://www.w3.org/TR/css-text-decor-3/#propdef-text-shadowReferenced in:

    • 7.6. Purely Physical Mappings

    https://www.w3.org/TR/css3-background/#propdef-box-shadowReferenced in:

    • 7.6. Purely Physical Mappings

    https://www.w3.org/TR/css3-multicol/#multi-column-containerReferenced in:

    • 7.3.2. Auto-sizing Orthogonal Flow Roots

    https://www.w3.org/TR/css3-page/#page-progressionReferenced in:

    • 8. The Principal Writing Mode
    • 8.2. Page Flow: the page progression direction(2)

    https://html.spec.whatwg.org/multipage/sections.html#the-body-elementReferenced in:

    • 8. The Principal Writing Mode

    Terms defined by reference

    • [css-box-3] defines the following terms:
      • margin-bottom
      • margin-left
      • margin-right
      • margin-top
    • [css-break-4] defines the following terms:
      • box-decoration-break
    • [CSS-CASCADE-4] defines the following terms:
      • computed value
      • inherit
      • inheritance
      • used value
    • [CSS-DISPLAY-3] defines the following terms:
      • block container
      • block formatting context
      • block-level
      • containing block
      • display type
      • flow
      • flow-root
      • in-flow
      • independent formatting context
      • initial containing block
      • inline
      • inline box
      • inline-block
      • inner display type
      • replaced element
      • run-in
    • [css-inline-3] defines the following terms:
      • root inline box
      • vertical-align
    • [css-masking-1] defines the following terms:
      • rect()
    • [css-overflow-3] defines the following terms:
      • scrollport
    • [css-ruby-1] defines the following terms:
      • ruby annotation container
      • ruby base container
    • [css-sizing-3] defines the following terms:
      • auto
      • automatic size
      • available block space
      • available inline space
      • available space
      • definite
      • fallback size
      • fit-content size
      • max size
      • max-content inline size
      • max-content size
      • min size
      • min-content inline size
      • min-content size
      • preferred size property
      • stretch-fit inline size
    • [CSS-TEXT-3] defines the following terms:
      • character
      • document white space
      • letter-spacing
      • text-align
      • text-indent
      • text-transform
      • typographic character unit
    • [CSS-VALUES-3] defines the following terms:
      • [css-values-4] defines the following terms:
        • css-wide keywords
        • font-relative lengths
        • |
      • [css-writing-modes-4] defines the following terms:
        • sideways-lr
        • sideways-rl
      • [CSS2] defines the following terms:
        • border-spacing
        • bottom
        • caption-side
        • clear
        • clip
        • display
        • float
        • height
        • left
        • line-height
        • max-height
        • max-width
        • min-height
        • min-width
        • page-break-inside
        • right
        • top
        • width
      • [CSS3-FONTS] defines the following terms:
        • font-feature-settings
        • font-variant
      • [css3-images] defines the following terms:
        • default object size
      • [CSS3-TEXT-DECOR] defines the following terms:
        • text-decoration
        • text-shadow
      • [CSS3BG] defines the following terms:
        • box-shadow
      • [CSS3COL] defines the following terms:
        • multi-column container
      • [CSS3PAGE] defines the following terms:
        • page progression
      • [HTML] defines the following terms:
        • body

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

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

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

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

      Синтаксис

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

      Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Шрифт и текст : writing-mode

      Материал из WebWikiABCD

      Содержание

      Атрибут -ms-writing-mode | Свойство writingMode

      Задает направление символов в строке и порядок следования самих строк.

      Синтаксис

      HTML
      Скрипты [ sFlow = ] object.style.writingMode[ = v ]

      Используемые значения

      sFlow Строка, которая может определять и принимать одно из следующих значений:

      lr-tb Left-right, top-bottom. Значение по умолчанию. Текст следует горизонтально слева направо и сверху вниз. Следующая строка располагается ниже предыдущей. Все символы (глифы) располагаются вертикально. Этот вариант используется для большинства систем записи. rl-tb Right-left, top-bottom. Текст следует горизонтально справа налево и сверху вниз. Следующая строка располагается ниже предыдущей. Все символы (глифы) располагаются вертикально. Используется для следующих языков: арабский, иврит, тана (Thaana — мальдивский язык) и сирийский. tb-rl Top-bottom, right-left. Текст следует вертикально сверху вниз и справа налево. Следующая строка располагается слева от предыдущей. Широкие символы, располагаются вертикально, остальные, в том числе латинские и кана, повернуты на 90 градусов по часовой стрелке. Используется для восточно-азиатских языков. bt-rl Bottom-top, right-left. Текст следует вертикально снизу вверх и справа налево. Следующая строка располагается слева от предыдущей. Широкие символы, располагаются вертикально, остальные, в том числе латинские и кана, повернуты на 90 градусов по часовой стрелке. Используется для восточно-азиатских языков. tb-lr Только в Internet Explorer 8.0. Top-bottom, left-right. Текст следует вертикально сверху вниз и слева направо. Следующая строка располагается справа от предыдущей. bt-lr Только в Internet Explorer 8.0. Bottom-top, left-right. Текст следует вертикально снизу вверх и слева направо. lr-bt Только в Internet Explorer 8.0. Left-right, bottom-top. Текст следует горизонтально слева направо и снизу вверх. Следующая строка располагается выше предыдущей. rl-bt Только в Internet Explorer 8.0. Right-left, bottom-top. Текст следует горизонтально справа налево и снизу вверх.

      Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является lr-tb. Атрибут Каскадных таблиц стилей (CSS) наследуется для всех объектов со следующими исключениями: BUTTON, CAPTION, INPUT, INPUT type=button, INPUT type=file, INPUT type=password, INPUT type=reset, INPUT type=submit, INPUT type=text, ISINDEX, OPTION, TEXTAREA.

      Замечания

      Атрибут -ms-writing-mode для Internet Explorer 8 — это расширение CSS и может использоваться также как writing-mode в режиме IE8.

      Данное свойство не аккумулируется. То есть, если для родительского элемента установлено значение tb-rl для свойства writingMode, то установка значения tb-rl для наследующего элемента не заставит этот элемент повернуться.

      У элемента есть свое собственное размещение, если установленное для него значение свойства writingMode отлично от значения, установленное для его родительского элемента. Если для элемента установлено изменение направления следования текста, то максимальное логическое требование высоты (высота в системе координат этого элемента) строго определено в зависимости от доступного пространства (размер ширины) в системе координат родительского элемента. Основываясь на этой информации, с помощью логической ширины (ширина в системе координат элемента-наследника) рассчитывается максимальное требование высоты. В зависимости от пространства, которое необходимо элементу-наследнику, действительная логическая высота родительского элемента может быть несколько меньше, чем максимальное логическое требование высоты.

      Если вы используете элементы, для которых установлены разные значения свойства writingMode, то вам надо очень внимательно следить за размещением этих элементов, задавая каждому из них фиксированные размеры.

      В Internet Explorer 7.0 значения rl-tb и bt-rl доступны для свойства writingMode.

      В Internet Explorer 7.0 для свойства writingMode элемента body можно задать только два значения: lr-tb и rl-tb.

      Internet Explorer 8.0. До того момента, пока консорциум W3C не включил writingMode в официальную спецификацию, это свойство можно использовать с помощью следующего кода:

      Примеры

      В примере показано как с помощью свойства writingMode встроить горизонтальный текст в вертикальный.

      Стандарты

      Это свойство описано в Дополнении Microsoft к Cascading Style Sheets (CSS)

      CSS3.com — A comprehensive CSS 3 reference guide, tutorial, and blog

      CSS WRITING-MODE

      This property controls the intrinsic writing direction rendering for a block of content. The default is left-to-right, top-to-bottom common in western languages, but the alternate rendering mode is top-to-bottom, right-to-left which is a common rendering mode used in Asian writing systems. The half-width character rotation effect is not cumulative – it is always rotated with respect to the canvas.

      Example
      Possible Values

      lr-tb: Character glyphs flow one after another from the source content from left to right, starting from the top of the element’s rendering box. When a new line is started, it starts below the previous line at the left-hand side of the element’s rendering box.

      tb-rl: Character glyphs flow one after another from the source content from top to bottom, starting from the right side of the element’s rendering box. When a new line is started, it starts to the left of the previous line at the top side of the element’s rendering box. Full-width characters are rendered with their top on the same side as top of the rendering box, and half-width characters (select kana glyphs and western characters) are rendered rotated 90 degrees clockwise to the original rendering box’s orientation.

      Илон Маск рекомендует:  Что такое код mcrypt_enc_get_block_size
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL