LambdaTest Community

Find answers, support, and inspiration from other users

Questions
LambdaTest Community
Answered

Why is vertical text orientation a nightmare for cross-browser compatibility?

I want to know why is vertical text orientation a nightmare for cross-browser compatibility. Can anyone please tell it to me.

Up Vote Down Vote 0 Votes
Posted 4 months ago

Answers


The necessity for vertical text-orientation might not seem evident at first and its use rather limited solely as a design aspect for web pages. However, many Asian languages like Mandarin or Japanese scripts can be written vertically, flowing from right to left or in case of Mongolian left to right. In such languages, even though the block-flow direction is sideways either left to right or right to left, letters or characters in a line flow vertically from top to bottom. Another common use of vertical text-orientation can be in table headers. This is where text-orientation property becomes indispensable.

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.

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.

Alternative Methods To CSS Text-Orientation

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.

Syntax word-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>

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>
Up Vote Down Vote 0 Votes
Posted 3 months ago
254 Views
1 Answer
4 months ago