Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to display text Right-to-Left Using CSS?
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.
2K+ Views
