A Complete Guide To CSS Text Orientation

Mbaziira Ronald

Posted On: July 21, 2023

view count220647 Views

Read time15 Min Read

As the Internet connects people from diverse linguistic backgrounds and cultures, ensuring that websites’ content is user-friendly and understood by all is vital. Presenting a website’s text in a way that caters to different languages improves its accessibility and inclusivity.

You can use CSS text orientation properties to improve a website’s text readability, layout, and navigation, such as text-orientation. Similarly, you can use the same properties to improve the website’s responsiveness.

Furthermore, in the case of a customer-facing website (e.g., B2C/B2B/B2B2C), reaching a wider audience means widening the potential customers for your product. However, people in other parts of the world should first be able to contextually understand your website’s content to be considered potential customers. This is where CSS text orientation proves to be very powerful.

In this blog, we’ll see how you can use CSS text orientation properties to improve the accessibility, inclusivity, and overall responsiveness of your website.

What is CSS Text Orientation?

CSS text orientation refers to using CSS properties to determine the direction or positioning of lines or individual text characters on a webpage.

The two main properties for controlling CSS text orientation are the writing-mode and text-orientation properties. The writing-mode property lets you align lines of text vertically or horizontally, whereas you can rotate or flip text characters with the text-orientation property.

Let’s first look at some of the salient use cases of this particular CSS property.

Use Cases of CSS Text Orientation

As several use cases of CSS text orientation exist, we will limit the content to only the major ones:

Responsive web layouts

You can make web pages responsive using CSS text orientation, mainly when screen real estate is limited, like on mobile devices. You can do this by putting text vertically and returning it to a horizontal position when there is more screen real estate.

In the image below, on TheVerge’s website, the category words GAMING are vertically positioned sideways, utilizing the small screen real estate.

TheVerge's website

Source

Similarly, CSS text orientation can be convenient on mobile devices with limited screen real estate. The word Tech is also vertically positioned sideways to utilize the limited space.

The word Tech

Source

In the above mobile view of TheVerge’s website, I have used LT Browser 2.0 to render the website.

LT Browser 2.0 is a dev-friendly mobile next-generation browser built by LambdaTest to test your responsive web layout for CSS text orientation across 53+ pre-installed viewports for mobile, tablet, desktop, and laptops. This lets you ensure that text orientation does not break even if the webpage is rendered on various screen resolutions.

To get additional details about LT Browser 2.0, refer to our below video tutorial.

Catch up on the latest testing tutorials around Selenium automation, Cypress testing, and more. Subscribe to the LambdaTest YouTube Channel for quick updates.

Readability

Appropriately oriented text can improve text contrast and readability. By giving the text, such as headings and subheadings, a different directional flow, you can visually separate the content, making navigating through the content effortless and finding information quicker.

The below example on Elegantseagulls directs the user to navigate orderly through the vertically oriented navigation items from Creative to Research.

via GIPHY

Info Note

Unleash the potential of your CSS-based web apps on real devices. Try LambdaTest Today!

Localization and multilingual web support

Website localization refers to adapting a website to a specific culture or region of its language, content, date and time, and other aspects. Language localization, in particular, means translating a website’s content to the local language of a specific region or country in a contextually accurate manner.

If you are new to localization and want to know its role in the testing landscape, please check this localization testing tutorial.

In contrast, multilingual web support refers to a website’s ability to render and function appropriately in multiple languages.

Language localization and multilingual web support was major factor in the introduction of CSS text orientation properties such as writing-mode, as evidenced by the words of Dr. Jun Murai, a W3C steering committee member, “Thanks to incredible internationalization work and the help of many Asian countries working together, we have reached the momentous point where CSS enables international writing modes on the web.”

For example, when adapting a website in English to languages supporting vertical scripts like Chinese and Japanese, the website’s writing-mode can be changed from horizontal-tb to vertical-rl. CSS text orientation properties aid in making the above possible.

Content hierarchy and structure

You can use CSS text orientation to clearly show your content’s hierarchy flow, thus making it easy for the reader to follow and understand.

Once the readers find the content easy to follow and understand, there is a higher chance of returning to the same website for more content or a similar user experience.

Due to having a vertical orientation, the social media links on the left below clearly stand out from the rest of the text on the page. This makes them easy to find and helps the user navigate to their destination.

vertical orientation

Browser Compatibility for CSS Text Orientation Effects

Before implementing CSS text orientation effects, you need to know the cross browser compatibility of the properties to ensure your content renders correctly and to provide a good user experience to the website visitors.

All the latest versions of major browsers like Chrome, Safari, and Firefox support the CSS text orientation properties. Look at the images below to get a clear view of the support of these properties.

