Start trial
PricingContact Us
Log InStart For Free

How to Align and Set Text Direction in HTML

September 20th, 2024

4 min read

Two arrows pointing in different directions

Written by

Coco Poley

Category

How-to Use TinyMCE

Text alignment is critical for ensuring content feels natural, especially when aligning text in HTML for different languages. Various languages require specific text directions for optimal readability—left-to-right for Western languages such as French, Spanish, and English, and right-to-left for languages like Arabic, Hebrew, and Urdu.

TinyMCE makes setting alignment and direction in HTML straightforward. This versatile WYSIWYG rich text editor lets users adjust HTML text direction with a simple click, ensuring content displays correctly for any language. Use this guide to quickly configure text direction in TinyMCE.

Text Alignment in Rich Text Editors - TinyMCE

Getting content flow right in rich text editors is not merely a convenience—it is essential for ensuring your content is both clear and accessible, particularly in multilingual contexts. The directionality acts like a GPS for your content, guiding how it flows across the page. This is particularly crucial for right-to-left (RTL) languages like Arabic and Hebrew. When set correctly, your content will flow seamlessly, perfectly aligning with your reader’s expectations.

Editors like TinyMCE simplify the process of toggling text direction, enabling you to manage multiple languages and writing systems within a single document. However, this is about more than just aesthetics—proper HTML text direction ensures that your content communicates effectively, both linguistically and culturally. For a global audience, this attention to detail reflects a strong commitment to accessibility and inclusivity. In web content management, these finer points make a significant impact.

How to Change and Align Text in HTML

Ensuring readability across languages necessitates adjusting content flow based on the specific language. In TinyMCE, you can easily control the direction in HTML within the application or allow users to select it themselves via a toolbar button. Customizing this feature in TinyMCE is both quick and straightforward, providing the flexibility required to handle multilingual content effectively.

Step One: Launch a local version of TinyMCE

To try out the TinyMCE directionality plugin, all you have to do is create an index.html file and paste the following code inside it. 

You’ll need a TinyMCE API key to replace “no-api-key” inside the script src URL so you can use the editor without an API key error. Obtaining a free 14-day premium TinyMCE API key for this example is simple.

<html lang="en">
   <head>
      <!-- Replace 'no-api-key' in the link below with your API key -->
      <script src="<a href="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js">https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js</a>" referrerpolicy="origin"></script>
   </head>
   <body style="margin:100px;padding:0">
      <script>
         tinymce.init({
            selector: "textarea" // Selects the textarea element to convert it into a TinyMCE editor
         });
      </script>
      <textarea>
         Welcome to TinyMCE!
      </textarea>
   </body>
</html>

Huzzah! Save your index.html file and you’re all set to add text alignment to TinyMCE.

Step Two: Add the directionality plugin to TinyMCE

Adding the directionality plugin to your TinyMCE script requires only a single line of code. Simply include directionality: "rtl" in your TinyMCE configuration.

tinymce.init({
  selector: "textarea", // Selects the textarea element to convert it into a TinyMCE editor
  directionality: "rtl", // Sets the text direction to right-to-left
});

Step Three: Move Text Left or Right in TinyMCE

Now that the plugin is added, you can choose which text direction you’d like to have as the default inside your RTE. There are three possible values: 

Value

Details

ltr

Left-to-right text direction. This is the default. 

rtl

Right-to-left text direction.

auto

Allow the browser to determine the text direction inside the RTE. 

(Recommended strictly when the text direction is unknown.)

To set the text direction to right-to-left, choose rtl. To set it to left-to-right, choose ltr. If you select rtl, your text will align like this:

Arabic in TinyMCE

How to Add Text Alignment Buttons to TinyMCE's Toolbar

Text alignment in HTML goes beyond simply adding the directionality plugin to TinyMCE. You can also add optional buttons to the TinyMCE toolbar, allowing users to set the direction in HTML with a single click. To do this, include the toolbar and plugin key-value configurations:

plugins: "directionality", // Enables the directionality plugin for text alignment
toolbar: "ltr rtl | undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent", // Configures the toolbar with text direction buttons

Here is the full index.html file with all directionality settings added to TinyMCE: 

<html lang="en">
    <head>
        <!-- Replace 'no-api-key' in the link below with your API key -->
        <script src="<a href="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js">https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js</a>" referrerpolicy="origin"></script>
    </head>
    <body style="margin:100px;padding:0">
      <script>
          tinymce.init({
             selector: "textarea", // Selects the textarea element to convert it into a TinyMCE editor
             plugins: "directionality", // Enables the directionality plugin for text alignment
             toolbar: "ltr rtl | undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent", // Configures the toolbar with text direction buttons
             directionality: "rtl", // Sets the text direction to right-to-left
          });
      </script>
      <textarea>
         Welcome to TinyMCE!
      </textarea>
    </body>
</html>

Align HTML text in TinyMCE

With text align buttons and directionality configured, you can test your demo app by opening the HTML file in a local browser. Type some French or Arabic, then click the buttons to check out the left-to-right and right-to-left text alignment. It will display like this: 

Align text direction in TinyMCE

Best Practices for Text Alignment and Directionality

When working with international content, selecting the appropriate text direction setting is crucial for readability and user experience. Consider these best practices:

  • Use ltr for Western languages: Left-to-right (ltr) text direction is suitable for most Western languages like English, French, and Spanish.
  • Use rtl for Middle Eastern languages: Right-to-left (rtl) text direction is necessary for languages like Arabic, Hebrew, and Urdu to ensure proper readability.
  • Consider auto for dynamic content: If the text direction may vary and is not known beforehand, the auto setting can be useful. It lets the browser automatically determine the direction based on the content, but use this with caution as it may not always be accurate.

Properly setting text direction not only improves the visual flow but also enhances accessibility and inclusivity, making your content more effective for a global audience.

Wrap up

Thank you for following this step-by-step guide.

If you are new to TinyMCE, discover how easy it is to integrate it with some of the most popular JavaScript frameworks:

If you enjoyed this integration guide, check out our webinar on how TinyMCE 7 is perfect for Learning Management Systems.

Note: The first version of this article was written by Ben Long in 2021. It was last updated by Coco Poley in 2024.

DevelopersHTML
byCoco Poley

Coco Poley is the Technical Content Marketer for TinyMCE - the leading WYSIWYG rich text editor powering 40% of the internet. Coco has over eight years of professional experience in technical content creation, educational material production, content writing, data engineering, and software quality assurance engineering.

Related Articles

  • How-to Use TinyMCEOct 3rd, 2024

    Add Author Information to Revision History in TinyMCE - Complete Guide Part 3

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.