Vertical Text Layout with CSS writing-mode
Arrange text vertically for languages like Chinese and Japanese.
1What 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.
2Use 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.
3Benefits 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.
4Browser 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.
5Example 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.
6Conclusion 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.
Original article: CSS-Tricks (feeds.feedburner.com) — CSS writing-mode ile Dikey Metin Düzeni