Thanks for this very insightful article.

I’m not sure if this is a thing, but there might be browsers that support `transform: rotate(180deg)` but not `writing-mode: vertical-rl`. To be sure that the text will only be rotated when displayed vertically, you might want to wrap it in a `@supports` rule:

@supports(writing-mode: vertical-rl)
{ h1 { writing-mode: vertical-rl; transform: rotate(180deg); text-align: right; }
}

Sometimes in the article it says “language directions” and the like which should be read as “script directions”.

“Languages don’t have a direction. Scripts have a writing direction, and so languages written in a particular script, will be written with the direction of that script.
“Languages can be written in more than one script. For example, Azeri can be written in any of the Latin, Cyrillic, or Arabic scripts. When written in Latin or Cyrillic scripts, Azeri is written left-to-right (LTR). When written in the Arabic script, it is written right-to-left.”
—Richard Ishida, Script direction and languages

Wow. Thank you for the tip that what I have been trying to achieve is possible in Firefox with:

@writing-mode: sideways-lr;@

I am using a
between two words- imagine that your example 4B would be:

Winter
Hiking

I find that to duplicate the sideways-lr effect for all browsers using your “hack,” one would use:

bc. writing-mode: vertical-rl; text-align: left; transform: rotate(180deg);

Your example 4B uses:

@text-align: right;@

This is more obvious by changing your example 4B to “Winter Hikes” rather than the equal-#-of-letters “Winter Hiking”

Thank you so much for your explorations- truly amazing to run into your guide for achieving exactly what I have been struggling with, found via a link to the 24 Ways article via Rachel Andrew’s newsletter. I am an amateur, and this is my first writing in Textile, so I hope I have done that correctly.

For Japanese books or magazines, if the direction of the page is RTL, its base content is “vertical-rl”. In other words, the base writing mode of Vogue magazine is “vertical-rl” and photo and many horizontal texts are mixed in it.

I mean, your alternative is the regular style for Vogue magazine.

html { writing-mode: vertical-rl;
}
h2, .photocaptions, section { writing-mode: horizontal-tb;
}