Introduction

Have you ever wondered how to create an intuitive foundational code base that effortlessly supports the addition of vertical or right-to-left language with just a few keystrokes? Understanding CSS Writing Modes, direction properties, and their impacted attributes is key to achieving this. By mastering these tools, you can develop user interfaces that are not only culturally inclusive but also deeply appreciated by users from diverse linguistic backgrounds.

What is CSS Writing Mode?

CSS Writing Mode is a CSS property that defines the direction of text flow within a block container. It is used to specify whether lines of text are laid out horizontally or vertically, and the direction in which blocks progress. CSS writing Mode has a simple set of three possible values: horizontal-tb, vertical-rl, and vertical-lr. The default value is horizontal-tb, which means that text is laid out horizontally from left to right, and top to bottom. These different values then impact the direction of the following CSS properties:

1. Padding and Margin properties
   • padding-block-start and padding-block-end
   • padding-inline-start and padding-inline-end
   • margin-block-start and margin-block-end
   • margin-inline-start and margin-inline-end
2. Border properties
   • border-block-start and border-block-end
   • border-inline-start and border-inline-end
3. Positioning properties
   • inset-block-start and inset-block-end
   • inset-inline-start and inset-inline-end
4. Text and Alignment properties
   • text-align
   • vertical-align
5. Overflow properties
   • overflow-block and overflow-inline
6. Scroll Snap properties
   • scroll-snap-align

block refers to the top-to-bottom direction, and inline refers to the left-to-right direction in htb languages.

Here is a table of the vertical languages and their writing modes:

Language	Writing Mode in CSS	Description
Japanese	vertical-rl	Traditionally used for literature, manga, and artistic texts. Lines progress from right to left.
Chinese	vertical-rl	Used in traditional texts and calligraphy. Lines progress from right to left.
Mongolian	vertical-lr	Traditional script is vertical, with lines progressing from left to right.
Korean	vertical-rl	Historically used in classical literature, though less common now. Lines progress from right to left.
All other languages	horizontal-tb	Depending on whether the language is right-to-left or left-to-right, the css direction property will impact the layout the most.

What is CSS Scroll Snap?

CSS Scroll Snap is a modern CSS technique that enhances the user's scrolling experience by "snapping" the viewport to certain elements as they scroll. This is particularly useful in creating carousels, image galleries, or any content that you want to encourage users to pause and view.

Example of CSS Scroll Snap of some AI Japanese Art

When dealing with multilingual layouts, especially those with vertical or RTL (Right-to-Left) text, Scroll Snap can significantly improve the user experience. It ensures that the essential content is properly and clearly presented, regardless of the text orientation.

Scroll Snap Properties

scroll-snap-type: This property applies to the container and dictates the strictness of the snapping. For example, scroll-snap-type: x mandatory; ensures that the scroll will always snap to a child element along the x-axis. scroll-snap-align: Applied to child elements, this property determines the element's snap point. For instance, scroll-snap-align: start; will align the start of the element with the start of the scroll container.

Scroll Snap Demo

Below, you'll find an interactive demo that showcases the versatility of CSS variables in controlling scroll direction and scroll snap behavior. As you explore, observe how the layout and scroll behavior dynamically adapt when you switch between languages. This functionality is powered by a JavaScript object containing scroll properties specific to each language. Upon changing the language, the CSS variables are updated, allowing you to see the corresponding changes in the user interface.

Conclusion

To wrap up, our deep dive into CSS Writing Modes and Scroll Snap underscores their pivotal role in crafting web interfaces that are not only functionally robust but also culturally sensitive. By effectively utilizing these CSS properties, developers can seamlessly accommodate diverse text orientations, a crucial aspect in today's increasingly globalized digital landscape.

This exploration is really just the beginning of my journey to understand how to build multilingual layouts. While there may be unique cases that require specialized solutions, understanding the basics of CSS Writing Modes and Scroll Snap lays a solid foundation for developing a multilingual UI that makes your audience feel included.

At the time of this writing, I was intrigued to note the scarcity of vertical websites, even in languages like Japanese or Chinese where such layouts would be highly applicable. By far, most of the ones I found were horizontal. While it seems like they haven't gained widespread popularity yet, it's plausible to anticipate a surge in their use as more developers adopt these techniques. This potential shift could significantly influence future trends in web design, making our journey into these realms even more relevant.

Happy coding!