How to Align Text in HTML
What is HTML?
HTML is a common markupmarkup language used as a foundation of every webpage we see online. Thus, HTML is a markup language that is used by all web pages. HTML documents consist of tags that arrange and structure their content. This block is a basic block that is responsible for organizing the page and includes the layout elements, adding headers, paragraphs, links, pictures, and lists to the site's main content. HTML tags are a secondary culprit that reveals the concept of HTML and sometimes the structure behind it, hence playing the role of the marquee tool.
HTML web pages should be arranged in blocks, which include nested components that can be different—the content or some other feature. The sample HTML document containing one of the most basic metadata elements (like the title, character encoding, etc.) will probably be rather easy to write.
Text Alignment
In HTML, text alignment describes where text appears within an element, such as a header or paragraph. You can choose to align text to the left, right, or center or justify it within the element that contains it. Most HTML elements have left alignment by default, which aligns text with the enclosing element's left edge. Right alignment aligns text along the right edge, whereas center alignment places the text in the center of the contained element. By stretching the text to match the contained element's left and right boundaries, justified alignment produces a straight edge on both sides. Large text blocks might become easier to read, especially in print media.
CSS (Cascading Style Sheets) allows you to set the text alignment for various components on your webpage. By employing text alignment, you can improve your content's readability and aesthetic appeal.
Text-alignment-last Propert
When the text-align property is set to justify, the text-align-last property in CSS is used to describe how the final line of a block or a line of text should be oriented inside its container. Because you may adjust the alignment of the final line, which might not be entirely justified like the rest of the text, this attribute is very helpful when working with justified text.
The following values are possible for the text-align-last property:
- Auto: The browser sets the last line's alignment.
- Left: The last line has a left-to-right alignment.
- Right: The final line is oriented right.
- Centre: The last line is in the middle.
- Justify: The final sentence, like the entire paragraph, is justified.
Text Direction
The direction in which text is presented horizontally in HTML and CSS is known as text direction. Most languages, including English, have text that goes from the left side of the screen to the right (left-to-right, or LTR) as its default orientation. Nonetheless, certain languages like Hebrew and Arabic are written right-to-left (RTL), with the text beginning on the right and moving leftward. The dir property in HTML allows you to specify the direction of text on components like <html>, <body>, or individual elements like <p> or <div>. For left-to-right text, the dir property can take on the values ltr, and for right-to-left text, rtl.
The direction property in CSS allows you to modify the direction of text as well. The direction of the text within an element may be specified by setting this attribute to either ltr or rtl. Furthermore, the direction of text flow and the degree of embedding of inline material may be managed with the help of the Unicode-bidi attribute. By stretching the text to match the contained element's left and right boundaries, justified alignment produces a straight edge on both sides.
Large text blocks might become easier to read as a result, especially in print media.
CSS (Cascading Style Sheets) allows you to set the text alignment for various components on your webpage. By employing text alignment, you can improve your content's readability and aesthetic appeal.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Text Alignment and Direction</title>
<style>
.container {
text-align: center; /* Center-align text */
}
.rtl-text {
direction: rtl; /* Right-to-left text direction */
}
</style>
</head>
<body>
<div class="container">
<h1>Text Alignment and Direction</h1>
<p>Center-aligned text.</p>
<p class="rtl-text">Right-to-left text.</p>
</div>
</body>
</html>
Output:
← Prev
Next →