Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

How to set text direction in HTML

Ben Long

April 16th, 2021

Written by

Ben Long

Category

How-tos & Tutorials

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:

  1. With the HTML dir attribute
  2. 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/5/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.

A blog platform built with TinyMCE.

 

DevelopersHTML
byBen Long

Computer scientist, storyteller, teacher, and an advocate of TinyMCE. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • How-tos & Tutorials

    Is your domain registered with Tiny Cloud?

    by Joe Robinson in How-tos & Tutorials
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2021 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing