文字方向有助於為頁面上的文字顯示方式增添獨特的色彩。它可能不是最華麗的功能，但在塑造網站個性和使用者體驗方面卻有著巨大的作用。無論你是想讓文字以傳統的橫線方式顯示，還是想讓文字以引人注目的豎線方式顯示，CSS 文字方向都能將你的設想變為現實，本文將介紹有關它的所有細節。
我們常常驚歎於網站的視覺奇觀，從引人注目的佈局到設計精美的字型。在這些美感的背後，隱藏著一個無聲的英雄 – 層疊樣式表（CSS），它是網路的藝術畫筆。CSS 可以讓網頁開發人員和設計人員編織自己的魔法，對每個網頁元素進行微調。我們熟悉 CSS 在顏色和佈局方面的作用，而文字方向則是 CSS 鮮為人知但同樣引人入勝的方面。在本文中，我們將舉例說明。讓我們開始對 CSS 文字方向的精彩探索吧。
什麼是文字方向
文字方向定義了文字在網頁上的顯示方式。它在塑造網站特色和可讀性方面發揮著重要作用。無論是建立經典的橫向佈局，還是嘗試引人注目的縱向顯示，瞭解 CSS 文字方向都將為您帶來無限的創意可能。
文字方向的重要性
CSS 文字方向的重要性在於它能夠增強可讀性、保持設計一致性，並適應各種語言和裝置。以下是主要的重要性：
- 可讀性：這是文字方向的首要和最重要的方面。它能確保文字易於閱讀和理解。
- 全球可訪問性：現代網路應用程式的建立是為了迎合不同背景的受眾。CSS 文字方向網站可以適應從右向左閱讀（RTL）的語言，如阿拉伯語和希伯來語，以及使用
- 豎排指令碼的語言，如日語和中文。
- 設計靈活性：文字方向允許網頁設計者打破標準的水平佈局，嘗試創造性的設計。例如，垂直文字可用於建立獨特且具有視覺吸引力的網頁。
- 跨平臺一致性：CSS 文字方向有助於在各種裝置和螢幕尺寸之間保持設計的一致性。它能確保文字元素適應不同的佈局，同時保持可讀性和美觀性。
文字方向的使用案例
以下是文字定向的一些常見用例：
- 多語言網站：面向國際受眾的網站通常需要支援多種語言和不同的文字方向。CSS 文字方向對於以可讀和符合文化習慣的方式呈現內容至關重要。
- 垂直文字：垂直文字方向通常用於標題、小標題和導航元素，尤其是在亞洲語言中。它也用於藝術和裝飾目的。
- 從右向左（RTL）語言：從右向左閱讀的語言，如阿拉伯語和希伯來語，需要進行特定的文字方向調整，以確保正確顯示文字。
- 響應式設計：CSS 文字方向對於響應式網頁設計非常重要。它能讓文字適應移動裝置的不同螢幕方向，如縱向和橫向模式。
- 排版和樣式設計：網頁設計師可以利用文字定向為佈局增添藝術氣息，從而建立出視覺效果出眾、獨一無二的網頁。
- 可列印內容：在生成 PDF 等可列印內容時，控制文字方向對於確保列印材料看起來與預期一致至關重要。
- 使用者介面：在使用者介面設計中，正確的文字方向對於保持清晰直觀的使用者體驗至關重要，尤其是在處理圖示、標籤和導航元素時。
文字方向 CSS 屬性介紹
各種屬性賦予開發人員建立獨特文字佈局的能力。通過這些屬性，您可以控制文字的流動和顯示方式，無論是傳統的橫向文字還是更加非傳統的文字。
Writing-mode
writing-mode 屬性是對文字方向起核心作用的一個關鍵 CSS 屬性。該屬性就像一個開關，可以改變文字的流動方向。它是塑造網頁內容視覺語言的重要元素。writing-mode 屬性是 CSS 中控制文字方向的核心。除其他選項外，它還用於定義文字是水平顯示還是垂直顯示。與 writing-mode 屬性相關的主要值包括
horizontal-tb：該值表示預設書寫模式；使用該值，文字從左到右、從上到下流動，就像閱讀英文書籍或報紙一樣。vertical-rl和vertical-lr：vertical-rl顯示文字從上到下、從右到左，而vertical-lr則使文字從上到下、從左到右流動。sideways-rl和sideways-lr：這些值可建立側向文字方向，將字元順時針（rl）或逆時針（lr）旋轉 90 度。
下面是一個示例，展示了這些屬性值的一些作用：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f7f7f7;
margin: 0;
padding: 0;
}
h2 {
color: #333;
background-color: #fff;
padding: 10px;
}
.horizontal-text,
.vertical-text {
font-size: 18px;
background-color: #fff;
padding: 20px;
margin: 10px auto;
width: 60%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.horizontal-text {
writing-mode: horizontal-tb;
}
.vertical-text {
height: 700px;
writing-mode: vertical-rl;
text-wrap: wrap;
}
</style>
</head>
<body>
<h2>Horizontal Text</h2>
<p class="horizontal-text">
This is an example of horizontal text orientation. It flows from left to
right and top to bottom, just like standard text.
</p>
<h2>Vertical Text</h2>
<p class="vertical-text">
This is an example of vertical text orientation using the `vertical-rl`
writing mode. The text flows from top to bottom and right to left.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f7f7f7;
margin: 0;
padding: 0;
}
h2 {
color: #333;
background-color: #fff;
padding: 10px;
}
.horizontal-text,
.vertical-text {
font-size: 18px;
background-color: #fff;
padding: 20px;
margin: 10px auto;
width: 60%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.horizontal-text {
writing-mode: horizontal-tb;
}
.vertical-text {
height: 700px;
writing-mode: vertical-rl;
text-wrap: wrap;
}
</style>
</head>
<body>
<h2>Horizontal Text</h2>
<p class="horizontal-text">
This is an example of horizontal text orientation. It flows from left to
right and top to bottom, just like standard text.
</p>
<h2>Vertical Text</h2>
<p class="vertical-text">
This is an example of vertical text orientation using the `vertical-rl`
writing mode. The text flows from top to bottom and right to left.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f7f7f7;
margin: 0;
padding: 0;
}
h2 {
color: #333;
background-color: #fff;
padding: 10px;
}
.horizontal-text,
.vertical-text {
font-size: 18px;
background-color: #fff;
padding: 20px;
margin: 10px auto;
width: 60%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.horizontal-text {
writing-mode: horizontal-tb;
}
.vertical-text {
height: 700px;
writing-mode: vertical-rl;
text-wrap: wrap;
}
</style>
</head>
<body>
<h2>Horizontal Text</h2>
<p class="horizontal-text">
This is an example of horizontal text orientation. It flows from left to
right and top to bottom, just like standard text.
</p>
<h2>Vertical Text</h2>
<p class="vertical-text">
This is an example of vertical text orientation using the `vertical-rl`
writing mode. The text flows from top to bottom and right to left.
</p>
</body>
</html>
下面是我們的程式碼結果：
從上圖中可以看出，這是一個實際示例，展示了 writing-mode 屬性如何使用兩個不同的值：horizontal-tb 值和 vertical-rl 值。
文字方向
這是一個 CSS 屬性，在涉及文字方向時非常有用。它可以讓你定義元素的個別方向。它主要用於新增排版效果，或用於傳統上豎排書寫的語言。該屬性可以使用不同的值，最常見的是直立。
.element {
text-orientation: upright;
}
.element {
text-orientation: upright;
}
.element {
text-orientation: upright;
}
如果將此屬性新增到元素中，我們的文字就會是這個樣子：
水平文字方向
在網站開發中，預設的文字方向是水平的，自然地從左到右流動，如英語，或從右到左，如阿拉伯語。
水平文字方向使內容顯示清晰明瞭，適合大多數網站，尤其是那些從左到右閱讀的語言網站。不過，即使在這種看似標準的方法中，CSS 也提供了多種屬性和樣式來微調水平文字的外觀。
讓我們看看這段程式碼，它顯示了水平文字對齊的兩個位置：
<!DOCTYPE html>
<html>
<head>
<style>
.ltr-text {
text-align: left;
}
.rtl-text {
text-align: right;
}
</style>
</head>
<body>
<!-- Left-to-Right (LTR) Text Orientation -->
<div class="ltr-text">
<h2>This is a left-to-right text</h2>
<p>
OpenReplay is an open-source session replay suite that helps developers
to understand how users interact with their web applications. It records
user sessions and replays them back with full context, including network
activity, console logs, JS errors, store actions/state, page speed
metrics, CPU/memory usage, and more.
</p>
</div>
<!-- Right-to-Left (RTL) Text Orientation -->
<div class="rtl-text">
<h2>This is a right-to-left text</h2>
<p>
OpenReplay is an open-source session replay suite that helps developers
to understand how users interact with their web applications. It records
user sessions and replays them back with full context, including network
activity, console logs, JS errors, store actions/state, page speed
metrics, CPU/memory usage, and more.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.ltr-text {
text-align: left;
}
.rtl-text {
text-align: right;
}
</style>
</head>
<body>
<!-- Left-to-Right (LTR) Text Orientation -->
<div class="ltr-text">
<h2>This is a left-to-right text</h2>
<p>
OpenReplay is an open-source session replay suite that helps developers
to understand how users interact with their web applications. It records
user sessions and replays them back with full context, including network
activity, console logs, JS errors, store actions/state, page speed
metrics, CPU/memory usage, and more.
</p>
</div>
<!-- Right-to-Left (RTL) Text Orientation -->
<div class="rtl-text">
<h2>This is a right-to-left text</h2>
<p>
OpenReplay is an open-source session replay suite that helps developers
to understand how users interact with their web applications. It records
user sessions and replays them back with full context, including network
activity, console logs, JS errors, store actions/state, page speed
metrics, CPU/memory usage, and more.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.ltr-text {
text-align: left;
}
.rtl-text {
text-align: right;
}
</style>
</head>
<body>
<!-- Left-to-Right (LTR) Text Orientation -->
<div class="ltr-text">
<h2>This is a left-to-right text</h2>
<p>
OpenReplay is an open-source session replay suite that helps developers
to understand how users interact with their web applications. It records
user sessions and replays them back with full context, including network
activity, console logs, JS errors, store actions/state, page speed
metrics, CPU/memory usage, and more.
</p>
</div>
<!-- Right-to-Left (RTL) Text Orientation -->
<div class="rtl-text">
<h2>This is a right-to-left text</h2>
<p>
OpenReplay is an open-source session replay suite that helps developers
to understand how users interact with their web applications. It records
user sessions and replays them back with full context, including network
activity, console logs, JS errors, store actions/state, page speed
metrics, CPU/memory usage, and more.
</p>
</div>
</body>
</html>
瀏覽器輸出：
垂直文字方向
豎排文字方向是一種非常強大的設計元素。它在日語和中文等語言中最為常見，在這些語言中，豎排文字是傳統的閱讀方向。
垂直文字方向不僅僅是將文字旋轉 90 度，它還涉及到文字流、對齊和可讀性等方面的考慮，我們將在下面的示例中進行探討。
前面我們已經深入探討了如何使用書寫模式屬性，在這裡，我們將把範圍縮小到如何在垂直方向上使用該屬性。有幾種值可以與書寫模式一起使用，以實現垂直文字方向：
- vertical-rl：文字從上到下垂直流動，逆時針旋轉。
- vertical-lr：文字從上到下垂直書寫，順時針旋轉。
為了說明這一點，讓我們來看看這段程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Japanese Restaurant Menu</title>
<style>
body {
font-family: Arial, sans-serif;
}
.menu {
width: 300px;
background-color: #f7f7f7;
padding: 20px;
text-align: center;
}
.menu-item {
/* writing-mode: vertical-lR; */
margin: 10px;
}
.menu-item h3 {
margin: 0;
font-size: 20px;
}
.menu-item p {
margin: 0;
font-size: 14px;
color: #888;
}
</style>
</head>
<body>
<div class="menu">
<div class="menu-item">
<h3>お刺身</h3>
<p>Assorted Sashimi</p>
</div>
<div class="menu-item">
<h3>壽司</h3>
<p>Sushi Platter</p>
</div>
<div class="menu-item">
<h3>唐揚げ</h3>
<p>Chicken Karaage</p>
</div>
<div class="menu-item">
<h3>天ぷら</h3>
<p>Tempura</p>
</div>
<div class="menu-item">
<h3>ラーメン</h3>
<p>Ramen Noodles</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Japanese Restaurant Menu</title>
<style>
body {
font-family: Arial, sans-serif;
}
.menu {
width: 300px;
background-color: #f7f7f7;
padding: 20px;
text-align: center;
}
.menu-item {
/* writing-mode: vertical-lR; */
margin: 10px;
}
.menu-item h3 {
margin: 0;
font-size: 20px;
}
.menu-item p {
margin: 0;
font-size: 14px;
color: #888;
}
</style>
</head>
<body>
<div class="menu">
<div class="menu-item">
<h3>お刺身</h3>
<p>Assorted Sashimi</p>
</div>
<div class="menu-item">
<h3>壽司</h3>
<p>Sushi Platter</p>
</div>
<div class="menu-item">
<h3>唐揚げ</h3>
<p>Chicken Karaage</p>
</div>
<div class="menu-item">
<h3>天ぷら</h3>
<p>Tempura</p>
</div>
<div class="menu-item">
<h3>ラーメン</h3>
<p>Ramen Noodles</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Japanese Restaurant Menu</title>
<style>
body {
font-family: Arial, sans-serif;
}
.menu {
width: 300px;
background-color: #f7f7f7;
padding: 20px;
text-align: center;
}
.menu-item {
/* writing-mode: vertical-lR; */
margin: 10px;
}
.menu-item h3 {
margin: 0;
font-size: 20px;
}
.menu-item p {
margin: 0;
font-size: 14px;
color: #888;
}
</style>
</head>
<body>
<div class="menu">
<div class="menu-item">
<h3>お刺身</h3>
<p>Assorted Sashimi</p>
</div>
<div class="menu-item">
<h3>壽司</h3>
<p>Sushi Platter</p>
</div>
<div class="menu-item">
<h3>唐揚げ</h3>
<p>Chicken Karaage</p>
</div>
<div class="menu-item">
<h3>天ぷら</h3>
<p>Tempura</p>
</div>
<div class="menu-item">
<h3>ラーメン</h3>
<p>Ramen Noodles</p>
</div>
</div>
</body>
</html>
下面是我們在瀏覽器中輸出的上述程式碼：
下面是瀏覽器的輸出結果，書寫模式為：vertical-lr。
下面是我們的瀏覽器輸出書寫模式：vertical-rl;
文字方向中常見的 CSS 陷阱
過度使用不熟悉的文字方向： 雖然書寫模式等高階 CSS 屬性可以為你的設計增添創意，但重要的是不要過度使用它們。過度使用不熟悉的文字方向會讓使用者感到困惑，並影響可讀性。最好將非常規文字方向保留給特殊情況或藝術設計。
- 不一致的文字方向：不一致的文字方向會使頁面看起來不連貫、不專業。確保文字方向在整個設計中保持一致，尤其是在多語言網站或混合使用水平和垂直文字時。
- 忽視瀏覽器相容性：在舊版瀏覽器中，文字方向的 CSS 屬性可能不完全支援。請務必檢查瀏覽器的相容性，並準備好為不支援這些屬性的瀏覽器提供後備設計或使用基於 JavaScript 的解決方案。
- 忽略響應式設計：在不同螢幕尺寸之間轉換時，可能會出現文字方向問題。忽視響應式設計的考慮因素可能會導致文字剪下或意外佈局。使用媒體查詢來調整不同螢幕尺寸的文字方向。
- 在多種瀏覽器上進行測試：在不同瀏覽器和瀏覽器版本上測試網頁，以確定相容性問題。對於支援有限的瀏覽器，使用瀏覽器字首或考慮使用其他方法。
- 避免元素重疊：重疊元素會干擾文字方向。確保垂直方向的文字周圍有足夠的空間和襯墊，以防止與其他元素重疊。
- 使用 CSS 重置和歸一化 CSS：CSS 重置或 Normalize.css 可幫助實現文字方向的最佳實踐
文字定向的最佳實踐
文字定向是網頁設計中的一個重要工具，要充分利用它，必須考慮一些最佳實踐。以下是一些有效使用文字定向的指導原則：
- 保持可讀性：在使用非標準文字方向時，可讀性是首要考慮因素。文字應始終易於目標受眾閱讀。
- 文化意識：不同的文化有不同的文字方向習慣。要了解文化規範，確保文字方向尊重這些傳統，尤其是多語言網站。
- 層次結構：利用文字方向建立視覺層次。你可以通過旋轉文字或使用不同的方向來吸引注意力，從而強調重要的標題或關鍵元素。
- 與其他設計元素保持平衡：文字方向應與顏色、排版和佈局等其他設計元素相輔相成。確保與整體設計完美融合。
小結
在本文中，我們探索了文字方向的迷人世界。我們首先了解了 CSS 文字方向的基礎知識，強調了它的重要性，並著重介紹了它在現實世界中的應用。我們瞭解了控制文字方向的基石——書寫模式屬性。通過該屬性，我們可以輕鬆瀏覽水平、垂直甚至多行文字佈局。
有了這些知識，我們討論了垂直文字方向，瞭解了它在網頁設計中的潛力。我們掌握了將文字從傳統的水平流轉向垂直流的概念。我們討論了 “Writing-mode” 屬性的不同值，探索了 vertical-rl 和 vertical-lr，每種值都能為網頁設計帶來獨特的視覺效果。最後，我們探討了 CSS 文字方向的一些誤區，以及 CSS 文字方向的一些最佳實踐。
推薦閱讀：
評論留言