文本豎排組合 | text-combine-upright (Writing Modes) - CSS 中文開發手冊 - Break易站

時間 2021-08-13

標籤 css html git web 瀏覽器 ide 佈局 spa 代理 orm 欄目 HTML 简体版

原文原文鏈接

文本豎排組合 | text-combine-upright (Writing Modes) - CSS 中文開發手冊css

text-combine-upright CSS屬性將多個字符的組合指定到單個字符的空間中。若是組合文本寬於1em，則用戶代理必須調整到1em內的內容。所獲得的組合物被視爲用於佈局和裝飾的單個直立字形。此屬性僅在垂直書寫模式下有效。html

這是用來產生一個在日語中稱爲「中橫」（tate-chū-yoko）的效果，或者是以直書橫向（Chinese）的方式產生的效果。git

/* Keyword values */
text-combine-upright: none;
text-combine-upright: all;

/* Digits values */
text-combine-upright: digits;     /* fits 2 consecutive digits horizontally inside vertical text */
text-combine-upright: digits 4;   /* fits up to 4 consecutive digits horizontally inside vertical text */

/* Global values */
text-combine-upright: inherit;
text-combine-upright: initial;
text-combine-upright: unset;

Initial valueweb	none瀏覽器
Applies toide	non-replaced inline elements佈局
Inheritedspa	yes代理
Mediaorm	visual
Computed value	specified keyword, plus integer if 'digits'
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

句法

可能值

none——沒有特別的處理。

all——嘗試將水平方框內的全部連續字符排版，以便它們佔據框的垂直線內的單個字符的空間。

digits <integer>?——嘗試顯示一個連續的ASCII數字（U + 0030-U + 0039），該數字與指定的整數具備相同或更少的字符數目，從而佔用垂直線框內單個字符的空間。若是省略整數，則計算出的值最大爲2。範圍以外的整數是無效的。

形式語法

none | all | [ digits <integer>? ]

實例（數字）

當數字被組合時，數字值(digital value)比全部值(all value)所需的標記要少，可是目前並無獲得瀏覽器的普遍支持。

<p lang="ja" class="exampleText">平成20年4月16日に</p>

.exampleText {
  writing-mode: vertical-lr;
  text-combine-upright: digits 2;
  font: 36px serif;
}

Screenshot	Live sample

實例（所有）

all value須要標記每一個水平文本片斷，但相較數字值, 目前它獲得更多瀏覽器的支持。

<p lang="zh-Hant">民國<span class="num">105</span
>年<span class="num">4</span
>月<span class="num">29</span>日</p>

html { writing-mode: vertical-rl; font: 24px serif }
.num { text-combine-upright: all }

Screenshot	Live sample

規範

Specification	Status	Comment
CSS Writing Modes Module Level 3The definition of 'text-combine-upright' in that specification.	Candidate Recommendation	Initial definition
UnknownThe definition of 'text-combine-upright' in that specification.	Unknown	Add digits value