What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use writing-mode to make text flow vertically, then choose text-orientation to control how characters sit within that vertical line. For the common right-to-left column layout, start with writing-mode: vertical-rl and text-orientation: mixed.
Separate vertical flow from character orientation
writing-mode determines whether lines flow horizontally or vertically and the direction of that flow. text-orientation controls character orientation within a line and only affects vertical typographic modes. The CSS Writing Modes Level 4 specification describes it as the property that “specifies the orientation of text within a line.” W3C CSS Writing Modes Level 4
As an Amazon Associate I earn from qualifying purchases.
For vertical columns progressing from right to left, use vertical-rl. For columns progressing from left to right, use vertical-lr. MDN: writing-mode
Choose a text-orientation value
These examples assume a vertical writing mode. Use the value that matches the scripts and typographic effect you need:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
mixedis the initial value. It keeps characters with intrinsic vertical orientation upright and turns characters used only in horizontal scripts 90 degrees clockwise. It is a practical default for vertical text that mixes scripts.uprightkeeps horizontal-script characters upright. It also has a bidi consequence: the useddirectionbecomesltr, and all characters are treated as strong LTR for bidirectional reordering.sidewayslays text out as horizontally and rotates it 90 degrees clockwise.
The W3C specification explains that most CJK characters have intrinsic vertical orientation. In mixed mode, Unicode vertical-orientation properties determine character orientation; punctuation placement and alternate glyphs can differ from horizontal composition. W3C CSS Writing Modes Level 4
Apply the common patterns
.vertical-copy {
writing-mode: vertical-rl;
text-orientation: mixed;
}
.upright-label {
writing-mode: vertical-rl;
text-orientation: upright;
}
.rotated-run {
writing-mode: vertical-rl;
text-orientation: sideways;
}Change vertical-rl to vertical-lr when columns should progress in the opposite direction. The properties control different aspects: changing text-orientation does not, by itself, turn horizontal text flow into vertical flow.
Account for layout and directionality
Vertical writing mode changes block flow and ordering, not just the appearance of individual glyphs. Recheck element dimensions, spacing, alignment, and assumptions based on physical horizontal and vertical axes. Prefer logical sizing and positioning properties where practical so the layout follows the writing mode.
For RTL or mixed-direction content, test the actual text with the chosen orientation. In particular, upright changes the used direction to LTR for bidi reordering, which can affect runs that otherwise rely on RTL behavior. A visual check should include punctuation, numbers, Latin text, and the scripts the page actually uses.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Check browser support and plan a fallback
MDN marks text-orientation widely available since September 2020 and writing-mode widely available since March 2017, while noting that support for parts of writing-mode varies. Check the precise property value and versions required by your audience. MDN: text-orientation · MDN: writing-mode
Can I Use’s live table reported 96.2% global usage support for text-orientation at the time of the compatibility check; it listed current Chrome, Edge, Safari, and Firefox versions as supporting it, and IE 11 and Opera Mini as unsupported. This is a changing global estimate, not a guarantee for a particular audience or every value. Check the current table before setting a support policy. Can I Use: text-orientation support
For unsupported sideways-lr, MDN documents a transform-based workaround and warns that rotation can produce unexpected positioning or rendering. It notes that vertical-rl has the same effect as sideways-lr for left-to-right scripts; in some cases a 180-degree rotation may be enough. Verify glyph shape, dimensions, wrapping, and alignment in each target browser rather than assuming a transform is equivalent in every layout. MDN: writing-mode
Recommended Free Tools
Verify the result in target browsers
- Choose the column progression:
vertical-rlfor right-to-left columns orvertical-lrfor left-to-right columns. - Choose character treatment: mixed orientation for script-sensitive upright and rotated glyphs, upright for keeping horizontal-script characters upright, or sideways for rotating the horizontal layout.
- Test representative content, including CJK characters, Latin runs, punctuation, numbers, and RTL or mixed-direction text if present.
- Check layout dimensions, wrapping, alignment, and punctuation rendering in the browsers and versions your site supports.
- If using an older browser fallback or a transform for
sideways-lr, verify the transformed element’s positioning and glyph appearance separately.
Or skip the browser setup
If your goal is to capture how a page renders, ScreenshotNeo can return a screenshot or PDF with one request. It accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server includes screenshot, page-info, and PDF tools for AI agents.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. Sign up for 1,000 free screenshots a month, with no card required.
Quick Recap
Best Value
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.
