CSS changes the direction of text in a line
CSS Modify Inline Text Direction
In web development, we often need to adjust the direction of text to suit different languages and layout requirements. CSS provides several properties and values that can help you modify the direction of text within a line. This article will detail how to use CSS to modify the direction of text within a line, including horizontal, vertical, and mixed orientations.
Adjusting Horizontal Text Direction
1. Displaying Text from Left to Right
To display text from left to right, use the direction: ltr; property.
<!DOCTYPE html>
<html>
<head>
<style>
.ltr {
direction: ltr;
}
</style>
</head>
<body>
<div class="ltr">geek-docs.com</div>
</body>
</html>
Code Running Results:
2. Right-to-Left Text Display
To display text from right to left, use the direction: rtl; property.
<!DOCTYPE html>
<html>
<head>
<style>
.rtl {
direction: rtl;
}
</style>
</head>
<body>
<div class="rtl">geek-docs.com</div>
</body>
</html>
Code Running Results:
3. Automatically adjust text direction
If you want text to automatically adjust its direction based on its content, you can use the direction: auto; attribute.
<!DOCTYPE html>
<html>
<head>
<style>
.auto { direction: auto;
}
</style>
</head>
<body>
<div class="auto">geek-docs.com</div>
</body>
</html>
Code Running Results:
Vertical Adjustment of Text
4. Text Display from Top to Bottom
To make text display from top to bottom, use the writing-mode: vertical-rl; property.
<!DOCTYPE html>
<html>
<head>
<style>
.vertical-rl {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class="vertical-rl">geek-docs.com</div>
</body>
</html>
Code Running Results:
5. To make text display from bottom to top, use the writing-mode: vertical-lr; property.
<!DOCTYPE html>
<html>
<head>
<style>
.vertical-lr {
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<div class="vertical-lr">geek-docs.com</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.vertical-lr {
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<div class="vertical-lr">geek-docs.com</div>
</body>
</html>
Code Running Results:
6.
To make text appear sideways from left to right, use the writing-mode: sideways-lr; property.
<!DOCTYPE html>
<html>
<head>
<style>
.sideways-lr {
writing-mode: sideways-lr;
}
</style>
</head>
<body>
<div class="sideways-lr">geek-docs.com</div>
</body>
</html>
Code Running Results:
7.
To display text in a slanted right-to-left direction, use the writing-mode: sideways-rl; property.
<!DOCTYPE html>
<html>
<head>
<style>
.sideways-rl {
writing-mode: sideways-rl;
}
</style>
</head>
<body>
<div class="sideways-rl">geek-docs.com</div>
</body>
</html>
Code Running Results:
Mixed Direction Adjustment of Text
8. Mixed Direction Display
To display text in a mixed horizontal and vertical direction, use the writing-mode: vertical-lr; and direction: rtl; properties together.
<!DOCTYPE html>
<html>
<head>
<style>
.mix {
writing-mode: vertical-lr;
direction: rtl;
}
</style>
</head>
<body>
<div class="mix">geek-docs.com</div>
</body>
</html>
Code Running Results:
9. Mixed Direction Display
To display text in a mixed horizontal and vertical direction, use the writing-mode: vertical-rl; and direction: ltr; properties together.
<!DOCTYPE html>
<html>
<head>
<style>
.mix {
writing-mode: vertical-rl;
direction: ltr;
}
</style>
</head>
<body>
<div class="mix">geek-docs.com</div>
</body>
</html>
Code Running Results:
10. Mixed Direction Display
To display text in a mixed horizontal and vertical direction, use the writing-mode: sideways-lr; and direction: rtl; properties together.
<!DOCTYPE html>
<html>
<head>
<style>
.mix {
writing-mode: sideways-lr;
direction: rtl;
}
</style>
</head>
<body>
<div class="mix">geek-docs.com</div>
</body>
</html>
Code Running Results:
11. Mixed Direction Display
To display text in a mixed horizontal and vertical direction, use the writing-mode: sideways-rl; and direction: ltr; properties together.
<!DOCTYPE html>
<html>
<head>
<style>
.mix {
writing-mode: sideways-rl;
direction: ltr;
}
</style>
</head>
<body>
<div class="mix">geek-docs.com</div>
</body>
</html>
Code Running Results:
Summary
Through this article, we’ve learned how to use CSS to modify the direction of inline text. Whether adjusting text horizontally, vertically, or in a mixed order, simple CSS properties and values can be used. In actual development, flexibly applying these properties based on specific design and layout requirements can create more diverse and aesthetically pleasing text on a page.