Why Vertical Text Orientation Is A Nightmare For Cross Browser Compatibility?
Tags: css, html, javascript
Published: 2019-03-26 10:53:36

---
title: Why Vertical Text Orientation Is A Nightmare For Cross Browser Compatibility?
published: true
description: I will show you how to implement vertical text orientation in CSS. We will also touch on cross browser compatibility issues and resolution using LambdaTest
tags: #css #html #javascript 
canonical_url: https://www.lambdatest.com/blog/why-developers-still-hate-vertical-text-orientation-in-css/
cover_image: https://www.lambdatest.com/blog/wp-content/uploads/2019/02/JPG.jpg
---

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_

![Cross browser compatibility of CSS text-orientation property](https://www.lambdatest.com/blog/wp-content/uploads/2019/02/unnamed-5-1.png)

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](https://www.lambdatest.com/?utm_source=Dev&utm_medium=Blog&utm_campaign=ni-02-260319eu&utm_term=OrganicPosting).

You can also see CSS text-orientation in action as you head to [performing cross browser testing](https://www.lambdatest.com/blog/performing-cross-browser-testing-with-lambdatest/?utm_source=Dev&utm_medium=Blog&utm_campaign=ni-02-260319eu&utm_term=OrganicPosting) for acknowledging the browser support for vertical text-orientation on [LambdaTest Experiments](https://www.lambdatest.com/experiment/css-text-orientation.html?utm_source=Dev&utm_medium=Blog&utm_campaign=ni-02-260319eu&utm_term=OrganicPosting). 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.

![Lambdatest Experiments - CSS vertical text-orientation](https://www.lambdatest.com/blog/wp-content/uploads/2019/02/image9-2.png)

_Lambdatest 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.

![WRITING MODE](https://www.lambdatest.com/blog/wp-content/uploads/2019/02/pasted-image-0-17.png)

![WRITING MODE](https://www.lambdatest.com/blog/wp-content/uploads/2019/02/pasted-image-0-18.png)

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

![vertical text using text orientation property](https://www.lambdatest.com/blog/wp-content/uploads/2019/02/unnamed-6.png)

### Wondering About LambdaTest?

LambdaTest is a cross browser testing cloud which helps you to perform [browser compatibility testing](https://www.lambdatest.com/feature?utm_source=Dev&utm_medium=Blog&utm_campaign=ni-02-260319eu&utm_term=OrganicPosting) in an effortless manner on over 2000+ browsers and browser versions. You can perform [manual cross browser testing](https://www.lambdatest.com/blog/34-ways-to-save-time-on-manual-cross-browser-testing/?utm_source=Dev&utm_medium=Blog&utm_campaign=ni-02-260319eu&utm_term=OrganicPosting) by directly interacting with real browsers through a VM hosted on their cloud servers. You could also perform automated [cross browser testing](https://www.lambdatest.com/selenium-automation?utm_source=Dev&utm_medium=Blog&utm_campaign=ni-02-260319eu&utm_term=OrganicPosting) using their Online Selenium Grid through a test automation framework of your choice.
[![LambdaTest](https://www.lambdatest.com/blog/wp-content/uploads/2018/11/Adword-Cyber2.jpg)](https://accounts.lambdatest.com/register?utm_source=Dev&utm_medium=Blog&utm_campaign=ni-02-260319eu&utm_term=OrganicPosting)

### 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 LambdaTest 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 LambdaTest cloud servers. You can also [perform automated screenshot testing](https://www.lambdatest.com/blog/10-must-try-features-of-automated-screenshot-testing-on-lambdatest/?utm_source=Dev&utm_medium=Blog&utm_campaign=ni-02-260319eu&utm_term=OrganicPosting) to capture multiple screenshots in one go of our webpage across different desktop and mobile browsers to [fix browser compatibility issues](https://www.lambdatest.com/blog/fixing-javascript-cross-browser-compatibility-issues/?utm_source=Dev&utm_medium=Blog&utm_campaign=ni-02-260319eu&utm_term=OrganicPosting). 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.

![CSS text-orientation property supported by Google Chrome](https://www.lambdatest.com/blog/wp-content/uploads/2019/02/pasted-image-1.png)

_LambdaTest Real Time Testing – CSS text-orientation property supported by Google Chrome_

![CSS text-orientation](https://www.lambdatest.com/blog/wp-content/uploads/2019/02/pasted-image-0-19-1.png)

_CSS text-orientation property is neither supported by Microsoft Edge nor Internet Explorer – LambdaTest Real Time Testing_

 
## 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

![Browser Support](https://www.lambdatest.com/blog/wp-content/uploads/2019/02/image2-4.png)

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</p>
</body>
</html>
```

![Vertical text orientation with CSS word-break property](https://www.lambdatest.com/blog/wp-content/uploads/2019/02/pasted-image-0-20-1.png)

_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

![Browser Support](https://www.lambdatest.com/blog/wp-content/uploads/2019/02/image7-3.png)

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</p>
</body>
</html>
```
![LambdaTest Visual UI Screenshot Testing](https://www.lambdatest.com/blog/wp-content/uploads/2019/02/pasted-image-0-21-1.png)

_Vertical text using CSS word-wrap property which is supported by Microsoft Edge and Internet Explorer – LambdaTest Visual UI Screenshot Testing_

 
## 3. \< br \> tag

The most primitive method to achieve vertical text orientation is by the use of break \< br \> tags. However, this method is not very practical and should not be used if the string of text is too long.

```
<p>
	V <br> E <br> R <br> T <br> I <br> C <br> A <br> L <br> <br> T <br> E <br> X <br> T
</p>
```
 
## 4. \< span \> wrapping

Another popular method is to wrap each letter of the text desired to be vertically orientated inside a span tag and using CSS to assign display: block to each span wrapper. Again just like using \< br \> tag, this method is not practical for large text strings.

```
<head>
	<style>
    	p span {
        	display: block;
    	}
	</style>
</head>
<body>
	<p>
    	<span> V </span>
    	<span> E </span>
  	  <span> R </span>
    	<span> T </span>
    	<span> I </span>
    	<span> C </span>
    	<span> A </span>
    	<span> L </span>
	</p>
</body>
```
 
## 5. Using JavaScript

A much better approach is to use a single line of javascript code to dynamically add span wrapper around each letter of the concerned text that needs to vertically oriented rather than manually adding spans in HTML. The text is split into an array and each array element is wrapped around by span tag.
```
<head>
	<style>
    	h1 span {
        	display: block;
    	}
	</style>
</head>
 
<body>
	<h1> VERTICAL </h1>
 
	<script>
    	var text = document.getElementsByTagName('h1')[0];
    	text.innerHTML = '<span>' + text.innerHTML.split('').join('</span><span>') + '</span>';
	</script>
</body>
```


## Conclusion

Creating vertically oriented text has always been a challenge in CSS since time immemorial itself. No solution or fix could promise an immaculate result. However, the introduction of new CSS3 text-orientation property has completely solved that conundrum. A word of caution is appropriate for developers who are planning to deploy this feature in production version of their projects. text-orientation is relatively a new property and might undergo syntax change in future and developers shouldn’t forget to code necessary fallbacks for Microsoft Edge and Internet Explorer to ensure cross browser compatibility. If you have any other alternatives to text-orientation in mind, let me know in the comments below.

[![](https://www.lambdatest.com/blog/wp-content/uploads/2018/11/Adword-Cyber2.jpg)](https://accounts.lambdatest.com/register?utm_source=Dev&utm_medium=Blog&utm_campaign=ni-02-260319eu&utm_term=OrganicPosting)

Original Source: [lambdatest.com](https://www.lambdatest.com/?utm_source=Dev&utm_medium=Blog&utm_campaign=ni-02-260319eu&utm_term=OrganicPosting)

**Related Posts**
1. [Fixing Javascript Cross Browser Compatibility Issues](https://www.lambdatest.com/blog/fixing-javascript-cross-browser-compatibility-issues/?utm_source=Dev&utm_medium=Blog&utm_campaign=ni-02-260319eu&utm_term=OrganicPosting)
2. [9 Ways To Avoid Cross-Browser Compatibility Issues](https://www.lambdatest.com/blog/9-ways-to-avoid-cross-browser-compatibility-issues/?utm_source=Dev&utm_medium=Blog&utm_campaign=ni-02-260319eu&utm_term=OrganicPosting)
3. [How To Make A Cross Browser Compatible Website?](https://www.lambdatest.com/blog/how-to-make-a-cross-browser-compatible-website/?utm_source=Dev&utm_medium=Blog&utm_campaign=ni-02-260319eu&utm_term=OrganicPosting)