clear view of the support of these properties

Browser Compatibility – CSS writing-mode property

CSS text-orientation property

Browser Compatibility – CSS writing-mode property

Getting Started with CSS Text Orientation

CSS provides several properties you can use to orient text. However, we shall limit the scope of this blog to two major properties, writing-mode and text-orientation.

Before we look at the above two properties in detail, let me familiarize you with an essential concept of writing modes regarding block flow direction and inline base direction.

Block flow direction refers to the horizontal (RTL or LTR) and vertical (top to bottom) direction in which block-level boxes and line boxes stack within a block container. For languages, it refers to how lines of text stack.

For example, English has a top-to-bottom block flow direction, whereas traditional Japanese has an LTR block flow direction.

To know more about this, read the blog on CSS logical properties.

Inline base direction refers to the primary direction of content in each line of text. It can be horizontal or vertical. For example, Mongolian has a top-to-bottom inline base direction, whereas English has a left-to-right.

Image 1 below shows the Inline base and block flow direction of left-to-right text content, while image 2 shows the block flow and Inline base direction of right-to-left text content.

Inline base and block flow direction

block flow and Inline base direction

Source

One reason for orienting text is to cater to different writing systems, and the CSS Writing Modes Specification can handle four writing systems. Let’s brief them.

Latin-based systems

The system includes all languages that use the Latin alphabet, such as German, Spanish, and English. Their text runs horizontally from left to right (LTR). The Latin-based system also includes Greek and Cyrillic systems with languages such as Greek and Russian.

Arabic-based systems

The text for Arabic-based systems runs horizontally from right to left. It includes languages such as Arabic, Hebrew, and Persian.

Arabic-based systems

Source

Below is a side-by-side image of a CSS Wikipedia page, one in English and the other in Arabic, showing how LTR and RTL languages compare.

side-by-side image of a CSS Wikipedia page

Mongolian-based systems

Text runs vertically from left to right with a top-to-bottom inline base direction. It mainly includes the Mongolian language.

Mongolian-based systems

Source

Han-based systems

This system includes languages such as Chinese, Japanese, and Korean. You can lay out these languages like Latin-based ones. However, they are traditionally written vertically from right to left.

Han-based systems

Source

The image above shows page 13 of the Meiji Constitution of Japan. The writing goes from LTR, going from top to bottom.

Now that we have seen the writing modes and systems, let’s explore the CSS text orientation properties of writing-mode and text-orientation.

CSS writing-mode property

The writing-mode property defines the horizontal and vertical layout of lines of text or block flow direction.

The property has three values:

  • horizontal-tb
  • vertical-lr
  • vertical-rl

Syntax

The two writing-mode property values of sideways-lr and sideways-rl are experimental as of the date of writing this blog and have little browser support. Thus, you shouldn’t use them in production.

Let’s explore the above three property values and how they work

Horizontal-tb

This value defines a vertical block flow direction for lines of text going from top-to-bottom. It is the default value of the writing-mode property, and one does not need to define it when using horizontal script languages like English on a website.

HTML:

CSS:

Output:

See the Pen
CSS writing-mode property – horizontal-tb
by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Browser Preview:

Browser Preview

In the above browser output, you will notice that horizontal-tb does not affect our page title and description since English is a horizontal script language.

Vertical-lr

The vertical-lr value stacks lines of text horizontally, from left to right. The start of the line is at the top, while its end is at the bottom. The Mongolian language uses this layout.

The value applies the same effect when you use it on horizontal script languages.

HTML:

CSS:

Output:

See the Pen
CSS writing-mode property – Vertical-lr
by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Browser Preview:

Browser Preview

In the above example, we have laid each blog article’s category vertically from top-to-bottom.

Vertical-rl

The vertical-rl value stacks lines of text horizontally, going from right to left. It is most common in Chinese, Korean, and Japanese languages.

Take a look at the example below for a better understanding.

HTML:

CSS:

See the Pen
CSS writing-mode – vertical-rl
by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Browser Preview:

Browser Preview:

The above browser output shows on the left different types of testing on LambdaTest Learning Hub and the same in Japanese on the right. Notice how Japanese text lines vertically run from right to left.

I have used an online free language translator, DeepL, on demos of vertical script languages to translate LambdaTest’s content in those languages.

The image below shows how vertical-rl lays the h1 vertically on the right side of the page. It saves time and leads to a more responsive website layout as you can lay out text vertically where screen real estate is limited.

vertical-rl

Source

CSS text-orientation property

The CSS text-orientation property defines the orientation or bearing of text characters in a line. The property only works when the value of the writing-mode property is not horizontal-tb.

The property has three values mixed, upright, and sideways.

