Text

Text Orientation

Can I use ?Can I use ?
classproperties
text-orientation:valuetext-orientation: value
text:mixedtext-orientation: mixed
text:sidewaystext-orientation: sideways
text:sideways-righttext-orientation: sideways-right
text:uprighttext-orientation: upright
text:use-glyph-orientationtext-orientation: use-glyph-orientation

Overview

The text-orientation CSS property sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.

<div class="">

Ladies and gentlemen, the first Virtual CSS came to the world.It will crush all CSS and UI libraries, and subvert your understanding of traditional CSS technology. Keep up with the latest technological trends, he will greatly improve Web interaction and execution efficiency.

<p class="t:mixed ...">
    Ladies and gentlemen, the first Virtual CSS came to the world.It will crush all CSS and UI libraries,
    and subvert your understanding of traditional CSS technology. Keep up with the latest technological trends,
    he will greatly improve Web interaction and execution efficiency.
</p>

Applying with functions

<div class="text-orientation:$(value)">...</div>

Master supports native CSS variables and functions, just add var(--key) or use shorthand$(key) for variables.

You can also use calc(expression), env(expression) and other CSS functions if the property supports it.

To learn more, see the Functions documentation.

Conditionally apply

States and selectors

<div class="text-orientation:mixed:hover">...</div>

Master supports all native CSS selectors, just add :hover, :disabled, chaining, combinators and other CSS selectors as usual.

To learn more, see the Selectors documentation.

Responsive breakpoints

<div class="text-orientation:mixed@sm">...</div>

Responsive breakpoints can be applied to all styles. Some available breakpoints are 3xs, 2xs, xs, sm,md, lg, xl, 2xl, 3xl, 4xl. Arbitrary breakpoints can be specified through comparison operators >, >=, <, <=.

To learn more, see the Breakpoints documentation.

<div class="text-orientation:mixed@print">...</div>

Master supports media types like print, screen, speech, all, and other media queries.

To learn more, see the Media Queries documentation.

Dark mode and color schemes

<div class="text-orientation:mixed@dark">...</div>

Master uses the selector html.dark to support color schemes. Now, you can easily fine-tune your style for the color schemes.

To learn more, see the Color Schemes documentation.


© Aoyue Design LLC.
Issue on this page
Edited byAronLola