How to display text Right-to-Left Using CSS ?
The task is to display a text from the right to left direction by 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:
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 the 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...