CSS text-orientation: How to Control Text Direction

text-orientation controls how characters are drawn inside lines that already flow vertically. It does not make horizontal text vertical by itself. Set writing-mode to a vertical mode, then choose mixed, upright, or sideways to control glyph orientation.

<p class="vertical-label">縦書き Vertical text</p>

.vertical-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

With mixed, characters with vertical forms remain upright while many Latin characters are set sideways. Use upright to keep every glyph upright, or sideways to rotate the line. See the MDN reference for text-orientation and the ScreenshotNeo API docs.

1. How writing-mode and text-orientation work together

These properties handle different parts of vertical layout:

writing-mode establishes whether lines flow horizontally or vertically, and sets the block flow direction.
text-orientation determines how typographic characters are oriented within vertical lines.
direction contributes inline ordering and bidirectional text behavior.

For example, writing-mode: vertical-rl makes lines run vertically and stacks successive lines from right to left. text-orientation then decides whether character units appear upright or rotated. Changing text-orientation without a vertical writing mode will not turn ordinary horizontal text into vertical text.

2. Choose a text-orientation value

Value	Behavior	Good fit
`mixed`	Initial value. Uses Unicode vertical-orientation data to determine which typographic character units stay upright and which are set sideways.	Mixed-script vertical typesetting, including Japanese text with Latin terms or numbers.
`upright`	Keeps glyphs upright. The used `direction` value is forced to `ltr`.	Short labels, vertical headings, or designs where each character should read upright.
`sideways`	Lays out text horizontally and rotates the whole line 90 degrees clockwise.	Vertical side labels where a horizontal word should be rotated as a unit.

sideways-right is an alias for sideways retained for compatibility. The legacy use-glyph-orientation keyword applies to SVG compatibility with deprecated glyph-orientation properties; it is not part of the current formal syntax shown by MDN.

As the W3C CSS Writing Modes Level 4 specification puts it: “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.”

3. Runnable examples

Mixed-script vertical text

This is a practical default when a vertical-script language and Latin text share a block. The browser uses character orientation data to handle the mix.

<article class="vertical-mixed" lang="ja">
  <p>縦書きの見出し</p>
  <p>CSS 2026</p>
</article>

.vertical-mixed {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1.8;
}

Keep every character upright

<h2 class="vertical-upright">VERTICAL LABEL</h2>

.vertical-upright {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

Because upright forces the used direction to ltr, check the result carefully if the content mixes right-to-left scripts or uses bidirectional text.

Rotate a horizontal label as a unit

<span class="vertical-side-label">Specifications</span>

.vertical-side-label {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

Select the vertical flow direction

.right-to-left-columns {
  writing-mode: vertical-rl;
}

.left-to-right-columns {
  writing-mode: vertical-lr;
}

Both values establish vertical flow; they differ in the block progression direction. Choose based on the layout and language convention you need, then verify line order in the actual component.

4. Common layout decisions and edge cases

Set both properties deliberately. Treat writing-mode as the flow choice and text-orientation as the glyph-orientation choice.
Mixed scripts: mixed relies on Unicode vertical-orientation data for typographic character units. The exact result follows that data and the font’s available glyphs.
Bidirectional content: Test punctuation, numbers, and embedded right-to-left text. upright forces the used direction to ltr.
Specialist sideways scripts: Unicode’s Vertical_Orientation property does not cover scripts that rotate 90 degrees counterclockwise in vertical contexts. The specification advises considering writing-mode: sideways-lr for those cases.
Inheritance: text-orientation is inherited, so a value on a parent can affect descendants. Override it on nested content if needed.
Applicability: The property applies to elements except table row groups, rows, column groups, and columns.
Animation: It is not animatable.

5. Troubleshooting

Symptom	Likely cause	Fix
Text remains horizontal.	`text-orientation` was set without a vertical writing mode.	Set `writing-mode: vertical-rl` or `vertical-lr` on the text container.
Latin words are rotated in a mixed vertical block.	The current value is `mixed`, which may orient Latin units sideways.	Use `upright` if every glyph must stand upright, or revise the design if whole words should rotate together.
Every Latin letter is stacked upright.	`upright` is active, directly or by inheritance.	Use `mixed` for character-specific vertical orientation or `sideways` for a rotated line.
Text direction changes unexpectedly.	`upright` forces the used `direction` to `ltr`.	Test bidirectional runs and select a mode that fits the content’s direction requirements.
Nested content has a different orientation than expected.	`text-orientation` is inherited from an ancestor.	Inspect computed styles and set an explicit value on the nested element.
Layout differs between browsers or writing modes.	Support for the specific related writing-mode value may differ from the broad support summary for this property.	Check the live compatibility information for the exact values and browsers you target, then test the rendered component.

6. Browser support, performance, and reliability

MDN classifies text-orientation as Baseline Widely available, with broad availability across browsers since September 2020. This is a summary for this property; it does not establish identical support for every writing-mode value or related feature. Check browser compatibility for the exact layout you ship.

The property is a layout and text-rendering choice rather than a network or capture operation. Keep vertical writing rules scoped to the components that need them, and verify line wrapping, overflow, punctuation, and glyph availability with the fonts and text your page actually uses. The property itself is not animatable.

7. Inspect the rendered result with a screenshot

Vertical typography can be hard to judge from CSS alone: line flow, fallback fonts, punctuation, and overflow only become clear in the rendered page. You can capture a page using browser automation, or use a screenshot API to inspect a URL. ScreenshotNeo is a website screenshot API and MCP server from Yorker Media; its [docs](https://screenshotneo.com/docs/) describe the request options.

Do it yourself with a browser

For a local page, open it in a browser and inspect the element’s computed writing-mode and text-orientation. To capture a rendered page programmatically with Playwright, install it with npm install playwright, install a browser with npx playwright install chromium, then save this as capture.mjs:

import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: true });
try {
  const page = await browser.newPage({ viewport: { width: 1280, height: 900 } });
  await page.goto('http://localhost:3000', { waitUntil: 'networkidle' });
  await page.screenshot({ path: 'vertical-text.png', fullPage: true });
} finally {
  await browser.close();
}

For a browser-based check, inspect a public page URL in more than one viewport and test each writing mode and text-orientation combination used by the design.

8. Or skip the browser setup

Send one GET request to capture a page as an image. Replace the target URL and API key. See the ScreenshotNeo API documentation for the supported parameters.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

ScreenshotNeo accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots.

9. FAQ

Does text-orientation work in horizontal writing?

It controls orientation in vertical writing. Use writing-mode to establish vertical flow first.

Which value should I start with for Japanese vertical text?

Start with mixed when the block may include Latin text, then check the rendered result for the content and font you use.

Is upright the same as rotating a word?

No. upright keeps glyphs upright, while sideways rotates the line as a whole.

Does text-orientation change the writing direction of the block?

No. writing-mode establishes the layout flow. text-orientation controls glyph presentation inside that flow.