How to display text from right to left in CSS
CSS How to Display Text from Right to Left
CSS (Cascading Style Sheets) CSS is a style sheet language primarily used to style and describe elements in HTML documents. One of the key features of this programming language is its separation of elements from their presentation, such as hierarchy and color.
CSS is used to style all HTML tags, including document body text, headings, paragraphs, and other text fragments. CSS can also be used to style the display of tables, grid elements, and https://coder-cafe.com/wp-content/uploads/2025/09/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, while CSS (Cascading Style Sheets) is a language used to describe the style of a web page created with HTML.
Alignment in CSS
There are four main alignment methods: left, right, center, and justify.
- Left — Text is aligned with the left margin. It’s often used for body copy because it’s easiest to read.
-
Right — Text is aligned with the right margin. It’s often used for titles and headings because it creates a more formal look.
-
Center — Text is centered between the left and right margins. It’s often used for https://coder-cafe.com/wp-content/uploads/2025/09/images because it creates a more balanced look.
-
Justify — Text is aligned with the left and right margins. It’s often used for paragraphs because it creates a cleaner look, like this attractive article.
Let’s take a closer look at these alignments.
Center Alignment
In CSS, center alignment is primarily used to center an image on a page. To center an element in CSS, you can use the margin property and set its value to auto. margin: auto; will center the element.
Grammar
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 the name of the direction.
Syntax
Variable/heading {
text-align: left;
}
Variable/heading {
text-align: right;
}
Example
The following example will help us better understand alignment.
<!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 Ways to Display Text in CSS
Now, let’s look at different ways to display text from right to left using CSS. There are two main methods:
- Text alignment method
-
Text direction method
Let’s discuss each in detail with examples.
Text Alignment Method
This particular method has more or less the same syntax and application as the margins discussed above for aligning content in different locations. This method allows users to easily display text from right to left. Furthermore, this method allows you to display the entire content and align it in the desired direction, whether it’s to the left, right, or even toward the center. For the given problem, the syntax would be:
variable/heading {
text-align: center;
}
Example
To make things clearer, 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 using the text alignment method.
</div>
</body>
</html>
Text Direction Method
The text direction property in CSS defines the direction of text. It can be used to set the text direction for the entire document or for specific elements within it. 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 easily set to right-to-left using the following syntax —
element_selector {
direction: rtl;
}
Example
The following code shows a comparison between the normal text direction (left-to-right) and an alternative text direction (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 “ltr” (left to right) or “rtl” (right to left). The syntax for “ltr” is very similar to that for “rtl.”
Syntax
.some-element{
direction: ltr;
}
However, in most programming languages, including CSS and HTML, it is already set as the default direction. Therefore, this syntax is not used very often.
Conclusion
In summary, the CSS directionality property is a useful tool that allows people to easily display text from 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. After following this guide, you now have a better understanding of how to use the CSS directionality property to display text alignment in CSS.