Why Vertical Text Orientation Is A Nightmare For Cross Browser Compatibility?

CSS Text-Orientation

The method that we will focus upon in this blog is by the use of CSS text-orientation. ‘text-orientation’ is a CSS property that defines the orientation of characters within a line. Remember that text orientation needs to be used in conjunction with the writing-mode property. It can only be used when writing-mode is set to vertical(either vertical-rl or vertical-lr). It will not work if writing mode is set to horizontal(horizontal-tb).

Syntax:

text-orientation: mixed | upright | sideways;

By default, text-orientation is set to mix.

• Mixed: horizontal scripts will be rotated 90deg clockwise while vertical scripts remain unaffected.
• Upright: all characters will remain in upright orientation even if block-flow is vertical
• Sideways: All text(horizontal and vertical scripts) will be rotated sideways – 90deg clockwise.

Browser Support

Head over to caniuse and search for ‘CSS text-orientation’ to get an in-depth insight into which browsers and specific browser version supports this feature.

Cross browser compatibility of CSS text-orientation property – caniuse

Remember that text-orientation in CSS3 is a relatively new feature and might undergo syntax changes and alterations in future. Although, it is supported by all the major browsers like Chrome, Firefox, Opera and Safari, the major exceptions are Microsoft Edge and Internet Explorer. It is prudent to use some kind of fallbacks for such unsupported browsers which will further ease our effort for cross browser testing.

You can also see CSS text-orientation in action as you head to performing cross browser testing for acknowledging the browser support for vertical text-orientation on TestMu AI Experiments. Not only does it displays a live example for this feature with code but also the list of all the major browsers which support and do not support the particular feature, it can also detect user’s current browser and operating system.

TestMu AI Experiments – CSS vertical text-orientation

Before using text-orientation, we need to first look into the writing-mode property and understand the concepts of block-flow and inline-flow direction.

Writing Mode

‘writing-mode’ property specifies if lines are set to horizontal or vertical text-orientation. Also, the direction in the text block progresses – left to right or right to left. Writing Mode can have 3 values – horizontal-tb, vertical-lr or vertical-rl.

writing-mode: horizontal-tb | vertical-rl | vertical-lr;

Note: There are 2 more experimental values which should not be used in production code.– ‘sideways-rl’ or ‘sideways-lr’. Also, old values like lr, lr-tb, tb, tb-rl, rl have been deprecated.

Writing-mode introduces 2 key concepts-

• Block flow Direction: Specifies the direction in which block-level boxes are stacked inside a container. It can either be top to bottom, left to right or right to left.
• Inline Flow Direction: Specifies the direction in which content flows inside the line of text, and where a new line starts. It can either be horizontal or vertical.

To achieve a vertical text orientation, set the writing mode property to vertical-lr(or vertical-rl) and set text-orientation to upright.

Wondering About TestMu AI?

TestMu AI is a cross browser testing cloud which helps you to perform browser compatibility testing in an effortless manner on over 3000+ browsers and browser versions. You can perform manual cross browser testing by directly interacting with real browsers through a VM hosted on their cloud servers. You could also perform automated cross browser testing using their Online Selenium Grid through a test automation framework of your choice.

Creating Vertical Text With “text-orientation” Property

To create vertically oriented text, you need to set text-orientation in CSS to upright along with writing -mode set to vertical-lr. As we discussed earlier, CSS text-orientation will only function if the writing-mode property is set to vertical (either vertical-rl or vertical-lr) and not horizontal (horizontal-tb).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vertical oriented text</title>
    <style>
        .vertical-text {
            writing-mode: vertical-lr;
            text-orientation: upright;
            background-color:red;
        }
 
        @supports(text-orientation:upright){
            .vertical-text{
                background-color: greenyellow;
            }
        }
 
    </style>
</head>
 
