CSS writing-mode works in current Chrome, Firefox, and Safari for common values such as vertical-rl and vertical-lr. Differences are more likely with less common values such as sideways-lr, older browsers, or character orientation. Use a readable baseline, check support for the exact value you need, and test the resulting layout in your target browsers.
What writing-mode changes
MDN defines writing-mode as the property that sets whether text lines are laid out horizontally or vertically and the direction in which text flows. It also affects block flow and the ordering of blocks; it is not simply a text-rotation switch. For a document-wide writing mode, MDN recommends setting it on the root html element. See MDN’s writing-mode reference.
horizontal-tb: horizontal lines; block flow proceeds from top to bottom.vertical-rl: vertical lines; block flow proceeds from right to left.vertical-lr: vertical lines; block flow proceeds from left to right.sideways-rlandsideways-lr: sideways text orientations; support is less uniform.
writing-mode works alongside direction and text-orientation. Vertical writing is used by scripts including Chinese, Japanese, and Korean, but the right combination depends on the intended language, glyphs, and layout.
Browser support: check the exact value
MDN describes writing-mode as widely available across browsers since March 2017, while noting that support varies for some parts of the syntax. Can I Use’s global estimates for August 2026 are 97.26% for the general property, 96.84% for vertical-rl, and 96.2% for text-orientation. Can I Use credits the underlying usage-share data to StatCounter GlobalStats. These are global estimates, not a guarantee for your site’s users or region.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
| Feature | Support details reported by Can I Use | Important qualification |
|---|---|---|
writing-mode overall |
97.26% global usage estimate, August 2026 | Internet Explorer is listed with partial support; Opera Mini is listed as unsupported. |
vertical-rl |
96.84% global usage estimate, August 2026; Chrome 48+, Firefox 43+, Safari 9+ | Internet Explorer 6–11 are listed as unsupported. |
text-orientation |
96.2% global usage estimate, August 2026; Chrome 48+, Firefox 41+, Safari 10.1+ | Internet Explorer 11 is listed as unsupported. |
Sources: Can I Use: CSS writing-mode, Can I Use: vertical-rl, and Can I Use: text-orientation. The listed browser versions apply only to the feature or value in that row. Do not infer that every sideways-* value, text-orientation combination, embedded web view, or operating-system configuration behaves identically.
Choose the property that matches the problem
Use writing-mode for line and block flow
Choose vertical-rl or vertical-lr based on which direction blocks should progress. This changes the writing layout, not just the appearance of rotated letters.
Rank #2
Use text-orientation for glyph orientation
text-orientation controls how characters are oriented within a line and has an effect only in vertical writing. Its standard values include mixed, upright, and sideways. If the lines and block flow are correct but characters appear the wrong way around, adjust this property rather than changing the writing mode. See MDN’s text-orientation reference.
Build a baseline and enhance it safely
Keep text readable if a browser does not support the desired value. Apply a baseline first, then use a feature query to opt into a less widely supported presentation. MDN documents this pattern for sideways-lr:
.label {
writing-mode: horizontal-tb;
}
.unsupported-notice {
display: block;
}
@supports (writing-mode: sideways-lr) {
.label {
writing-mode: sideways-lr;
}
.unsupported-notice {
display: none;
}
}Feature queries test whether the browser accepts the specified declaration; they do not prove that the complete layout looks right in every font or script. Use the baseline to provide a usable alternative, and validate the enhanced result visually.
When a transform is an acceptable fallback
MDN documents transform as a possible workaround for unsupported sideways-lr behavior. A 180-degree rotation can be sufficient in some cases, but it rotates the rendered box rather than reproducing writing-mode’s flow behavior. A font’s glyphs may not be designed to rotate, so positioning or rendering can be unexpected. Treat rotation as a narrow visual fallback, not a general replacement for writing-mode. See MDN’s sideways issues guidance.
Debug a cross-browser mismatch
- Identify the failing declaration. Check the exact value, such as
vertical-rlorsideways-lr, rather than asking only whether the browser supportswriting-modegenerally. - Compare target browser versions. Use value-specific compatibility data, especially if you need a sideways value,
text-orientation, or Internet Explorer support. - Separate flow from character orientation. Confirm that block progression is correct before changing
text-orientation; the two properties control different things. - Provide a baseline and gate the enhancement. Use
@supportsfor less widely supported values, and ensure unsupported browsers still show readable content. - Test real content in target browsers. Inspect mixed-script text, the actual font and glyphs, sizing, and surrounding layout. If using a transform, check both glyph orientation and placement.
- Use your audience’s browser mix. Global compatibility percentages cannot establish the needs of your own users.
Or skip the browser setup
If documenting a page’s rendering is part of your workflow, ScreenshotNeo is a website screenshot API and MCP server. A single request can return a screenshot or PDF; it can also remove cookie banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, and failed loads are never billed, and an MCP server lets AI agents take screenshots. For the API options and setup, see the ScreenshotNeo documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode -o shot.webpScreenshotNeo includes 1,000 screenshots a month free with no card; paid plans start at $5 for 3,000. Sign up for free.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
