Writing Mode Tester
Test how text renders in different CSS writing modes, directions, and text orientations. Choose from horizontal-tb, vertical-rl, and vertical-lr, toggle between LTR and RTL direction, and set text orientation for vertical layouts. Enter your own text or use a sample, adjust font size, and see a live preview with copyable CSS output. Fully private, 100% free, and no signup required.
Test how text renders in different CSS writing modes, directions, and text orientations. Preview horizontal, vertical-RTL, and vertical-LTR layouts with custom text and font sizes.
Preview
.writing-mode-demo {
writing-mode: horizontal-tb;
direction: ltr;
font-size: 18px;
}Why Use Our Writing Mode Tester?
Test All Writing Modes Side by Side
Compare horizontal-tb, vertical-rl, and vertical-lr CSS writing modes instantly. The comparison view shows all three modes simultaneously so you can see exactly how your text renders in each layout without toggling back and forth.
LTR and RTL Direction Support
Test text in both left-to-right (LTR) and right-to-left (RTL) directions. Toggle between directions with a single click to see how your content flows for different language audiences including Arabic, Hebrew, and Persian scripts.
100% Private Browser Processing
All writing mode previews are rendered entirely in your browser using native CSS. Your text is never sent to any server, never stored, and never transmitted anywhere. Your content stays completely private.
Free Forever, No Signup Required
Test unlimited writing mode combinations at no cost. No premium tiers, no usage limits, no hidden charges. Use the writing mode tester for personal or commercial projects without creating an account.
Common Use Cases for Writing Mode Tester
Multi-Language Website Design
Design layouts that support both horizontal and vertical writing systems. Test how your Japanese, Chinese, or Korean content flows in vertical-rl mode alongside your English content in horizontal-tb mode for truly international web designs.
RTL Layout Development
Develop and test right-to-left (RTL) interfaces for Arabic and Hebrew websites. Quickly toggle between LTR and RTL directions to verify that your layout properly mirrors navigation, text alignment, and reading order.
UI Component Testing for Vertical Text
Test how UI components like buttons, labels, navigation menus, and sidebar titles look when rendered with vertical writing modes. Ensure proper spacing, alignment, and readability before deploying to production.
Digital Publishing & E-Books
Preview how digital publications and e-books render in vertical writing modes. Test mixed-script content with Japanese, Chinese, and English text to ensure proper text orientation and reading flow across different layouts.
Typography Research & Education
Learn and teach the differences between CSS writing modes, text orientations, and direction values. See real-time visual examples of how each property changes text layout, making it ideal for CSS education and typography workshops.
CSS Code Generation for Production
Generate clean, production-ready CSS snippets for your writing mode implementations. Once you find the perfect combination, copy the CSS properties directly into your stylesheets with a single click.
Understanding CSS Writing Modes
What Are CSS Writing Modes?
CSS writing modes define the direction in which text flows on a web page. The writing-modeCSS property controls whether text runs horizontally (left to right) or vertically (top to bottom). Combined with the direction and text-orientation properties, writing modes enable full support for the world's diverse writing systems - from English and Arabic to Japanese and Mongolian - all within a single web page layout.
How Our Writing Mode Tester Works
- Select a Writing Mode: Choose from three CSS writing-mode values - horizontal-tb (default horizontal layout), vertical-rl (vertical right-to-left, traditional East Asian), or vertical-lr (vertical left-to-right, modern or Mongolian script).
- Configure Direction and Orientation: Set the text direction to LTR or RTL, and for vertical modes, choose the text orientation - mixed (default), upright (all characters stay vertical), or sideways (all characters rotated).
- Preview and Copy: Enter your own text or use a sample, adjust the font size, and see a live preview. The CSS output block shows the complete property set ready to copy into your stylesheets.
Key CSS Properties Explained
- writing-mode: The primary property that sets the block flow direction.
horizontal-tbis the default for most languages.vertical-rlflows text top-to-bottom with lines right-to-left.vertical-lrflows top-to-bottom with lines left-to-right. - direction: Controls the inline base direction (ltr or rtl). In vertical modes, direction affects the order of lines rather than characters. Essential for Arabic and Hebrew support.
- text-orientation: Only applies in vertical writing modes.
mixed(default) rotates Latin/Cyrillic characters 90° while keeping CJK characters upright.uprightkeeps all characters in their normal orientation.sidewaysrotates all characters 90°.
Privacy, Security & Availability
All writing mode previews are rendered entirely in your browser using native CSS. Your text never leaves your device - it is not sent to any server, stored, or transmitted. The writing mode tester is completely free with no signup required, no usage limits, and no premium features. Test unlimited writing mode combinations for personal or commercial projects.
Related Tools
CSS Cursor Tester
Preview all 38 standard CSS cursor styles on hover and copy the CSS declaration with one click. Filter by category and search by cursor name.
Font Size Converter (PX to EM to REM)
Convert font sizes between px, em, rem, %, pt, and vw. Set a base font size and instantly see all equivalent values with live preview.
Line Height Calculator
Calculate optimal line-height based on font-size and font-family. Shows px, unitless, and percentage values with live typography preview.
Text Orientation Tester
Test CSS text-orientation property values including mixed, upright, and sideways. See how different scripts behave in vertical writing modes.
Frequently Asked Questions About Writing Mode Tester
A CSS writing mode defines the direction in which text flows on a web page. The writing-mode CSS property controls whether text runs horizontally (horizontal-tb), vertically right-to-left (vertical-rl), or vertically left-to-right (vertical-lr). Writing modes are essential for supporting East Asian languages, Arabic and Hebrew scripts, and creating typographically rich layouts.
Select a writing mode (horizontal-tb, vertical-rl, or vertical-lr), choose a direction (LTR or RTL), and optionally set a text orientation for vertical modes. Enter your own text or pick a sample from the preset buttons. The preview updates in real time. Use Comparison View to see all three writing modes side by side. Copy the generated CSS snippet with one click.
Traditional Japanese, Chinese (Traditional), and Korean are the primary languages that use vertical writing modes (vertical-rl). In vertical layout, text flows from top to bottom, and lines progress from right to left. Modern usage often mixes horizontal and vertical writing, and CSS writing modes handle both seamlessly.
Yes, completely safe. All writing mode previews render entirely in your browser using native CSS. Your text is never uploaded to any server, never stored, and never transmitted anywhere. The writing mode tester processes everything locally on your device for complete privacy.
The text-orientation property only applies in vertical writing modes. "mixed" (the default) rotates Latin characters 90° while keeping CJK characters upright for natural reading. "upright" keeps all characters in their normal orientation without rotation. "sideways" rotates all characters 90°, regardless of script type.
Yes. The CSS snippet generated by the writing mode tester uses standard CSS properties (writing-mode, direction, text-orientation) that are well-supported in modern browsers. Just copy the CSS properties and paste them into your stylesheets for immediate use in production web projects.
Yes. The Writing Mode Tester is 100% free with no signup required, no premium features, and no usage limits. Test unlimited writing mode combinations without any restrictions or hidden costs. There are no ads blocking the interface.
The Comparison View shows all three writing modes - horizontal-tb, vertical-rl, and vertical-lr - side by side in a three-column layout. Each column includes its writing-mode CSS property label and a description, making it easy to compare how the same text renders differently in each mode. Toggle it on or off with a single click.