How to display text Right-to-Left Using CSS ?
In this article, we will learn how to display text Right-to-Left using CSS. This is done with the help of the CSS Direction property. By default, the text alignment is set to left to right direction in HTML Document. To display the text from right to left, we simply set the direction property to the value of “rtl”.
Syntax:
element_selector {
direction: rtl;
} Example 1: Here is the basic implementation of the CSS direction property.
HTML
<!DOCTYPE html><html><head> <style> h1, h2 { color: green; text-align: center; } .rtl { direction: rtl; } </style></head><body> <h1> GeeksforGeeks </h1> <h2> How to display text Right-to-Left Using CSS? </h2> <p class="rtl"> This text goes from right to left. </p></body></html> |
Output:
Right to left
Example 2: In the above code, if we add some more text content in the “p” element, we get the following output. Notice the effect in both results.
HTML
<!DOCTYPE html><html><head> <style> h1, h2 { color: green; text-align: center; } .rtl { direction: rtl; } </style></head><body> <h1> GeeksforGeeks </h1> <h2> How to display text Right-to-Left Using CSS? </h2> <p class="rtl"> This text goes from right to left. Another line is added. </p></body></html> |
Output:
Right to left
Please Login to comment...