How to set text direction in HTML

April 16th, 2021

3 min read

Two arrows pointing in different directions

The default text direction in HTML is left-to-right. However, when developing web content and applications, you may need to set it to right-to-left, for instance, to cater for languages such as Arabic, Hebrew, Pashto, Persian, Urdu, and Sindhi.

You can set text direction in HTML in one of two ways:

With the HTML dir attribute
With the CSS direction property

But you may be better off using a rich text editor in place of your regular text areas, allowing your users to take advantage of more formatting capabilities, including the ability for users to change text direction themselves. We discuss this further down too - check it out!

The HTML `dir` attribute

The HTML dir attribute is applied to HTML elements. For example, you can set the text direction of a textarea to right-to-left with the value rtl as follows:

<textarea dir="rtl"></textarea>

Text direction is inherited from parent elements, so you can define text direction on the html element and it will be applied to the entire HTML document.

Syntax

<element dir="ltr|rtl|auto">

Attribute Values

Value	Description
`ltr`	Default. Left-to-right text direction
`rtl`	Right-to-left text direction
`auto`	Let the browser figure out the text direction, based on the content (only recommended if the text direction is unknown)

Text direction in rich text editors

TinyMCE configured with right-to-left directionality.

The TinyMCE rich text editor is used as the text entry component in 100M+ products worldwide to provide the best content creation experience possible for users. Check out 9 examples of products you can build with TinyMCE.

TinyMCE provides users with basic formatting plus loads of additional features like those we’ve come to expect from tools like Word and Google Docs, and it’s easy for developers to integrate with their applications.

With TinyMCE, text direction is easily configured with just one line of code, and you can provide content creators with the ability to set text direction themselves as well!

Try TinyMCE

Trying TinyMCE is as easy as creating an HTML file with the following code and opening it in a browser.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
      tinymce.init({
        selector: "textarea"
      });
    </script>
  </head>
  <body>
  <h1>TinyMCE Quick Start Guide</h1>
    <form method="post">
      <textarea>Hello, World!</textarea>
    </form>
  </body>
</html>

NOTE: To remove the warning notification, replace no-api-key with your own free Tiny API key. You will still be presented with a warning notification if you are running TinyMCE on your local machine outside of a web server, or if the domain on which you’re running TinyMCE is not registered against your account. To remove the notification, open it on localhost (which is already an approved domain by default), or register your domain as an approved domain in your account.

TinyMCE running with the default configuration.

Set text direction in TinyMCE

Once you’ve got TinyMCE up and running, you can customize it to suit your application. For instance, you can set the text direction in TinyMCE with the directionality option in the init script:

tinymce.init({
  selector: "textarea",
  directionality: "rtl",
});

Allow content creators to set text direction in TinyMCE

Provide content creators with the ability to set text direction themselves by adding the directionality plugin and the ltr and rtl toolbar controls:

tinymce.init({
  selector: "textarea",
  plugins: "directionality",
  toolbar:
    "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | ltr rtl",
});

Read more about the directionality plugin in our Tiny docs.

Live example

What next?

If you’re already using TinyMCE, you’ll know that it’s extremely flexible, allowing developers to create great user experiences. One of our most popular articles has more information about customizing TinyMCE toolbar options.

If you’re new to TinyMCE, find out how easy it is to integrate it with some of the most popular JavaScript frameworks:

Contact us for more information about TinyMCE and how we’re helping other developers get their innovative solutions to market sooner.