# Vertical Text Layout with CSS writing-mode

Arrange text vertically for languages like Chinese and Japanese.

- **Source:** [CSS-Tricks (feeds.feedburner.com)](https://css-tricks.com)
- **Published:** 2026-07-21
- **Topic:** [Software & Engineering](https://brifing.si/c/engineering)
- **Original article:** <https://css-tricks.com/almanac/properties/w/writing-mode/>
- **On Brifing:** https://brifing.si/s/cd491bad-a2a3-4b79-838d-7d99c5685eef

## What is CSS writing-mode?

The CSS writing-mode property determines whether text lines are laid out horizontally or vertically. This feature is particularly useful for languages like Chinese and Japanese that require vertical writing. For example, writing-mode: vertical-rl; aligns text vertically from right to left.

## Use Cases

writing-mode can be used not only for traditional East Asian languages but also in modern web designs. It is ideal for creating vertical navigation menus or artistic text layouts. This property allows text to be presented from a different perspective.

## Benefits of Vertical Text

Vertical text layout allows more content to fit on the screen, especially on mobile devices. It can also be used to enhance user experience and create a unique visual effect. This provides web designers with a new creative tool.

## Browser Support

The writing-mode property is supported by most modern browsers. However, fallback solutions are recommended to avoid issues in older browsers. According to Can I Use data, there may be limitations in older versions of IE and Edge.

## Example Code

A simple example, .vertical-text { writing-mode: vertical-rl; }, aligns text vertically from right to left. This provides a natural reading experience for languages like Chinese and Japanese. Additionally, it can be combined with transform properties to create more complex layouts.

## Conclusion and Recommendations

CSS writing-mode is an essential tool for multilingual websites. Vertical text layout enhances user experience and can be used in projects targeting different cultures. Frontend developers should learn this feature to gain more flexibility in their projects.

## Sources covering this story

- https://css-tricks.com/almanac/properties/w/writing-mode/ — 

---

_Summary written by Brifing from the original reporting. Copyright in the original article belongs to its publisher; read the full piece at the link above._