How to override the current text direction using HTML ?
In this article, we will override the current text direction by using the dir attribute in the particular element. It is used to specify the text direction of the element content.
It contains three values:
- ltr: It is the default value. This value represent the text in Left-to-right text direction.
- rtl: This value represent the text in right-to-left text direction.
- auto: Let the browser figure out the text direction, based on the content.
Syntax:
<element dir = "ltr | rtl | auto">
Example 1:
<!DOCTYPE html> <html> <head> <title> Override the current text direction </title> <style> h1 { color: green; } h1, h2 { text-align: center; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2> HTML5: How to override the current text direction? </h2> <p dir="rtl"> GeeksforGeeks: A computer science portal for geeks </p> </body> </html> |
chevron_right
filter_none
Output:
Example 2:
<!DOCTYPE html> <html> <head> <title> Override the current text direction </title> <style> h1 { color: green; } h1, h2 { text-align: center; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2> HTML5: How to override the current text direction? </h2> <p dir="ltr"> GeeksforGeeks: A computer science portal for geeks </p> </body> </html> |
chevron_right
filter_none
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
