中国語植字CSSの経験

数か月間 Web 標準を学び、標準に従って Web ページをデザインおよび制作します。私は常に何かを書き、自分の経験を整理したいと思っていました。この記事は主に中国語組版のデザインを目的として書いていますが、英語組版はほとんど行われていないため、関与していません。

最初に、フォント、色、サイズ、段落空白の設定方法などの比較的簡単なアプリケーションを紹介します。その後、ドロップキャップや最初の行のインデントなどを紹介します。最後に、中国語の文字の切り捨て、固定幅のワードラップ (ワードラップとワードブレーク) など、Web ページで一般的に使用される中国語レイアウトについて説明します。私はアプリケーションの経験を書いているだけなので、CSS プロパティの完全な概要が必要な場合は、CSS マニュアルを参照してください。

1. テキストのフォント、色、サイズを設定する方法 - フォント

font-style を使用して、フォントなどの斜体を設定します。 style : italic;

font-weight は、フォントの太さを設定します。たとえば、

font-size は、font-size: 12px のように設定します。 9pt、異なる 単位表示の問題については、CSS マニュアルを参照してください)

line-height は、line-height: 150% などの行間隔を設定します。

color はテキストの色を設定します ( font-color ではないことに注意してください)、color: red など;

font-family は、font-family: "Lucida Grande"、Verdana、Lucida、Arial、Helvetica、Song Nursing、sans- などのフォントを設定します。 serif; (これは一般的な書き方です)

上記のすべては 1 行のフォント属性で記述できます (カラー属性は除く)。

font : 斜体太字 12px/150% "Lucida Grande"、Verdana、Lucida、Arial、Helvetica、Song Nursing、sans -serif

2. 段落レイアウトを制御する方法 - マージンを使用します。 text-align

中国語段落では

タグを使用し、左右にマージンを使用できます (インデント)、段落の前後のスペース。例:

p{ 
margin: 18px 6px 6px 18px; /*分别是上、右、下、左，十二点开始的顺时针方向*/ 
}

テキストの配置方法は text-align です。例:

p{ 
text-align: center; /*居中对齐*/ 
}

配置方法には、左揃え、右揃え、および揃え(両端を揃えてください) )

PS. マージンについて言えば、私は CSS を書くときにすべてのタグに margin: 0; を定義することに慣れています。これは、デフォルトのマージン値によってページ レイアウトの問題が発生することがあります。理由がわかりません (ul/ol/p/dt/dd などのタグに特に注意してください)

3. 縦書きテキスト - 書き込みモードを使用します

writing-mode 属性には、lr-tb と tb-rl の 2 つの値があります。前者はデフォルトの左-右、上-下であり、後者は上-下、右-左です。 。

例:

p{ 
writing-mode: tb-rl; 
}

は方向レイアウトと組み合わせることができます。

4. 箇条書きの問題 - リスト形式の使用

CSS の箇条書きには、円 (黒点)、丸 (白丸)、正方形 (黒塗りの正方形)、10 進数 (アラビア数字)、ローマン (小文字のローマ数字)、アッパーローマン (大文字のローマ数字)、ローワー アルファ (小文字の英字)、アッパー アルファ (大文字の英字)、なし（なし）。たとえば、リストの箇条書き (ul または ol) を次のように四角形に設定します。

li{ 
list-style: square; 
}

さらに、list-style にはいくつかの値もあります。たとえば、いくつかの値を使用できます。小さな画像を箇条書きで表示するには、リスト形式の直下に URL (「画像アドレス」) を書きます。項目リストの margin-left が 0 に設定されている場合、list-style-position:Outside (デフォルトは外側) の箇条書きは表示されないことに注意してください。残念ながら上記の箇条書きはサイズの設定ができないようで、点や四角は常に同じになってしまいます。また、縦方向の位置合わせは設定できません。

5. ドロップキャップ - 使用: 最初の文字

疑似オブジェクト: 最初の文字は font-size および float で使用できます。ドロップキャップ効果。

例:

p:first-letter{ 
padding: 6px; 
font-size: 32pt; 
float: left; 
}

6. 最初の行のインデント - text-indent

テキストを使用します。 -indent は、コンテナ内の最初の行を特定の単位でインデントできます。

たとえば、中国語の段落には通常、各段落の前に 2 つの漢字が残ります。次のように記述できます:

p{ 
text-indent: 2em; /*em是相对单位，2em即现在一个字大小的两倍*/ 
}

font-size が 12px の場合、text-indent: 2em は 24px でインデントされます。

7. 中国語の発音表記について - Ruby タグと Ruby-align 属性の使用

たとえば、ruby-align を使用できます。を使用して位置合わせを設定します。詳細については、CSS マニュアルの Ruby-align 項目を参照してください。

8. 固定幅の中国語文字の切り捨て - text-overflow を使用します。

バックグラウンド言語を使用してデータベース内のフィールドの内容を切り詰めます。たとえば、12 個の漢字を切り取ります (その後は省略記号を使用します)。ただし、HTMLタグなどをフィルタリングする必要がある場合がありますが、CSSを使用して制御することでこの問題は発生しません。たとえば、次のスタイルをリストに適用します:

li{ 
overflow:hidden; 
text-overflow:ellipsis; 
white-space:nowrap; 
}

不过只能处理文字在一行上的截断，不能处理多行。 

9、固定宽度汉字（词）折行 —— 使用word-break 

举个例子，比如说要在一个固定宽度容器里面显示很多地名（假设以空格分隔），为了避免地名中间断开（即一个字在上面而另一个字折断到下一行去了）。则可以使用word-break。比如：

南京上海 上海上 南 上海上海 南京 上海上海上海 南京上海 上海 南京上海 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京上海 上海 南京上海 上海

值得注意的是里面的空格不能以 代替（最少要有一个软空格）。