How to display text Right-to-Left Using CSS?

CSS Web Development Front End Technology

CSS (Cascading Style Sheets) is a style sheet language that is mainly used to style and describe the elements of HTML documents. One of the main features of this programming language is the separation of elements and presentation such as layers, colors, etc.

CSS is used to style all HTML tags, including the document's body, headings, paragraphs, and other pieces of text. CSS can also be used to style the display of table elements, grid elements, and images.

The main difference between these two programming languages is that HTML (Hypertext Markup Language) is a language used to describe the structure of a web page whereas CSS (Cascading Style Sheets) is a language used to describe the style of a web page created by using HTML.

Alignment in CSS

There are four main types of alignments: left, right, center, and justify.

Left − Text is aligned with the left margin. It is often used for body text, as it is the easiest to read.
Right − Text is aligned with the right margin. It is often used for headlines and titles, as it creates a more formal look.
Center − Text is centered between the left and right margins. It is often used for images, as it creates a more balanced look.
Justify − Text is aligned with both the left and right margins. It is often used for paragraphs, as it creates a cleaner look, like this good-looking article.

Let’s take a better look at these alignments in detail.

Center Alignment

In CSS, center alignment is mainly used to align images in the center of the page. To center align an element in CSS, you can use the margin property with the value set to auto. margin: auto; will center align the element. although we mainly use this for images, it can also align text using the following syntax −

Syntax

Variable/heading {
   text-align: center;
}

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .center {
         margin: auto;
         width: 60%;
         border: 5px solid #73AD21;
         padding: 10px;
      }
   </style>
</head>
<body>
   <h2>Center Alignment</h2>
   <p>To horizontally center a block element (like this), use margin: auto;</p>
   <div class="center">
      <p> Hey!!! this is center alignment. </p>
   </div>
</body>
</html>

Left and Right Alignment

In CSS, left and right alignment have similar code. The main difference is that the name of the direction is changed.

Syntax

Variable/heading {
   text-align: left;
} 
Variable/heading {
   text-align: right;
}

Example

The following example helps us understand the alignment better.

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         text-align: left;
      }
      h2 {
         text-align: right;
      }
   </style>
</head>
<body>
   <h1>left direction (hey there)</h1>
   <h2>Right direction (hello guys)</h2>
   <p>The two headings above are aligned left and right.</p>
</body>
</html>

Different methods of displaying text in CSS

Now, let’s see the different types of methods of how to display text using right to left using CSS. There are mainly 2 different methods of doing this namely

Text alignment method
Text directions method

Let’s discuss them one by one in detail with examples.

Text alignment Method

This particular method more or less has a similar syntax or method of application as it is discussed above for aligning the content in different places with respect to margin. The user can easily display text from right to left using this method. Moreover, this method is for displaying the whole content aligning in the desired direction whether it is left, right, or center to the margin. For the given question this syntax will be

variable/heading {
   text-align: center;
}

Example

For more clarity here’s an example to simplify things

<!DOCTYPE html>
<html>
<head>
   <style>
      .method_1 {
         -columns: auto; /* Chrome, Safari, Opera */
         -columns: auto; /* Firefox */
            columns: auto;
         text-align: right;
      }
   </style>
</head>
<body>
   <h1>text alignment method</h1>
   <div class="method_1">
      Text is displayed in the right direction by using the text alignment method
   </div>
</body>
</html>

Text Directions Method

The text-direction property in CSS defines the direction of the text. It can be used to set the text direction for an entire document, or a specific element within the document. The text-direction property can be set to one of four values −

left-to-right
right-to-left
inherit
initial

Syntax

Text direction in CSS can be displayed easily in right to left direction by the following syntax −

element_selector {
   direction: rtl;
}

Example

The following code shows the comparison between the normal text direction, which is left to right, and the other text direction which is right to left −

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         color: orange;
         text-align: center;
      }
      .rtl {
         direction: rtl;
      }
   </style>
</head>
<body>
   <h1>
      hello everyone!!!
   </h1>
   <h2>
      hey, guys, this is the default direction of the text.
   </h2>
   <p class="rtl">
      Now, the text is from right to left direction.
   </p>
</body>
</html>

We can use the "direction" property in CSS to set the text direction. The "direction" property in CSS defines the text direction. It can be set to either "ltr" (left-to-right) or "rtl" (right-to-left). The syntax for “ltr” is very similar to the “rtl” syntax.

Syntax

.some-element{
   direction: ltr;
}

However, it is already set as the default direction in most programming languages including CSS and HTML. So, this syntax is not used that frequently.

Conclusion

To conclude, direction property of CSS is a useful tool, one can easily display text right-to-left. This is an important feature to consider when designing websites for international audiences as it ensures that everyone can access and understand your content. With this guide, you now have a better understanding of how to use the direction property in CSS to display text alignments in CSS.