CSS Writing Modes are a set of properties that allow developers to control the flow and orientation of text on a webpage. By changing the writing mode, you can display text vertically, horizontally, or even in different writing directions such as right-to-left. This capability is particularly useful for designing websites in languages that use vertical writing, such as Japanese, Chinese, and Korean, as well as for creating unique and visually appealing layouts.
Incorporating vertical text in web design can enhance readability, improve the user experience, and add a distinctive aesthetic to your site. This article will explore how to use CSS Writing Modes to implement vertical text, and provide practical examples. By the end of this article, you will have a comprehensive understanding of how to utilize writing modes effectively in your web projects.
CSS Writing Modes
CSS Writing Modes control the direction and flow of text. The writing-mode property is used to define whether text should be laid out horizontally or vertically. The primary values for writing-mode include horizontal-tb (horizontal top-to-bottom), vertical-rl (vertical right-to-left), and vertical-lr (vertical left-to-right). Additionally, sideways-rl and sideways-lr rotate the text sideways while maintaining its vertical directionality.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.horizontal-tb {
writing-mode: horizontal-tb;
border: 1px solid black;
padding: 10px;
width: 200px;
background-color: lightyellow;
}
.vertical-rl {
writing-mode: vertical-rl;
border: 1px solid black;
padding: 10px;
width: 200px;
height: 300px;
background-color: lightgreen;
}
.vertical-lr {
writing-mode: vertical-lr;
border: 1px solid black;
padding: 10px;
width: 200px;
height: 300px;
background-color: lightcoral;
}
.sideways-rl {
writing-mode: sideways-rl;
border: 1px solid black;
padding: 10px;
width: 200px;
height: 300px;
background-color: lightblue;
}
.sideways-lr {
writing-mode: sideways-lr;
border: 1px solid black;
padding: 10px;
width: 200px;
height: 300px;
background-color: lightgray;
}
</style>
<title>Writing Modes Example</title>
</head>
<body>
<div class="horizontal-tb">
This text is laid out horizontally from top to bottom.
</div>
<div class="vertical-rl">
This text is laid out vertically from right to left.
</div>
<div class="vertical-lr">
This text is laid out vertically from left to right.
</div>
<div class="sideways-rl">
This text is rotated sideways to be read from right to left.
</div>
<div class="sideways-lr">
This text is rotated sideways to be read from left to right.
</div>
</body>
</html>In this example, five paragraphs demonstrate different writing modes. The horizontal-tb class uses the default horizontal top-to-bottom writing mode. The vertical-rl class sets the writing mode to vertical right-to-left, and the vertical-lr class sets the writing mode to vertical left-to-right. Additionally, the sideways-rl class rotates the text sideways to be read from right to left, while the sideways-lr class rotates the text sideways to be read from left to right. This setup illustrates the versatility of the writing-mode property in controlling text orientation and flow.
Implementing Vertical Text
To display text vertically, you can use the writing-mode property with either the vertical-rl (vertical right-to-left) or vertical-lr (vertical left-to-right) value. The vertical-rl value lays out the text from right to left in a vertical direction, while the vertical-lr value arranges the text from left to right vertically. This property can be applied to any block-level or inline-level element to control the text direction, allowing for various text orientations and layouts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.vertical-text {
writing-mode: vertical-rl;
border: 1px solid #ccc;
padding: 10px;
width: 100px;
height: 200px;
}
</style>
<title>Vertical Text</title>
</head>
<body>
<div class="vertical-text">
This is vertically oriented text.
</div>
</body>
</html>In this example, the vertical-text class applies the writing-mode: vertical-rl; property to a div element, making the text within it display vertically from right to left. The border, padding, width, and height properties are used to style the div and provide a better visual representation of the vertical text.
Customizing Vertical Text
To enhance the readability and design of vertical text, additional CSS properties can be applied. These properties include text-orientation, text-align, and font-size.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.styled-vertical-text {
writing-mode: vertical-rl;
text-orientation: mixed;
text-align: center;
font-size: 20px;
color: #333;
border: 1px solid #ccc;
padding: 10px;
width: 100px;
height: 200px;
}
</style>
<title>Styled Vertical Text</title>
</head>
<body>
<div class="styled-vertical-text">
Styled vertical text for better readability.
</div>
</body>
</html>In this example, the styled-vertical-text class not only uses the writing-mode: vertical-rl; property but also applies additional styling to enhance the text’s appearance. The text-orientation: mixed; property allows both horizontal and vertical text to be displayed correctly within the vertical writing mode. The text-align: center; property centers the text within the container, and font-size: 20px; adjusts the text size for better readability. This combination of properties creates a visually appealing and readable vertical text layout.
Combining Writing Modes with Other CSS Properties
Writing modes can be combined with other CSS properties to create more complex and dynamic layouts. For example, using transform and flexbox alongside writing-mode can result in unique and responsive designs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
border: 1px solid #ccc;
}
.flex-item {
writing-mode: vertical-rl;
text-orientation: upright;
transform: rotate(180deg);
font-size: 18px;
color: #333;
padding: 20px;
background-color: lightblue;
border: 1px solid #ccc;
}
</style>
<title>Advanced Vertical Text Layout</title>
</head>
<body>
<div class="flex-container">
<div class="flex-item">
Advanced vertical text layout using flexbox and transform.
</div>
</div>
</body>
</html>In this example, the flex-container class uses flexbox properties to center the content within the viewport. The flex-item class applies the writing-mode: vertical-rl; and text-orientation: upright; properties to display the text vertically. Additionally, the transform: rotate(180deg); property rotates the text by 180 degrees, creating a unique visual effect. This combination demonstrates how writing modes can be integrated with other CSS properties to achieve advanced and responsive layouts.
Conclusion
CSS Writing Modes provide a powerful tool for creating vertical text and controlling the flow of text on a webpage. By understanding how to use the writing-mode property and combining it with other CSS properties, you can create unique and engaging layouts that enhance the user experience.
Experiment with writing modes to see how they can improve your web designs. For further learning, explore resources such as the MDN Web Docs on CSS Writing Modes. By continuing to practice and experiment, you will become proficient in using writing modes to create visually stunning and functional web designs.