Syntax

Let’s examine how each of the above three values works.

Mixed

The mixed value rotates the text characters of horizontal scripts by 90° and lays out those of vertical scripts normally. It is the default value of the text-orientation property.

Let’s take a look at this value in action.

HTML:

CSS:

See the Pen
CSS text-orientation property – mixed
by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Browser output:

Browser output:

In the image above, the effect on the title, LambdaTest: HyperExecute, by the text-orientation: mixed, may not appear visible as it was already in vertical mode. The content in Japanese on the right lies naturally.

In the image below, Edesigninteractive gives the company’s copyright a CSS text orientation of mixed after giving it a vertical orientation mode, clearly communicating the agency’s aim to create and merge innovative ideas with beautiful designs.

Edesigninteractive

Source

CSS text orientation

Upright

The writing-mode property value of upright lays out characters of horizontal script languages naturally. It considers all characters, even vertical characters, to be LTR.

The example below shows what it can do.

HTML:

CSS:

See the Pen
CSS text-orientation property – upright
by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Browser Preview:

Browser Preview:

The eye-catching effect below on 9elements.com uses an upright CSS text orientation on its section headings.

9elements.com

9elements.com

The sideways value lays characters as they should be horizontal, with the entire line rotated 90°. This value has an alias of sideways-right used for browsers that don’t yet support this value.

HTML:

CSS:

See the Pen
CSS text-orientation property – sideways
by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Browser Preview:

Browser Preview:

Testing CSS Text Orientation for Cross Browser Compatibility

CSS text orientation enables businesses and organizations to expand and cover more ground as they use its properties to localize their websites’ content to cater to the different languages of countries and regions they have grown to.

However, after implementing the CSS text orientation designs and effects, one needs to know how the many different browsers and devices will render these effects the website users utilize to ensure everything is as expected, and this is where cloud-based digital experience testing platforms like LambdaTest come in. It allows you to test CSS text orientation effects on an online browser farm of 3000+ real browser environments.

With LambdaTest, you can do different types of testing, such as cross browser compatibility, responsive testing, and real time testing.

For example, while doing real-time cross browser testing, I found out that the experimental value of the text-orientation property, sideways-lr, is supported by the latest version of Firefox.

The sideways-lr makes the blog categories more readable without having to rotate the text after giving it a vertical writing mode and orienting it.

rotate the text

blog categories

See the Pen
CSS writing-mode property – sideways-rl
by Mbaziira Ronald (@mbaziraofug)
on CodePen.

Overall, carrying out manual or automated testing to determine which browsers and devices support the various CSS text orientation effects you plan to implement gives you a better chance of addressing any inconsistencies that can occur to the website when in production.

Read More: What Is ETL Testing: A Comprehensive Guide With Examples And Best Practices

Wrapping Up!

Orienting text using CSS is a tremendous jump start in improving your website’s inclusivity and accessibility. Not only does CSS text orientation help you cover more ground as a business or website owner, but it also creates eye-catching web designs that give users an experience they would crave again.

It is crucial to recall that a vertical writing mode can affect readability while working with horizontal scripts like English. Hence, you should use it modestly.

In this blog, you have learned how to use CSS text orientation properties to create an accessible, inclusive, and responsive website. Please use the knowledge you have gained here to improve the responsiveness & robustness of your website.

Frequently Asked Questions (FAQs)

What are the use cases for orienting text vertically?

There are many use cases for orienting text vertically. However, the major ones include responsive web design, website localization, and text readability.

How does CSS text orientation interact with text selection, highlighting, and interaction on a web page?

Text selection and highlighting typically follow the logical order of the text from its beginning to the end. However, the behavior can vary across different browsers.

Broadly, CSS text orientation does not affect web interaction and mouse events like click and hover.

How does CSS text orientation relate to the internationalization and localization of web content?

Different languages have different writing systems supporting horizontal (LTR and RTL) or vertical scripts. Developers can cater to each writing system by using CSS text orientation properties such as writing-mode to display content correctly regarding the visual reading order of the language.

What is the default writing mode in CSS?

The default writing mode in CSS is horizontal-tb. Text is displayed horizontally from left to right, and lines of text are stacked top-to-bottom

Why is writing-mode sideways-lr not working in Chrome?

The writing-mode property value of sideways-lr is currently experimental. Firefox is the only major browser with support for it.

Author Profile Author Profile Author Profile

Author’s Profile

Mbaziira Ronald

Mbaziira Ronald is a software developer and technical writer. He has expertise in technologies like Tailwind CSS, JavaScript, and WordPress. He frequently dabbles with Figma to improve his design skills.

Blogs: 7



linkedintwitter