<body>
    <h1>CSS text-orientation property is supported by Google Chrome, Firefox, Opera and Safari</h1>
    <span class="vertical-text">
        Vertical Text using text-orientation
    </span>
 
</body>
</html>

We can utilise TestMu AI as a cross browser testing tool to interact with your website live using their real-time testing feature. Real time testing would present your website on a VM hosted by TestMu AI cloud servers. You can also perform automated screenshot testing to capture multiple screenshots in one go of our webpage across different desktop and mobile browsers to fix browser compatibility issues. You can do all that on your locally hosted webpages using Lambda Tunnel which helps to establish an SSH(Secure Shell) connection between your machine to their cloud servers.

TestMu AI Real Time Testing – CSS text-orientation property supported by Google Chrome

CSS text-orientation property is neither supported by Microsoft Edge nor Internet Explorer – TestMu AI Real Time Testing

1.Word Break

CSS ‘word-break’ property defines how a line break occurs whenever text reaches the end of the line and would overflow its container.

Syntaxword-break: normal|break-all|keep-all|break-word;

• normal: default rule for a line break.
• break-all: to avoid overflow from container word is broken at any letter.
• keep-all: same as normal but for Chinese, Japanese and Korean – do not use any word break.
• break-word: in absence of breakpoints in a line, work can be broken at any arbitrary point.

Browser Support

Unlike text-orientation, the word-break property is supported by all browsers including Microsoft Edge and all versions of Internet Explorer as well.

Creating Vertical Text With Word-Break Property

We can set the word-break property to break all value and reduce the width of the container to 0px. This would force all the words to be broken at every letter and appear in a vertical fashion. Also set white-space to pre-wrap to make sure white spaces(blank space) is visible so that the distinction between words can be made.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vertical oriented text</title>
    <style>
       h2 {
          margin-left: 10%;
           width: 50%;
           text-align: center;
       }
       .vertical-text {
           margin-left: 100px;
           width: 0px;
           word-break: break-all;
           white-space: pre-wrap;
           color: rgb(121, 202, 0);
       }
   </style>
</head>
<body>
    <h2>Using css word-break property as fallback to text-orientation. word-break is supported by all browsers including Edge and IE</h2>
   <p class="vertical-text">word-break css property
</body>
</html>

Vertical text orientation with CSS word-break property which is supported by Microsoft Edge and Internet Explorer

2.Word-wrap/overflow-wrap

The CSS word-wrap forces allow long words to be broken and wrapped onto the next line to avoid overflow. The word-wrap property is now also reffered as overflow-wrap. All browser support the word-wrap syntax including Edge and IE while Chrome and opera support the new overflow-wrap syntax.

Syntax

word-wrap: normal|break-word|initial|inherit;

• normal: Break words only at normal separation points.
• break-word: Any word can be broken at an arbitrary point.
• Initial: Sets to a default value.
• Inherit: transfers this property from parent to a child element.

Browser Support

Just like word-break, word-wrap property is also supported by all browsers including Microsoft Edge and all versions of Internet Explorer as well.

Creating vertical text with word-wrap property

We can use the same strategy as we used in case of word-break property to reduce the width of the container to 0px and force every word to be broken at every letter and appear in a vertical orientation while each individual character remaining upright. Once again, set white-space to pre-wrap to make sure white spaces(blank space) is visible so that the distinction between words can be made.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vertical oriented text</title>
    <style>
        h2 {
            text-align: center;
        }
 
        .vertical-text {
            margin-left: 100px;
            width: 0px;
            word-wrap: break-word;
            white-space: pre-wrap;
            color: rgb(121, 202, 0);
        }
    </style>
</head>
<body>
    <h2>Using css word-wrap property as fallback to text-orientation. word-wrap is supported by all browsers including Edge and IE</h2>
    <p class="vertical-text">word-wrap css property
</body>
</html>

Vertical text using CSS word-wrap property which is supported by Microsoft Edge and Internet Explorer – TestMu AI Visual UI Screenshot Testing