文字の均等割付
CSS２の仕様では、均等割付には text-qalign:justifyを指定するように定義されていますが、この方法では均等割付にすることはできません。実際に均等割付を適用するには、text-align:justify に加え、text-justifyプロパティを設定する必要があります。 これは、Internet Explorer 5.5 がW3Cの「Extensible Stylesheet Language(XSL)」の仕様を一部独自に採用したプロパティです。
値には、次のような指定方法あります。
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css>
<title>文字の垂直位置指定</title>
<style type="text/css">
<!--
p {
font-famiky:Arial, Helvetica, sans-serif;
font-size: 10pt;
line-height: 140%
text-align:justify
}
#sample1 {text-justify:auto}
#sample2 {text-justify:distribute}
#sample3 {text-justify:destribute-all-lines}
#sample4 {text-justify:inter-cluster}
#sample5 {text-justify:inter-ideograph}
#sample6 {text-justify:inter-word}
#sample7 {text-justify:newspaper}
-->
</style>
</head>
<body>
<p id="sample1"> <span>auto</span>Default. Allows the brouser to determine which justification algorithm to apply.<BR>
ブラウザに依存します</ｐ>
<p id="sample2"> <span>distribute</span>Handles spacing much like the newspaper value. This form of justification is optimized for documents in Asian languages, such as Thai.<BR>
単語間隔と文字間隔の両方を調整して均等に割り付けます。タイ語のようなアジア系の言語に適した指定方法です。</ｐ>
<p id="sample3"> <span>destribute-all-lines</span>Justifies lines of text in the same way as the distribute value, except that it also justifies the last line of the paragraph. This form of justification is intended for ideographic text.<BR>
単語間隔と文字間隔の両方を調整して均等に割り付けます。最終行で行末まで満たないテキストも均等に割り付けます。</ｐ>
<p id="sample4"> <span>inter-cluster</span>Justifies lines of text that contain no inter-word spacing. This form of justification is optimized for documents in Asian languages<BR>
単語間隔のないテキストを調整して均等に割り付けます。アジア系の言語などに適した指定方法です。</ｐ>
<p id="sample5"> <span>inter-ideograph</span>Justifies lines of ideographic text, and increases or decreases both inter0ideograph and inter-word spacing.<BR>
漢字などの文字間隔と単語間隔の両方を調整して均等に割り付けます。</ｐ>
<p id="sample6"> <span>inter-word</span>Aligns text by increasing the space between words. This calue's spacing behavior isthe fastest way to make all lines of text equal in kength. Its justification behavior does not affect the last line of the paragraph.<BR>
単語間隔のみを調整して均等に割り付けます。最終行で行末まで満たないテキストは均等割付にはなりません。</ｐ>
<p id="sample7"> <span>newspaper</span>Increases or decreases the spacing between letters and between words. It is the most sophisticated form of justification for Latin alphabets.<BR>
文字間隔と単語間隔の両方を調整して均等に割り付けます。英文などに最適な指定方法です</ｐ>
</body>
</HTML>両端揃え
この段落には、行揃えの状態を見るためのテキストが入っています。CSSでの行揃えには、left、right、center、justifyがありますが、現状のほとんどのWebブラウザは日本語でのjustifyをサポートしていません。A block of text is a stack of line boxes. In the case of 'left', 'right' and 'center', this property specifies how the inline boxes within each line box align with respect to the line box's left and right sides; alignment is not with respect to the viewport. In the case of 'justify', the UA may stretch the inline boxes in addition to adjusting their positions.