CSSページ組版入門
CSS は,ブラウザ,エディタ,その他のアプリケーションで広く使用されています.CSSは,Webデザインのためだけではなく,広範な印刷アプリケーションやPDFとして配布される電子的なページ組版のスタイルシート仕様としても使われています.
CSS1(Cascading Style Sheets Level 1)は1996年にW3Cの勧告になり,CSS2 は1998年に,CSS 2.1(CSS Level 2 Revision 1)は2011年に,W3Cの勧告となりました.2018年初頭の時点で,CSS 2.2 が開発中です.
レベル2後のCSSは,一般的にCSS3として知られていますが,単一で一枚岩のCSS3仕様はなくなるでしょう.レベル2を超えるCSSは,それぞれがCSSの一部を規定する多数のモジュールに分割されてきました.これらのモジュールは独立に番号付けされています.CSS2の上に構築された最初のバージョンのモジュールはCSS3と呼ばれており,それぞれはCSS4に取って代わられるでしょう.例えば,CSS Color Module Level 3はCSSレベル2のいくつかの節を置き換えており,現在開発中のCSS Color Module Level 4は徐々にCSS Color Module Level 3を置き換えるでしょう.CSS2の機能上に構築されていないモジュールはレベル1から開始します.例えば,CSS Multi-column Layout Moduleはレベル1です.
それぞれのモジュールの開発段階はバラバラであり,安定度もバラバラです.すべてのW3C勧告の安定度のレベルは,作業草案から始まり勧告に至るまでの範囲です.CSSワーキング・グループは仕様の安定度の分類を,書き直しと研究から安定と完成までに分けて保守しています.
CSSワーキング・グループは毎年,その時点におけるCSSの最新の状態のスナップショットを纏めています.CSSスナップショット2017は勧告と勧告候補の両方の仕様を2017年の公式なCSSの定義を構成するものとしてリストしています.
CSS 2.1(と2.2)はページ媒体への出力サポートは最小の提供であり,ページレイアウト機能は力不足です.CSS3は,現在W3Cによって依然として開発中ですが,高度なページレイアウト,多段組,縦組,ハイフネーション,多言語の文字レイアウトなどの専門的な品質の組版に必要なさまざまな機能を定義しています.Antenna House Formatter は,独自開発のMathML 3,CGM,SVGの描画機能,ベースライン・グリッド,PANTONE®スポット・カラー,日本語レイアウト制御のための追加プロパティなどの最適な組版のための追加機能を提供しています.
CSSをXMLやHTMLのページ媒体デザインのために使うことはまだ一般的ではありませんが,CSS3の開発が進むにつれて増えるものと期待されています.本書はページ組版のためのCSSを理解していただきやすくすることを目的としています.
Antenna House Formatterファミリーは,使用することのできるスタイルシートの種類と機能レベルの組み合わせにより利用できます.Antenna House Formatter と Antenna House CSS Formatterは,CSSを使用してXMLまたはHTMLのいずれかをフォーマットできます. 詳細については,Antenna House の Web サイトを参照してください.
特に明記されていない限り,ここでは 「AH Formatter」は,CSS を使用してフォーマットできる Antenna House Formatter を指します.
多くの人はブラウザ上のWeb制作では CSS に精通しており,その中でも非常に精通している人もいれば,それ程でもない人もいます.しかし,ページ組版に CSS を使用するのにあたって精通している人はほとんどいません.
本書は,既にCSS を知っているが,ページ組版のために CSS を使用したことがない人を対象としています.既に CSS 構文,border,padding,font-size などの通常のプロパティの使用には精通しているはずです.本書ではこれらについて説明しますが,詳細については説明しません.
もし既にページ組版以外のCSS のほとんどの点に精通しているなら,Colors,PDF Bookmarks,Page Setting,Headers and Footers,PDF Output がかなり役に立つ章となるでしょう.
また本書は,CSS ページ組版入門編であるため,CSS,AH Formatter のすべてのプロパティ,セレクタ,規則,機能を説明することを意図していません.利用可能な全範囲の機能の詳細については,CSS仕様書,お使いのバージョンの AH Formatter のオンラインマニュアルを参照してください.
指定したカウンタの値を増やすには,counter-increment プロパティを使います.
CSS3は開発中の仕様のため,CSS3で規定されている仕様は,将来,変更になることがあります.CSS3 プロパティは -ah- プレフィクスの有無にかかわらず使用できます.AH Formatter の独自拡張機能は,-ah- プレフィクスを付けないと正しく動作しません.
このページのページ数 =
この文書の総ページ数 =
<p> このページのページ数 = <span style="content: counter(page)"></span> </p> <p>この文書の総ページ数= <span style="content: counter(pages)"></span> </p>
本書に関して改善のご提案を歓迎いたします.xml-info@antenna.co.jp 宛てにご意見,修正,改善のご提案などご連絡いただければ幸いです.
1
CSSスタイルシートのルールの組み合わせを適用する対象媒体を @media ルールで指定します.ページ媒体向けのルールは @media print を,画面表示向けのルールは @media screen を指定しますAH Formatter は印刷用に組版するソフトウェアですので,GUIの画面にも @media screen を適用せず,@media print を適用します..
@media print { /* ページ媒体に適用 */ body { margin: 0; font-size: 10pt; } } @media screen { /* 画面表示に適用 */ body { margin: 10%; font-size: 12px; } } body { /* すべての媒体に適用 */ font-family: sans-serif; }
<style> 要素には文書のスタイル情報が含まれています.HTML 4.01では,<style> は <head> 内のみに現れます.HTML5では,<style> は <body> 内でも使用できます.
<style type="text/css" media="print"> … </style>
印刷向けスタイルシートを別の CSS ファイルで作成し,@import で読み込むことができます.
@import url("PrintOnly.css") print; /* PrintOnly.css は印刷用 */
印刷向けスタイルシートを <style> または <link> 要素でリンクし,media 属性の値に print を指定します.
<link rel="stylesheet" type="text/css" media="print" href="foo.css">
画面表示用と印刷用(または任意の種類のページ媒体)では,レイアウトデザインの考え方を変える必要があります.
画面表示では,表示環境に依存して画面のサイズや画面の縦横比などが変化するため,レイアウト対象のサイズや配置を厳密に指定するとかえって見づらくなることがあります.スタイル指定では相対寸法を使ってさまざまな環境に対応できるように考慮しなければなりません.
印刷では,組版対象を固定サイズの用紙にきれいに配置することが期待されるため,レイアウト指定では,文字のサイズを始めとして組版対象のサイズと位置を絶対寸法で指定して,レイアウトを厳密に制御することが必要となります.
分割は,ページ概念のある文書,ない文書に関わらず起きます.例えば,テキストは行に分割され,column-count が1より大きいブロック内のテキストが段に分割される可能があります.テキストの流れが2ページに跨る場合は特に気になるところです.要素間または要素内での分割を強制的に行ったり,禁止するプロパティがあります.widows ,orphans プロパティはテキストブロックの内の分割前後の最小行数を制御します.
ページ概念のない媒体では,ボックスは左右にフロートさせることが可能です.ページ媒体では,ボックスはページの上部または下部にフロートさせることもできます(AH Formatter はフロートのより詳細な制御を実装しています).画像もフロートさせることができます.フロートを使って傍注や脚注も配置できます.
ページ媒体(例えば書籍)は,ページ間を移動するための非常に良くできた決まりごとを持っています.
一般的にページには番号を振り,前付には本文と異なるスタイルで番号を振ることがあります.
書籍では,ページ番号や,章や節の見出しがページ上に表示されます.辞書には,各ページの最初と最後の項目を示すための独自の規則があります.CSS は,そういった情報を表示するために,ページの端の周りに16のエリアを定義しています.
目次と索引を使えば,順を追わず情報にアクセスすることが容易にできます.
章(または重要な内容)が,右側のページから始まり(左から右へ記述する言語の文書の場合),章の始めが他のページと異なる体裁を持つ場合もあります.(ヘッダ・フッタなどが異なる可能性があります.)
製本用にページの両面に印刷された文書(オフィスプリンタで両面印刷してフォルダに入れた文書も含めて)は,左ページと右ページを持つ見開きページの形状を持ちます.また,製本された文書では,背表紙の近くのページの内側の端を読むよりも,ページの外側の端にある内容を読むほうが簡単です.
これらのすべての側面はページデザインに影響する可能性があります.例えば,章の開始は横組の本では一般的に見開きの右側にあります.縦組の本では逆に見開きの左側にあります.ページのノンブルや色々なナビゲーションの機能は,ページをめくるときに簡単に目につくように各ページの外側の端(小口より)またはその近くにある場合が多いでしょう.文書を見開きのシーケンスとみなすと,見開きページがどのように対称でなければならないか,グラフィクスなどが見開きページに跨るかどうかなど,問題が湧いてきます.
画面上の見た目のみではなく,文書を印刷するとなると色々なことを考える必要があります.
ページサイズの制限がある場合があります.エンドユーザによって印刷されることを意図した文書はオフィスのプリンタの用紙サイズに合うようにサイズを設定できます.米国におけるレターサイズ,世界のほとんどの地域でA4,日本ではA4 または JIS-B5などがあります.一方,車のハンドブックは車のダッシュボードに入るサイズでしょう.文庫本は従来の決まったサイズがあり,規格外のサイズを選択すると,書籍の販売に影響する可能性があります.
用紙が十分に不透明でない場合,用紙の反対側のテキストが透けて見えることがあります.用紙の両面のテキストが揃っていないと,見栄えはよくありません.
ページの端まで広がった画像や他のデザイン要素は,ページの端を超えて印刷する必要がある場合があります( Page Settingを参照してください).ページの端に塗り足しがない場合,印刷して製本してページを正しい仕上がりサイズにすると,画像とページの端との間に白い帯ができてしまいます.逆に,仕上がりサイズに大幅に裁ち切る場合,画像はページの端の近くに置かない方がよいでしょう.
本をデザインするときには,製本方法まで考慮する必要があるでしょう.製本綴じまたはリング綴じでは,見開きページのノドマージンエリアを減らすことができます.中綴じのように本のページが束に集められて仕上がりサイズに裁ち切られる場合,束の真ん中のページは,束の外側のページよりも小口側が多く裁ち切られている可能性があります.
2
CSSでは,すべてはボックスで構成されます.文書を構成する要素とテキストのツリーは,ボックスのツリーに変換されます.ある要素は複数ボックスを生成し(例:<li>),ある要素は何も生成しません(例えば,<col> のような要素,あるいは,display: none; 指定の要素).ボックスを幅広い意味で分類すると,ブロックレベル,行,インラインレベルのボックスがあります.段落などのブロックレベルのボックスには,他のブロックレベルのボックスまたは行ボックスが含まれます.例えば,段落にテキストとリストが含まれている場合,ボックスがブロックレベルと行の両方のボックスを持たないようにひとつ以上の匿名ボックスがテキストの行ボックスの周囲に作成されます.行ボックスにはひとつまたは複数のインラインレベルのボックスが含まれます.フォントまたはスタイルの変更ごとに別々のインラインレベルのボックスが生成されるためです.
それぞれのボックスがコンテンツエリアを持ち,コンテンツの端はコンテンツエリアの境界になります.パディングエリアはコンテンツエリアを囲み,そのパディングエリアはパディング端が境界となっています.同様に,ボーダーはパディングを囲み,マージンはボーダーを囲んでいます.CSS定義におけるボックスのエリア生成において,上記の説明ではパディング,ボーダー,マージンはあたかも一定の幅を持っているように見えますが,パディング,ボーダー,マージンの値がゼロに設定されているときがあります.
CSSでは,最下位の文字列を含むボックスから,最上位のルート要素のボックスまで階層構造になっています.出力先が画面のときは,ルート要素のボックスを画面に表示します.出力先がページ媒体のときは,ページボックスでページの雛形を設定し,ページに他のボックスを配置します.
要素の表示方法を制御するには,display プロパティを使います.
display プロパティは,要素の表示形式を変更するだけで,要素のもつ役割は変更しません.
表以外のボックスは,内側から,コンテンツ,パディング,ボーダー(境界)をもち,最外部にマージンをもちます.それぞれに特有のプロパティによってレイアウト特性を指定します.ページボックス,ルート要素のボックス,ブロックのボックスという階層構造になっているとき,それぞれのコンテンツ,パディング,ボーダーは,次の図のように配置されます.表については,表組を参照してください.
ボックスの大きさは,コンテンツの幅と高さとその周りのパディング,ボーダー,マージンの四つの特性値の合計となります.
コンテンツの幅を指定します.
コンテンツの高さを指定します.
padding-top,padding-bottom,padding-left,padding-rightに上下左右のパディングの幅を指定するショートハンドプロパティ(複数のプロパティの値をひとつのプロパティで指定するためのもので,本書ではショートハンドと略記します.)です.paddingに四辺の値を同時に指定できます(ショートハンドの指定方法については オブジェクトの装飾 を参照してください).
border-top-width,border-bottom-width,border-left-width,border-right-widthに上下左右のボーダーの幅を指定するショートハンドです.border-widthに四辺の値を同時に指定できます.
ボーダーは,border-color で色,border-style で線種(スタイル)の特性も指定できます.ボーダーの幅,色,線種については オブジェクトの装飾 を参照してください.
margin-top,margin-bottom,margin-left,margin-rightに上下左右のマージンの幅を指定するショートハンドです.marginに四辺の値を同時に指定できます.
マージンの値はマイナスになることがあります.マイナスを指定された辺は,包含するボックス からはみ出します.
指定された幅と高さの内側または外側にパディングとボーダーを描画するかどうかを指定します.width と height プロパティのautoには影響しません.
width: 50%; box-sizing: content-box;
width: 50%; box-sizing: border-box;
<div style="width: 50%; box-sizing: content-box; …"> <p style="background-color: silver; text-align: center">…</p></div> <p style="border-top: thick solid green; width: 50%; …"/> <div style="width: 50%; box-sizing: border-box; …"> <p style="background-color: silver; text-align: center">…</p></div>
3
任意のオブジェクトボックスを生成できる <p>などの要素にborder-* プロパティを使用してボーダーを指定できます.border-styleで線種(スタイル),border-widthで幅(太さ),border-colorで色を指定します.他に,角の丸めを設定したり,影を付けることができます.
ボーダーは四辺別々に異なる装飾を指定できます.またショートハンドがいくつかあります.border-* プロパティは,四辺のボーダーのスタイルなどを一度に設定するためのショートハンドです.border プロパティは,四辺すべてのボーダーのスタイル,幅,色を設定するためのショートハンドです.または,ボーダーの各辺にスタイル,幅,色を設定するプロパティと,スタイルのいずれかを設定するプロパティもあります.
border-* プロパティには 1~4のコンポーネント値を指定できます.値は,以下の border-color の例が示す様に,指定する数によって異なる辺に設定できます.
1~4のコンポーネント値は,四辺すべてのボーダースタイルを設定します.
以下のスタイルが使用可能です.
none:ボーダーはありません.(幅 = 0)
solid:実線
double:二重線
dotted:点線
dashed:破線
dot-dash:一点鎖線
dot-dot-dash:二点鎖線
wave:波線
groove:立体的にへこんだように見える線
ridge:立体的に隆起したように見える線
inset:ボーダーの範囲が立体的にへこんだように見える線
outset:ボーダーの範囲が立体的に隆起したように見える線
個別のボーダースタイルプロパティは,border-top-style,border-bottom-style,border-left-style,border-right-styleで,初期値はnoneです.
1~4のコンポーネント値は,四辺すべてのボーダー幅を設定します.
thin:細いボーダー
medium:通常のボーダー
thick:太いボーダー
<length>:ボーダーの長さの明示的な値.負の値は使えません.(例:border-width: 2pt;
)
個別のボーダーの幅プロパティは,border-top-width,border-bottom-width,border-left-width,border-right-widthで,初期値はmediumです.
1~4のコンポーネント値は,四辺すべてのボーダー色を設定します.
個別のボーダースタイルプロパティは,border-top-color,border-bottom-color,border-left-color,border-right-colorで,初期値は文字の色です.
各プロパティは,ボックスの上下左右のボーダーの幅,スタイル,色を指定します.
ボックスの四辺すべてのボーダーの幅,スタイル,色を指定します.
ボーダーの角を丸くするには,border-radius プロパティで丸め半径を指定します.
<p style="border-radius: 18pt; /* 角の丸め半径 */ border: solid green; padding: 6pt">‘border-radius’ (丸め罫)を…
‘border-radius’ (丸め罫)を指定します.
四つの角の丸め半径を次のプロパティを使って個別に指定もできます.border-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius
<p style="border-top-left-radius: 2mm; /* 左上 */ border-top-right-radius: 5mm; /* 右上 */ border-bottom-right-radius: 2cm 1cm; /* 右下(水平方向,垂直方向) */ border-bottom-left-radius: 4cm 2cm; /* 左下(水平方向,垂直方向) */ border: thin solid; background-color: lime; padding: 5mm">…
四つの角の丸め半径を個別に指定もできます.角の丸めを楕円にもできます.
ボックスに影を付けるには,box-shadow プロパティに水平方向と垂直方向の影の長さと影の色を指定します.
<p style="box-shadow: 8pt 6pt silver; border: solid 1pt black; padding: 6pt">…
Box-shadow(影付きボックス)を指定しています.
<p style="box-shadow: -8pt -6pt orange, 8pt 6pt blue; border-radius: 10pt; padding: 6pt">…
複数の影を指定することもできます.border-radius は box-shadowにも影響します.
ボックスの背景色を指定するには,background-color プロパティを使います.初期値の transparent(透明)は,親要素などの内容が透けて見える状態です.
背景色が適用される範囲は,通常のボックスについてはコンテンツ,パディング,ボーダーです.マージンは常に透明で,背景色は適用されません.
背景画像を指定するには,background-image プロパティを使います.画像は背景色の上に表示されます.
background-repeat は,背景イメージを繰り返し使うかどうか,どのようにして繰り返すかを指定します.
background-position プロパティは,背景画像の表示開始位置を指定します.水平位置と垂直位置の一方または両方を指定できます.指定した値がひとつであれば,ふたつめの値はcenterとみなされます.指定した値がふたつあれば,最初の値は横方向の位置を表し,2番目の値は縦方向の位置を表します.数値には負の値も指定できます.
横方向の位置を次のように指定します.
縦方向の位置を次のように指定します.
4
ブロックレベル要素内のテキストを左揃え,右揃え,中央揃え,均等配置にします.text-align プロパティは,CSS3で start,end の値が拡張されています.startとendはwriting-modeプロパティの指定によって左右への対応付けが変わります.左から右に書く指定ではstartは左に,右から左に書く指定ではstartは右になります.endはその逆です.
Antenna House Formatter provides additional features for optimal formatting, including: custom-developed MathML 3, CGM, and SVG rendering; baseline grids; PANTONE® spot colors; and additional properties for controlling Japanese layout.
Antenna House Formatter provides additional features for optimal formatting, including: custom-developed MathML 3, CGM, and SVG rendering; baseline grids; PANTONE® spot colors; and additional properties for controlling Japanese layout.
Antenna House Formatter provides additional features for optimal formatting, including: custom-developed MathML 3, CGM, and SVG rendering; baseline grids; PANTONE® spot colors; and additional properties for controlling Japanese layout.
Antenna House Formatter provides additional features for optimal formatting, including: custom-developed MathML 3, CGM, and SVG rendering; baseline grids; PANTONE® spot colors; and additional properties for controlling Japanese layout.
Antenna House Formatter provides additional features for optimal formatting, including: custom-developed MathML 3, CGM, and SVG rendering; baseline grids; PANTONE® spot colors; and additional properties for controlling Japanese layout.
Antenna House Formatter provides additional features for optimal formatting, including: custom-developed MathML 3, CGM, and SVG rendering; baseline grids; PANTONE® spot colors; and additional properties for controlling Japanese layout.
Antenna House Formatter provides additional features for optimal formatting, including: custom-developed MathML 3, CGM, and SVG rendering; baseline grids; PANTONE® spot colors; and additional properties for controlling Japanese layout.
Antenna House Formatter provides additional features for optimal formatting, including: custom-developed MathML 3, CGM, and SVG rendering; baseline grids; PANTONE® spot colors; and additional properties for controlling Japanese layout.
縦書きに text-align: start; または text-align: end; を指定すると,テキストを上下に揃えます.
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。
text-align-last は,ブロックの最後の行または強制改行の直前の行の配置を指定します.
AH Formatter は、 CSS 2.1 および CSS3 に対応しています。CSS3 のページモデルにも対応しているため、高品質なページ組版が実現できます。HTML/XHTMLについては、フレームなどの一部HTMLを除き、組版できます。
AH Formatter は、CSS 2.1 および CSS3 に対応しています。CSS3 のページモデルにも対応しているため、高品質なページ組版が実現できます。HTML/XHTMLについては、フレームなどの一部HTMLを除き、組版できます。
AH Formatter は、CSS 2.1 および CSS3 に対応しています。CSS3 のページモデルにも対応しているため、高品質なページ組版が実現できます。HTML/XHTMLについては、フレームなどの一部HTMLを除き、組版できます。
AH Formatter は、CSS 2.1 および CSS3 に対応しています。CSS3 のページモデルにも対応しているため、高品質なページ組版が実現できます。HTML/XHTMLについては、フレームなどの一部HTMLを除き、組版できます。
AH Formatter は、CSS 2.1 および CSS3 に対応しています。CSS3 のページモデルにも対応しているため、高品質なページ組版が実現できます。HTML/XHTMLについては、フレームなどの一部HTMLを除き、組版できます。
AH Formatter は、CSS 2.1 および CSS3 に対応しています。CSS3 のページモデルにも対応しているため、高品質なページ組版が実現できます。HTML/XHTMLについては、フレームなどの一部HTMLを除き、組版できます。
AH Formatter は、CSS 2.1 および CSS3 に対応しています。CSS3 のページモデルにも対応しているため、高品質なページ組版が実現できます。HTML/XHTMLについては、フレームなどの一部HTMLを除き、組版できます。
AH Formatter は、CSS 2.1 および CSS3 に対応しています。CSS3 のページモデルにも対応しているため、高品質なページ組版が実現できます。HTML/XHTMLについては、フレームなどの一部HTMLを除き、組版できます。
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。
text-align-first は,ブロックの最初の行または強制改行の直後の行の配置を指定します.行ブロックに text-align-first が指定されている場合は text-align-last よりも優先されます.
行に上付き文字と下付き文字が含まれていると,行送りが不規則になることがあります.上付き文字と下付き文字が行送りに影響しないようにするには,-ah-line-height-shift-adjustment: disregard-shifts; を指定します.ただし,画像,文字ベースライン位置の異なるフォント(和文と欧文など)が混在する場合,大きな文字の場合,行送りが不規則になる可能性があります.
行に上付き文字ABC や下付き文字 abcが含まれていると,行送りが不規則になることがあります.上付き文字と下付き文字が行送りに影響しないようにするには,-ah-line-height-shift-adjustment: disregard-shifts; を指定します.ただし,画像,文字ベースライン位置の異なるフォント(和文と欧文など)が混在する場合,大きな文字の場合,行送りが不規則になる可能性があります.
行に上付き文字ABC や下付き文字 abcが含まれていると,行送りが不規則になることがあります.上付き文字と下付き文字が行送りに影響しないようにするには,-ah-line-height-shift-adjustment: disregard-shifts; を指定します.ただし,画像,文字ベースライン位置の異なるフォント(和文と欧文など)が混在する場合,大きな文字の場合,行送りが不規則になる可能性があります.
行の中に大きな文字,上付き文字や下付き文字,画像が含まれる場合や,文字ベースライン位置の異なるフォント(和文と欧文など)が混在する場合,行送りは含まれる文字に依存してしまい,その結果,行送りが不規則になることがあります.-ah-line-stacking-strategy: font-height; を指定すると,行送りを一定にできます.
行の中に 大きな文字や 上付き文字 ABC 下付き文字 abc,画像が含まれる場合や,文字ベースライン位置の異なるフォント(和文と欧文など)が混在する場合,行送りが含まれる文字に依存してしまい,その結果,行送りが不規則になります.-ah-line-stacking-strategy: font-height; を指定すると,行送りを一定にできます.
行の中に 大きな文字や 上付き文字 ABC 下付き文字 abc,画像が含まれる場合や,文字ベースライン位置の異なるフォント(和文と欧文など)が混在する場合,行送りが含まれる文字に依存してしまい,その結果,行送りが不規則になります.-ah-line-stacking-strategy: font-height; を指定すると,行送りを一定にできます.
行の中に 大きな文字や 上付き文字 ABC 下付き文字 abc,画像が含まれる場合や,文字ベースライン位置の異なるフォント(和文と欧文など)が混在する場合,行送りが含まれる文字に依存してしまい,その結果,行送りが不規則になります.-ah-line-stacking-strategy: font-height; を指定すると,行送りを一定にできます.
-ah-line-stacking-strategy は,単一ブロック内の行に影響します.複数のブロックに跨っている行送りには影響しません.複数のブロックに跨っている行送りは,-ah-baseline-grid を使用して一貫させられます.ただし,指定した行グリッドと揃わない行エリアもあります.以下に例を示します.
行グリッドと揃わないコンテンツを持つブロックは,-ah-baseline-block-snap を使用して,ブロック全体をグリッドに揃えることができます.
人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは、世界における自由、正義及び平和の基礎であるので、
人権の無視及び軽侮が、人類の良心を踏みにじった野蛮行為をもたらし、言論及び信仰の自由が受けられ、恐怖及び欠乏のない世界の到来が、一般の人々の最高の願望として宣言されたので、
人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは、世界における自由、正義及び平和の基礎であるので、
人権の無視及び軽侮が、人類の良心を踏みにじった野蛮行為をもたらし、言論及び信仰の自由が受けられ、恐怖及び欠乏のない世界の到来が、一般の人々の最高の願望として宣言されたので、
行グリッドを設定,あるいは解除します.行グリッドが設定されたエリア内にある行は,行グリッドのベースライン位置に揃えられます.
baseline-grid: new
または baseline-grid: root
のblock-level 要素値の継承:しない通常の行以外のブロック(見出しや図や表)をどのように行グリッドに揃えるかを指定します.
auto,before,after,または center は border-box または margin-box と組み合わせて使用できます.none は他の値との組み合わせはできません.
leader() 機能を使って,目次では,項目タイトルとページ番号の間をリーダ(点線など)で伸ばして,ページ番号を右寄せにする形式がよく使われます.
リーダ文字として,dotted,solid,space,任意の文字が使えます.
リーダ文字として space を使うと,右インデントタブと同じになります.
二次方程式
AH Formatter は,40言語以上のハイフネーション処理を行うことができます.ハイフネーション処理は言語固有のアルゴリズムを使用しますので,ハイフネーション辞書を用意する必要がありません.アルゴリズムによって処理されない単語をハイフネーションする場合は,例外辞書に追加できます.ソフトハイフン(U+00AD)を単語の中に明示的に挿入して,ハイフネーションを指定できます.
ハイフネーション処理を有効にするには,hyphens プロパティを auto にします.ハイフネーション処理は,言語固有のハイフネーションアルゴリズムによって決定され,各言語ごとに処理されます.この例では,langを指定しています.
.Hyphenated { hyphens: auto; } <div class="Hyphenated" lang="en"> <p>CSS is widely used in browsers, editors, and other …
CSS is widely used in browsers, editors, and other applications. CSS is used not only for web design but also as the stylesheet specification for a wide range of printing applications as well as for electronic paged media delivered as PDF.
CSS 2.1 (and CSS 2.2) provides only minimal support for paged media output, and its page layout features are not powerful enough. CSS3, although still under development by the W3C, defines many of the features that are necessary for professional quality formatting, including: advanced page layouts; multiple columns; vertical writing; hyphenation; and multilingual character layout. Antenna House Formatter provides additional features for optimal formatting, including: custom-developed MathML 3 and SVG rendering; baseline grids; PANTONE® spot colors; and additional properties for controlling Japanese layout.
本文でハイフネーションが有効になっている場合は,見出しなど,ハイフンを追加することで,テキストの見栄えを損なう可能性のある他の文脈では,ハイフネーションを無効にすることをお勧めします.例えば,キャプション,表見出し,表中のテキストなどの場合です.
body:lang(en) { hyphens: auto; } h1, h2, h3, h4, h5, h6 { hyphens: manual; }
ハイフネーションによる行分割の前の最小文字数(標準は2)を指定します.
例えば,"hyphen" という6文字の単語は,"hy-phen" とハイフネーションされる可能性があります.hyphenate-before: 3; と指定すると,ハイフン分割の前の文字数が3文字以上の単語でないとハイフネーションされないので,"hyphen" がハイフネーションされることはなくなります.
ハイフネーションによる行分割の後の最小文字数(標準は2)を指定します.
例えば,“hyphen” という6文字の単語は,“hy-phen” とハイフネーションされる可能性があります.hyphenate-after: 5; と指定すると,ハイフン分割の後の文字数が5文字以上の単語でないとハイフネーションされないので,“hyphen” がハイフネーションされることはなくなります.
ブロックを縦書きにするには,ブロック要素に writing-mode: tb-rl; を指定します.ブロックの縦書きでは,ページの進行方向は横書きと同じく左から右のままになります.
div.VerticalTextBlock { writing-mode: tb-rl; /* 縦書き */ height: 16em; /* 1行の文字数 */ padding: 3pt; border: ridge green; }
日本語は伝統的に縦書きで組まれます。書籍や雑誌など、出版物の多くは今も縦書きが主流です。AH Formatter は縦書きにも対応してこのように、部分的にブロックを縦書きにすることも、文書全体を縦書きにもできます。
縦書きの指定は writing-mode: tb-rlです。tb-rlは、文字の進行方向が上から下(top-to-bottom)、行とブロックの進行方向が右から左(right-to-left)を意味しています。
横書きの指定は writing-mode: lr-tb (left-to-right and top-to-bottom)です。アラビア語やヘブライ語などの右から左に書く言語の横書きの場合は writing-mode: rl-tb (right-to-left,top-to-bottom)です。
縦書きの中に「'08年12月8日」のように部分的に数字などを横書きにすることを「縦中横」といいます。
5
ブロックの段数を指定します.
段数 column-count: 2と指定した段組のブロックです.段間 column-gap,段間罫 column-ruleも指定しています.
div.MultiCol { column-count: 2; column-gap: 5mm; column-rule: dotted green 1mm; }
段組の指定には,段数 column-count を指定する代わりに段幅 column-widthを指定する方法があります.全体の幅と段幅により自動的に段数が決まります.
段間罫を指定する column-rule はショートハンドであり,次のように個別に指定もできます.
column-rule-style: dotted; column-rule-color: green; column-rule-width: 1mm;
段組の要素の段幅を指定します.
column-width:を 12em と指定した段組のブロックです.段間 column-gap,段間罫 column-ruleも指定しています.
div.MultiColW { column-width: 12em; column-gap: 1em; column-rule: solid 1pt; }
段組の指定には,column-count を指定する代わりに column-widthを指定します.
column-width,column-countを指定するためのショートハンドです.値が省略されたときは,初期値が設定されます.
段抜きする要素の段数を指定します.
いろはにほへとちりぬるを わかよたれそつねならむ うゐのおくやまけふこえて あさきゆめみしゑひもせす。 いろはにほへとちりぬるを わかよたれそつねならむ うゐのおくやまけふこえて あさきゆめみしゑひもせす。
いろはにほへとちりぬるを
いろはにほへとちりぬるを わかよたれそつねならむ うゐのおくやまけふこえて あさきゆめみしゑひもせす。 いろはにほへとちりぬるを わかよたれそつねならむ うゐのおくやまけふこえて あさきゆめみしゑひもせす。
段間の幅を指定します.
段間罫の幅,線種,色をまとめて指定します.
段間罫の種類を指定します.ボーダーのスタイルを指定する場合と同じ値を使用できます.詳細については ボーダーのスタイル:border-style プロパティを参照してください.
段間罫の幅を指定します.ボーダーの幅を指定する場合と同じ値を使用できます.詳細については ボーダーの幅:border-width プロパティ を参照してください.
段間罫の色を指定します.第11章 色指定 を参照してください.
段間罫の長さを指定します.
column-rule-length: 60%; は段の高さの60%の長さの段間罫を中央に縦に配置します.
div.MultiCol { column-rule-length: 60%; }
段内の段間罫の縦方向の配置を揃えます.
-ah-column-rule-length: 60%;と-ah-column-rule-align: after; は,段の高さの60%の長さの段間罫を段の末尾に揃えて配置します.
div.MultiCol { -ah-column-rule-length: 60%; -ah-column-rule-align: after; }
-ah-column-rule-displayは,段間のないところにも段間罫を引くかどうか指定します.
-ah-column-rule-display: end は,存在する段のend側に段間罫を引きます.
div.MultiCol3 { -ah-column-rule-display: end; }
6
ページ組版では,当然のことながらブラウザとは異なりページの分割が発生します.CSSは,要素のコンテンツをひとつのページにまとめるかどうか,コンテンツの前後に改ページ設定するかどうかを制御するための複数のプロパティを提供しています.
h1 { /* 大見出し(h1)の前で強制改ページ */ page-break-before: always; } div.Ending { /* このブロックの後ろで必ず改ページ */ page-break-after: always; }
値 をavoid にすると,指定した要素の前後で改ページを禁止できます.
/* 見出し(h1~h6)の直後で改ページしてはいけない決まり */ h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
値をavoidにすると,指定した要素内での改ページを禁止できます.
/* このブロックの中では改ページ禁止 */ div.NoBreak { page-break-inside: avoid; }
章の始まりのページを常に右側または左側のページにするといった指定ができます.必要に応じて空白ページが挿入されます.
/*h2見出しが常に右ページに来るように改ページ*/ h2 { page-break-before: right; }
orphans は,ページの下部に残さなければならない段落先頭の最小行数を指定します.widows は,ページの上部に残さなければならない段落終わりの最小行数を指定します.
7
このプロパティは,font-style,font-variant,font-weight,font-size,line-height,font-familyの6個のプロパティをまとめて指定するためのショートハンドです.
フォントプロパティを指定すると,各プロパティの値は初期値にいったんリセットされます.そして,フォントのショートハンドで明示的に指定したプロパティについてその値に設定されます.font プロパティに指定する順序は以下のとおりです.
/* 文書タイトル */ .CoverPage h1 { font: bold 30pt "源ノ角ゴシック JP", sans-serif; text-align: center; }
フォントのサイズを指定します.
/* 本文 */ body { font-size: 12pt; line-height: 1.5; font-family: "Source Sans Pro", "源ノ角ゴシック JP", sans-serif; }
フォントの種類を指定します.フォントの種類は,フォント名かキーワードで指定します.キーワードは以下のいずれかで,ゼネリックフォントファミリと呼ばれます.
"Times New Roman" のようにフォント名にスペースが含まれる場合は,ダブルクォーテーションまたはシングルクォーテーションで囲みます.
カンマで区切って複数のフォントを指定できます.ユーザ環境で利用できるフォントが記述順に選ばれます.AH Formatter は,文字列をスクリプトの種類ごとに区切り,スクリプト単位で最初に指定されているフォントから割り当てていきます.例えば,日本語フォントの多くはラテンスクリプトをサポートしますので,font-family: "源ノ角ゴシック JP",Helvetica;という指定の場合,ラテンスクリプトと日本語にも "源ノ角ゴシック JP" が割り当てられる結果となりますこのフォントの選択方法は,1文字1文字に対してどのフォントにグリフがあるか調べる方法に変更もできます..次のようにラテンフォントを先に指定することで,MS ゴシックの前にHelveticaが採用されるようになります.
font-family: Helvetica, "源ノ角ゴシック JP", sans-serif;
指定したフォントがシステムに存在しないときのために,serif ,sans-serifなどのゼネリックフォントファミリを最後に指定するとよいでしょう.
フォントの太さを指定します.
フォントをイタリック体や斜体に指定します.
italic は,初めから斜めに傾けてデザインされたフォントですが,oblique は単純に元のフォントを傾けたものです.italic 指定したフォントにイタリック体がない場合は,そのフォントを斜めに傾けて表示します.
AH Formatter では,oblique を指定しても italic と同じように処理します.
日本語フォントには,イタリック体はほとんど存在しないので,italicを指定してもobliqueを指定しても同じ表示になります.(日本語フォントでも,欧字に対してはイタリック体を持っているものは多いです.)
フォントをスモールキャピタルにするときに指定します.英小文字などでのみ有効です.
これらはOpenTypeフォントの機能を使って表示されます.OpenTypeフォントが対応していない場合,スモールキャピタルはAH Formatterによってエミュレートされます.
AH Formatter の設定を変更せずに,また,オペレーティングシステムにフォントをインストールせずに,文書内で利用するフォントを追加指定できます.以下の記述子の指定が可能です.
The Quick Brown Fox
@font-face { font-family: font-face-example; src: url(UglyQua.ttf); } p { font-family: font-face-example; }
行の高さを指定します.normal は標準の行送りで,AH Formatter では,1.2に初期設定されています初期設定値の1.2は変更できます..
数値だけを指定すると,その数値にフォントのサイズを掛けた値が行の高さとなります.1.5と指定すると,150%や1.5emと指定したのと同じ行の高さになります.ただし,line-height プロパティが継承されるときに,数値だけの指定の場合はその数値が継承され,フォントのサイズが変われば行の高さもそれに応じて変わります.
縦方向の揃え位置や上付き文字,下付き文字を指定できます.
下線・上線・打ち消し線のタイプ,色,種類を指定します.text-decoration は,ひとつの宣言で text-decoration-line,text-decoration-color,text-decoration-style を指定するためのショートハンドです.text-decoration-line 要素のみを設定する text-decoration プロパティは,CSS2と後方互換性があります.
span { text-decoration: underline dotted cmyk(0,1,1,0); /* 下線 点線 赤 */ }
テキストに下線・上線・打ち消し線を指定します.同時に複数の指定をするときは,スペースで区切って任意の順序で値を指定します.
/* 章見出し */ .Chapter h2 { text-decoration-line: underline overline; }
下線・上線・打ち消し線の種類を指定します.ボーダーのスタイルを指定する場合と同じ値を使用できます.詳細については ボーダーのスタイル:border-style プロパティを参照してください.
span.dotted { text-decoration-style: dotted; /* 線の種類を点線にする */ } ... <p>dotted:点線 <span class="dotted"> </span></p>
dotted:点線
下線・上線・打ち消し線の色を指定します.第11章 色指定 を参照してください.
span { text-decoration-color: cmyk(0,1,1,0); /* 線の色を赤にする */ }
下線・上線・打ち消し線の幅を指定します.
8
AH Formatter は,W3Cによる Mathematical Markup Language (MathML) 3.0 Second Editionを独自開発したエンジンにより描画できます.そのため,PDF中の数式を高い解像度で描画できます.
MathMLについては,Antenna House 出版の MathML数式組版入門 https://www.antenna.co.jp/AHF/ahf_publication/index.html#MathMLを参照してください.
2次方程式
<p>2次方程式 <m:math xmlns:m="http://www.w3.org/1998/Math/MathML" lang="en"> <m:mstyle displaystyle="true" scriptminsize="1pt" scriptsizemultiplier="0.6"> <m:mrow> <m:msup> <m:mrow> <m:mi>a</m:mi> <m:mo>⁢</m:mo> <m:mi>x</m:mi> </m:mrow> <m:mn>2</m:mn> </m:msup> … の解は, …
ふたつの直線の方程式を
とすると,この2直線のなす角
AH Formatter は,W3Cによる Scalable Vector Graphics(SVG)1.1を独自開発したエンジンにより描画します.そのため,PDF中へのSVGイメージを高い解像度で描画できます.
SVGのベクタグラフィクス
<p>SVGのベクタグラフィクス <s:svg xmlns:s="http://www.w3.org/2000/svg" width="70" height="65" viewBox="0 0 70 65"> <s:g fill-opacity=".5" stroke="black" stroke-width="2"> <s:circle cx="35" cy="20" r="19" fill="red"/>… </s:g> </s:svg> を埋め込むことができます.</p>
9
文章中にインライン画像を配置するには,インライン要素の <img> 要素や <object> 要素を使います.
Antenna House AH Formatter は世界中のお客様にご利用いただきながら 18年目を迎える大容量・多言語データに最適な自動組版ソフトです。独自開発した PDF出力エンジンで、アクセシブルなタグ付きPDF や印刷用の PDF/X、長期保存 PDF/A などさまざまな PDF形式の出力ができます。
AH Formatter のスタイルシートは XSL-FO と CSS のどちらでも使えます(併用はできません)。マニュアルのような複雑なレイアウトには XSL-FO が、比較的単純なレイアウトには直感的な CSS がお勧めです。
<p>Antenna House <img src="images/logo-antenna.svg" alt="AH logo" style="height: 9pt;" /> Formatter は世界中のお客様にご利用いただきながら…
display: block; を使用して,画像表示をインラインではなくブロックとして表示します.
Antenna House AH Formatter は世界中のお客様にご利用いただきながら 18年目を迎える大容量・多言語データに最適な自動組版ソフトです。独自開発した PDF出力エンジンで、アクセシブルなタグ付きPDF や印刷用の PDF/X、長期保存 PDF/A などさまざまな PDF形式の出力ができます。
<p>Antenna House <img src="images/logo-antenna.svg" alt="AH logo" style="display: block; height: 9pt;" /> Formatter は世界中のお客様にご利用いただきながら 18年目を迎える大容量・多言語データに最適な自動組版ソフトです。独自開発した PDF出力エンジンで、アクセシブルなタグ付きPDF や印刷用の PDF/X、長期保存 PDF/A などさまざまな PDF形式の出力ができます。
画像をフロートさせて左寄せまたは右寄せにするには,float プロパティを使います.AH Formatterのfloat プロパティは,水平方向のfloat-x,垂直方向のfloat-y,フロートへのテキストの回り込みを指定するfloat-wrap,フロートを配置する基準となるエリアを指定するfloat-reference,フロートを次のページ(または段)に移動するかどうかを指定するfloat-moveをまとめて指定するショートハンドに拡張されています.
CSS2標準のフロート機能です.float プロパティを適用した画像の次の要素は,反対側に回り込みます.
AH Formatter は世界中のお客様にご利用いただきながら 18年目を迎える大容量・多言語データに最適な自動組版ソフトです。独自開発した PDF出力エンジンで,アクセシブルなタグ付きPDF や印刷用の PDF/X、長期保存 PDF/A などさまざまな PDF形式の出力ができます。
<p style="text-indent: 0"> <img src="images/logo-antenna.svg" style="float:left; height:3em; margin-left: 9pt" />AH Formatter は世界中のお客様にご利用いただきながら 18年目を迎える大容量・多言語データに最適な自動組版ソフトです。独自開発した PDF出力エンジンで、アクセシブルなタグ付きPDF や印刷用の PDF/X、長期保存 PDF/A などさまざまな PDF形式の出力ができます。
AH Formatter は世界中のお客様にご利用いただきながら 18年目を迎える大容量・多言語データに最適な自動組版ソフトです。独自開発した PDF出力エンジンで、アクセシブルなタグ付きPDF や印刷用の PDF/X、長期保存 PDF/A などさまざまな PDF形式の出力ができます。
<p style="text-indent: 0"> <img src="images/logo-antenna.svg" style="float:right; height:3em; margin-right: 9pt" />AH Formatter は世界中のお客様にご利用いただきながら 18年目を迎える大容量・多言語データに最適な自動組版ソフトです。独自開発した PDF出力エンジンで、アクセシブルなタグ付きPDF や印刷用の PDF/X、長期保存 PDF/A などさまざまな PDF形式の出力ができます。
画像だけでなく,文字をフロートさせることもできます.
Antenna
House Formatter は世界中のお客様にご利用いただきながら 18年目を迎える大容量・多言語データに最適な自動組版ソフトです。独自開発した PDF出力エンジンで、 アクセシブルなタグ付きPDF や印刷用の PDF/X、長期保存 PDF/A などさまざまな PDF形式の出力ができます。
Antenna
House Formatter は世界中のお客様にご利用いただきながら 18年目を迎える大容量・多言語データに最適な自動組版ソフトです。独自開発した PDF出力エンジンで、アクセシブルなタグ付きPDF や印刷用の PDF/X、長期保存 PDF/A などさまざまな PDF形式の出力ができます。
ページフロートはフロートを配置する基準エリアとしてページを指定します.ページの縦方向へのフロートを指定できるように拡張したものです.float: top page; でページの先頭にブロックを配置できます.float: bottom page; でページの末尾にブロックを配置できます.このページの先頭と末尾には,ページフロートの例がふたつずつ含まれています.
ここは,ページの先頭です.float: top pageを指定します.
これはページのふたつ目のトップフロートです.float: top pageを指定します.
これはページのふたつ目のボトムフロートです.float: bottom pageを指定します.
ここは,ページの末尾です.float: bottom pageを指定します.
<div style="float: top page; border: ridge maroon; padding: 3pt; margin-bottom: 1em;"> <p>ここは,ページの先頭です.<b>float: top page</b>を指定します.</p> </div> <div style="float: bottom page; border: ridge green; padding: 3pt; margin-top: 1em;"> <p>ここは,ページの末尾です.<b>float: bottom page</b>を指定します.</p> </div>
float: top column; でコラムの先頭にブロックを配置できます.float: bottom column; でコラムの末尾にブロックを配置できます.
人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは、世界における自由、正義及び平和の基礎であるので、
ここは、コラムの先頭です.
float: top column;を指定します.
人権の無視及び軽侮が、人類の良心を踏みにじった野蛮行為をもたらし、言論及び信仰の自由が受けられ、恐怖及び欠乏のない世界の到来が、一般の人々の最高の願望として宣言されたので、
ここは、コラムの末尾です.
float: bottom column;を指定します.
人間が専制と圧迫とに対する最後の手段として反逆に訴えることがないようにするためには、法の支配によって人権保護することが肝要であるので、
<p>人類社会のすべての構成員…</p> <div style="float: top column; border: ridge orange; padding: 3pt;"> <p>ここは,コラムの先頭です.</p><p><b>float: top</b>を指定します.</p> </div> <p>人権の無視及び軽侮が、 …</p> <div style="float: bottom column; border: ridge lime; padding: 3pt"> <p>ここは,コラムの末尾です.</p><p><b>float: bottom</b>を指定します. </p> </div> <p>人間が専制と圧迫とに…</p>
float: inside; は,ブロックを右側のページの左側に配置するか,左側ページの右側に配置します.
float: outside; は,ブロックを右側のページの右側に配置するか,左側ページの左側に配置します.
float: center; は,段の中央にブロックを配置できます.
float: start; は,start側にブロックを配置できます.左から右の横書きの場合 left と同じです.右から左の横書きの場合 right と同じです.
float: end; は,end側にブロックを配置できます.左から右の横書きの場合 right と同じです.右から左の横書きの場合 left と同じです.
人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利
float: inside
人権の無視及び軽侮が、人類の良心を踏みにじった野蛮行為をもたらし、言論及び信仰の自由が受けられ、恐怖及び欠乏のない世界の到来が、一般の人々の最高の願望として宣言されたので、
人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利
float: outside
人権の無視及び軽侮が、人類の良心を踏みにじった野蛮行為をもたらし、言論及び信仰の自由が受けられ、恐怖及び欠乏のない世界の到来が、一般の人々の最高の願望として宣言されたので、
人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利
float: center
人権の無視及び軽侮が、人類の良心を踏みにじった野蛮行為をもたらし、言論及び信仰の自由が受けられ、恐怖及び欠乏のない世界の到来が、一般の人々の最高の願望として宣言されたので、
人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利
float: start
人権の無視及び軽侮が、人類の良心を踏みにじった野蛮行為をもたらし、言論及び信仰の自由が受けられ、恐怖及び欠乏のない世界の到来が、一般の人々の最高の願望として宣言されたので、
ואיל והכרה בכבוד הטבעי אשר לכל בני משפהת האדם ובזכויותיהם השוות והבלתי נפקעות הוא יסוד החופש, הצדק והשלום בעולם.
float: start
הואיל והכרח חיוני הוא שזכויות האדם תהיינה מוגנות בכוח שלטונו של החוק, שלא יהא האדם אנוס, כמפלט אחרון, להשליך את יהבו על מרידה בעריצות ובדיכזי.
人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利
float: end
人権の無視及び軽侮が、人類の良心を踏みにじった野蛮行為をもたらし、言論及び信仰の自由が受けられ、恐怖及び欠乏のない世界の到来が、一般の人々の最高の願望として宣言されたので、
ואיל והכרה בכבוד הטבעי אשר לכל בני משפהת האדם ובזכויותיהם השוות והבלתי נפקעות הוא יסוד החופש, הצדק והשלום בעולם.
float: end
הואיל והכרח חיוני הוא שזכויות האדם תהיינה מוגנות בכוח שלטונו של החוק, שלא יהא האדם אנוס, כמפלט אחרון, להשליך את יהבו על מרידה בעריצות ובדיכזי.
人権の無視及び軽侮が、人類の良心を踏みにじった野蛮行為をもたらし、言
float: inside
人間が専制と圧迫とに対する最後の手段として反逆に訴えることがないようにするためには、法の支配によって人権保護
人権の無視及び軽侮が、人類の良心を踏みにじった野蛮行為をもたらし、言
float: outside
人間が専制と圧迫とに対する最後の手段として反逆に訴えることがないようにするためには、法の支配によって人権保護
人権の無視及び軽侮が、人類の良心を踏みにじった野蛮行為をもたらし、言
float: center
人間が専制と圧迫とに対する最後の手段として反逆に訴えることがないようにするためには、法の支配によって人権保護
人権の無視及び軽侮が、人類の良心を踏みにじった野蛮行為をもたらし、言
float: start
人間が専制と圧迫とに対する最後の手段として反逆に訴えることがないようにするためには、法の支配によって人権保護
הואיל והזלזול בזכויות האדם וביזוין הבשילו מעשים פראיים שפגעו קשה במצפונה של האנושות; ובנין עולם, שבו ייהנו כל יצורי אנוש מחירות הדיבור והאמונה ומן החירות מפחד וממחסור, הוכרז כראש שאיפותיו של כל אדם.
float: start
הואיל והכרח חיוני הוא שזכויות האדם תהיינה מוגנות בכוח שלטונו של החוק, שלא יהא האדם אנוס, כמפלט אחרון, להשליך את יהבו על מרידה בעריצות ובדיכזי.
人権の無視及び軽侮が、人類の良心を踏みにじった野蛮行為をもたらし、言
float: end
人間が専制と圧迫とに対する最後の手段として反逆に訴えることがないようにするためには、法の支配によって人権保護
הואיל והזלזול בזכויות האדם וביזוין הבשילו מעשים פראיים שפגעו קשה במצפונה של האנושות; ובנין עולם, שבו ייהנו כל יצורי אנוש מחירות הדיבור והאמונה ומן החירות מפחד וממחסור, הוכרז כראש שאיפותיו של כל אדם.
float: end
הואיל והכרח חיוני הוא שזכויות האדם תהיינה מוגנות בכוח שלטונו של החוק, שלא יהא האדם אנוס, כמפלט אחרון, להשליך את יהבו על מרידה בעריצות ובדיכזי.
float: alternate; は,段組の最初の段のときは end,最後の段のときは start,それ以外では center が指定されているかのようにブロックを配置します.
人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは、世界における自由、正義及び平和の基礎であるので、
float: alternate
人権の無視及び軽侮が、人類の良心を踏みにじった野蛮行為をもたらし、言論及び信仰の自由が受けられ、恐怖及び欠乏のない世界の到来が、一般の人
float: alternate
人間が専制と圧迫とに対する最後の手段として反逆に訴えることがないようにするためには、法の支配によって人権保護することが肝要であるので、
float: left; と float: right; は縦書きの文書では無効です.
夏目 漱石(なつめ そうせき、慶応三年一月五日(一八六七年二月九日)―大正五年(一九一六年)一二月九日)は、日本の小説家、評論家、英文学者。 本名、金之助。 『吾輩は猫である』『こゝろ』などの作品で広く知られる、森鷗外と並ぶ明治・大正時代の文豪である。 江戸の牛込馬場下横町(現在の東京都新宿区喜久井町)出身。 俳号は愚陀仏。
float: top
大学時代に正岡子規と出会い、俳句を学ぶ。…(中略)… 当初は余裕派と呼ばれた。
float: bottom
「修善寺の大患」後は、『行人』『こゝろ』『硝子戸の中』などを執筆。 「則天去私」(そくてんきょし)の境地に達したといわれる。 晩年は胃潰瘍に悩まされ、『明暗』が絶筆となった。
float: center
フリー百科事典『ウィキペディア』より引用
夏目 漱石(なつめ そうせき、慶応三年一月五日(一八六七年二月九日)―大正五年(一九一六年)一二月九日)は、日本の小説家、評論家、英文学者。 本名、金之助。 『吾輩は猫である』『こゝろ』などの作品で広く知られる、森鷗外と並ぶ明治・大正時代の文豪である。 江戸の牛込馬場下横町(現在の東京都新宿区喜久井町)出身。 俳号は愚陀仏。
大学時代に正岡子規と出会い、俳句を学ぶ。…(中略)… 当初は余裕派と呼ばれた。
「修善寺の大患」後は、『行人』『こゝろ』『硝子戸の中』などを執筆。 「則天去私」(そくてんきょし)の境地に達したといわれる。 晩年は胃潰瘍に悩まされ、『明暗』が絶筆となった。
float: before
float: after
float: inside
float: outside
フリー百科事典『ウィキペディア』より引用
float: multicol; は,フロートを段組と段間にも段抜きをします.gr (grid)は特別な長さの単位であり,段組の段幅(column-width)と段間(column-gap)の両方をそれぞれ 1grとして数えます.このため、n 段抜きの指定は (2n - 1)grとなります.段幅または段間の途中までの長さの指定のために端数の指定も可能です.
人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは、世界における自由、正義及び平和の基礎であるので、
float: multicol; width: 3gr;
人権の無視及び軽侮が、人類の良心を踏みにじった野蛮行為をもたらし、言論及び信仰の自由が受けられ、恐怖及び欠乏のない世界の到来が、一般の人々の最高の願望として宣言されたので、
clear プロパティは右寄せまたは左寄せを指定したブロックへの回り込みを解除します.
10
CSSの表モデルは,HTML4の表モデルを元にしています.表要素を持っていない文書言語で CSS を使用する場合,文書要素を HTML4に対応する display プロパティ値に割り当てることができます.
display 値 | HTMLの要素 |
---|---|
table | TABLE |
inline-table | TABLE |
table-row | TR |
table-row-group | TBODY |
table-header-group | THEAD |
table-footer-group | TFOOT |
table-column | COL |
table-column-group | COLGROUP |
table-cell | TD,TH |
table-caption | CAPTION |
要素を表関連の display 値に割り当てることは,非常に有用です.AH Formatterとともに配布されるhtml.css のような HTML用CSSスタイルシートは,HTMLの表要素を display 値に割り当てます.display 値は同じ要素であるかのように表示するよう定義されています.
table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td,th { display: table-cell } caption { display: table-caption }
display プロパティを使ってXML要素を表要素を表すプロパティ値に対応付けることで,XMLを表として表示できます.
<DATA> <STACK> <ROW><CELL>一行一列目</CELL><CELL>一行二列目</CELL></ROW> <ROW><CELL>二行一列目</CELL></ROW> <ROW><CELL>三行一列目</CELL></ROW> </STACK> </DATA>
DATA { display: block; margin: 20%; } STACK { display: table; border-collapse: collapse; } ROW { display: table-row; } CELL { display: table-cell; padding: 10pt; border: solid thin; }
CSSのボックスは margin,border,padding,width,height プロパティの大きさで決まります.表については少し異なっており,これらの特性は次のように適用されます.
display 値 | margin | border | padding | width | height |
---|---|---|---|---|---|
table | ○ | ○ | ○ | ○ | ○ |
inline-table | ○ | ○ | ○ | ○ | ○ |
table-row | × | ○ | × | × | ○ |
table-row-group | × | ○ | × | × | ○ |
table-header-group | × | ○ | × | ○ | ○ |
table-footer-group | × | ○ | × | ○ | ○ |
table-column | × | ○ | × | ○ | × |
table-column-group | × | ○ | × | ○ | × |
table-cell | × | ○ | ○ | ○ | ○ |
table-caption | ○ | ○ | ○ | ○ | ○ |
CSSの表の各セルの周囲のボーダーを独立に扱うかどうかを指定します.
border-collapse: separate;のとき,隣接するセルのボーダーどうしの間隔(アキ量)を指定します.
table { padding: 5mm; border: solid 2mm gray; border-collapse: separate; border-spacing: 2mm; } th, td { padding: 2mm; border: solid 2mm silver; }
上の指定例は次のように可視化されます.
table { padding: 5mm; border: solid 2mm gray; border-collapse: collapse; } th, td { padding: 2mm; border: solid 2mm silver; }
上の指定例は次のように可視化されます.このとき,表のパディングはなくなります.また,表のボーダーとセルのボーダーが同じ幅のため,次項の優先度が適用されて,表が生成するボックスのボーダーがセルのボーダーに上書きされています.
前項の例のように,border-collapse: collapse; を指定すると,隣接するボーダーをひとつにまとめます.このとき,ボーダースタイルの優先度は次のようになります.
表や列の幅の決定方法を table-layout プロパティで指定できます.
autoでは,表の幅は内容によって決まります.列の幅の最小値は,コラム要素のwidth プロパティHTML でのcol 要素に相当する要素 で指定できますが,それ以外の列は,プログラムがセルの内容と表全体の幅から自動的に決定します.
table-layout: fixed; では,セルの内容とは関係なく表の幅を決定します.表の幅が指定されていないときは,表を含むブロックの幅となります.各列の幅は次のように決まります.
table { table-layout: fixed; } col.first { width: 10em; }
表全体を中央揃えにするには,margin-left: auto;とmargin-right: auto; を指定します.
table { margin-left: auto; margin-right: auto; }
表のキャプションの位置を指定するには,caption-side プロパティを使います.
オプション名 | 製品内容 |
---|---|
SVGオプション | SVGを出力するためのオプションです. |
バーコードオプション | バーコードフォントを使用せず,バーコードの画像(png または svg)を生成して,文書中に画像として直接埋め込むことができるオプションです. |
table { caption-side: top; … }
オプション名 | 製品内容 |
---|---|
SVGオプション | SVGを出力するためのオプションです. |
バーコードオプション | バーコードフォントを使用せず,バーコードの画像(png または svg)を生成して,文書中に画像として直接埋め込むことができるオプションです. |
table { caption-side: bottom; … }
11
ブラウザで CSS を使用すると,表示されている色はディスプレイから発光するものです.赤,緑,青の原色が組み合わされて色を生成するとき,加法色となります.各コンポーネントがより多く追加されると,色は薄くなります.それが #FFF が白である理由です.
逆に,印刷すると,表示される色は,印刷の表面から反射される光です.シアン,マゼンタ,イエローの原色が結合して色を生成するとき,減法色となります.各コンポーネントがより多く追加されると,色は濃くなります.cmyk(1, 1, 1, 0) は,黒でなければなりませんが実際には泥のような茶色になります.それが,黒が第4の色として追加される理由のひとつですCMYK の K は,他のプレートに対して,黒はkeyとなる印刷プレートであることから由来します..黒の印刷インクを使用することは,カラーインクを3倍使用するより安いです.テキストは通常黒でのみ印刷されます.他の三つのインクが揃っていなくても心配ありません.黒に他の色を混ぜることによって,グラフィクスなどで使用する深みのある黒を作ることができます.
RGBとCMYの関係は,1860年頃にJames Clerk Maxwellによって最初に実証されました.簡単に言えば,印刷原色は,透過された原色の二次色で,逆も同様です.シアンは,青色と緑色の混合または白色から赤色を除いた混合,同様にマゼンタと黄色の混合です.しかし,以下の図が示すように,CMYK印刷インクは,ウェブ上のRGB色に使用されるsRGBカラースペースと同じ色域(すなわち色範囲)を持っていません.また,可視光の全色域をカバーしていません.
sRGB と CMYK の相違は,色の使い方に影響を与えます.印刷用デバイスを使用するにあたって遭遇するのは CMYKを使用して RGB 色を表現するのにどうやって処理するかという問題です.通常は色域外の色を印刷できるように色を置き換えます(色域外の色はほとんど置き換えるのが難しいので,期待した色にならないのは避けられません).主に画面上でページを表示するなら,そして,プリンターで印刷する場合も想定するなら,RGB 色が最適です.ただし,ページ媒体を商業目的で印刷する場合は,画像に RGB と CMYK のどちらを使用するかどうかは,CMYKへの最終変換を行うプリンタを考慮する必要があります.商業印刷用の画像を準備する作業は複雑な課題であり,本書の対象外です.
文字やボーダーの色を指定するには,color プロパティを使います.通常の色指定は,RGB で行い,レッド,グリーン,ブルーの三つの要素を持っています.CMYK は印刷のみに使用され,シアン,マゼンタ,イエロー,ブラックの四つの要素を持っています.International Color Consortium (ICC) カラープロファイルは,デバイスに依存しないカラースペースとデバイスの仕様を特徴付けした一連のデータです.RGBとICCは,印刷時には CMYK に変換されますが,PDF や AH Formatter で生成される他のファイルには RGB かICC の色として保持されます.
以下の方法で指定できます.
em { color: #F00; } /* #RGB */ em { color: #FF0000; } /* #RRGGBB */ em { color: rgb(255, 0, 0); } /* 整数の範囲 0-255 */ em { color: rgb(100%, 0%, 0%); } /* 0%-100% */ em { color: red; } /* 色キーワード */ em { color: cmyk(0, 0.9922, 1, 0); } /* 0.0-1.0 */ em { color: cmyk(0%, 99.22%, 100%, 0%); } /* 0%-100% */ em { color: rgb-icc(#CMYK, 0, 0.9922, 1, 0); } /* プロファイルに依存 */
aqua | 水色 | #00FFFF | black | 黒 | #000000 | blue | 青 | #0000FF |
fuchsia | ピンク | #FF00FF | gray | 灰色 | #808080 | green | 緑 | #008000 |
lime | ライム | #00FF00 | maroon | 栗色 | #800000 | navy | 紺 | #000080 |
olive | オリーブ | #808000 | orange | オレンジ | #FFA500 | purple | 紫 | #800080 |
red | 赤色 | #FF0000 | silver | 薄い灰色 | #C0C0C0 | teal | 青緑 | #008080 |
white | 白 | #FFFFFF | yellow | 黄色 | #FFFF00 |
CMYK 色は,CMYK に対応していない媒体で使用するフォールバック RGB 色の有無にかかわらず,指定できます.フォールバック RGB 色がない場合は,CMYK 色から計算されます.
em { color: cmyk(0, 0.9922, 1, 0); } /* 0.0-1.0 */ em { color: cmyk(0%, 99.22%, 100%, 0%); } /* 0%-100% */ em { color: device-cmyk(0, 0.9922, 1, 0); } /* 0.0-1.0 only */ em { color: rgb-icc(#CMYK, 0, 0.9922, 1, 0); } /* 0.0-1.0 */ em { color: rgb-icc(#CMYK, 0%, 99.22%, 100%, 0%); } /* 0%-100% */ em { color: rgb-icc(255, 0, 0, #CMYK, 0, 0.9922, 1, 0); } /* RGB 0-255 */ em { color: rgb-icc(1.0, 0, 0, #CMYK, 0%, 99.22%, 100%, 0%); } /* RGB 0.0-1.0 */
RGB と CMYK 色は,色の不透明度を指定するアルファコンポーネントを追加で指定できます.名前付きカラーでアルファコンポーネントを使用することはできません.
em { color: #F008; } /* #RGBA */ em { color: #FF000088; } /* #RRGGBBAA */ em { color: rgba(255, 0, 0, 0.5); } /* 不透明度 0.0-1.0 */ em { color: rgba(255, 0, 0, 50%); } /* 不透明度 0%-100% */ em { color: rgba(100%, 0%, 0%, 0.5); } /* 不透明度 0.0-1.0 */ em { color: rgba(100%, 0%, 0%, 50%); } /* 不透明度 0%-100% */ em { color: cmyka(0, 0.9922, 1, 0, 0.5); } /* 不透明度 0.0-1.0 */ em { color: cmyka(0, 0.9922, 1, 0, 50%); } /* 不透明度 0%-100% */ em { color: cmyka(0%, 99.22%, 100%, 0%, 0.5); } /* 不透明度 0.0-1.0 */ em { color: cmyka(0%, 99.22%, 100%, 0%, 50%); } /* 不透明度 0%-100% */
#F00F | #F00E | #F00D | #F00C | #F00B | #F00A | #F009 | #F008 |
#F007 | #F006 | #F005 | #F004 | #F003 | #F002 | #F001 | #F000 |
rgb-icc() 色関数は,以下の方法で指定できます:
グレイスケール(白黒)の色は rgb-icc(#Grayscale, <Scale>) で指定でき,グレイスケールカラーを表示できないデバイスで使用するフォールバック RGB 色を指定する特別なパラメータを,任意で指定できます.
em { color: rgb-icc(#Grayscale, 0.5); } /* 0.0 (black) to 1.0 (white) */ em { color: rgb-icc(#Grayscale, 50%); } /* 0% (black) to 100% (white) */ em { color: rgb-icc(128, 128, 128, #Grayscale, 0.5); } /*RGB フォールバック カラー*/ em { color: rgb-icc(50%, 50%, 50%, #Grayscale, 0.5); } /*RGB フォールバック カラー*/
0.0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1.0 |
AH Formatter PANTONE® オプション AH Formatter PANTONE® オプションを購入する必要があります. をお持ちの場合は,1,000 以上の PANTONE® カラーを名前で指定してスポットカラーとして印刷したり,レンダリングや印刷のために正しい RGB か CMYK に変換したりできます.
em { color: rgb-icc(#Separation, 'PANTONE 627 PC', 1.0); } /* 名前, 色調 */ em { color: rgb-icc(#Separation, 'PANTONE 627 PC', 0.5); } /* 色調 0.0-1.0 */ em { color: rgb-icc(#Separation, 'PANTONE 627 PC', 50%); } /* 色調 0%-100% */ em { color: rgb-icc(#Separation, 'PANTONE 627 PC'); } /* 1.0 色調想定 */ em { color: rgb-icc(#Separation, 'PANTONE 627 PC', 1, 90%, 0%, 75%, 83%); } /* CMYK 等価 */ em { color: rgb-icc(0, 91, 25, #Separation, 'PANTONE 627 PC'); } /* RGB 等価 */ em { color: rgb-icc(0, 91, 25, #Separation, 'PANTONE 627 PC', 1, 90%, 0%, 75%, 83%); } /* RGB, CMYK の両方と等価 */
0.0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1.0 |
組版した文書を商用目的で印刷するとき,各 PANTONE® カラーは,その PANTONE® カラー用の特定のインクで,個別に印刷されます.各 PANTONE® カラーのセパレーションのグレイスケールレベルは,適用される色合いのレベルに対応します.
スポットカラーは,AH Formatter PANTONE® オプションなしで使用できます.ただし,スポットカラーセパレーションに対応していない媒体で使用するには,同等の RGB とCMYK カラーのひとつか両方を持つ必要があります.RGB か CMYK の等価が省略されている場合は,他の等価色のコンポーネントから計算されます.
PANTONE® カラーと同様に,組版した文書を商用目的で印刷するとき,各 CMYK スポットカラーは,色用の特定のインクで,個別に印刷されます.各色のセパレーションのグレイスケールレベルは,適用される色合いのレベルに対応します
12
要素に章番号や節番号のような連番を付けるには,counter-increment プロパティ,counter-reset プロパティ,content プロパティを使います.
counter-increment プロパティと counter-reset プロパティでカウンタ名とその値を設定します.content プロパティにカウンタ名を指定すると,::before疑似要素または ::after 疑似要素にカウンタの値が挿入されます.counter-increment プロパティを適用した要素が現れるたびにカウンタの値が増え,counter-reset プロパティを適用した要素が現れるたびにカウンタの値がリセットされます.
body { counter-reset: ChapterNo; /* 章番号(ChapterNo)をリセットします */ } h1:before { counter-increment: ChapterNo; /* 章番号に1を足します */ /* 章見出し(h1)の前に「Chapter○」を挿入します */ content: "Chapter" counter(ChapterNo) ": "; } h1 { /* Chapterにh1:beforeとh1自身の内容をセットします */ string-set: Chapter content(before) content(); counter-reset: SectionNo; /* 節番号をリセットします */ } h2:before { counter-increment: SectionNo; /* 節番号に1を足します */ content: counter(ChapterNo) "." counter(SectionNo) " "; } h2 { /* Sectionにh2:beforeとh2自身の内容をセットします */ string-set: Section content(before) content(); } @page :left { @top-left { /* 左ページの柱に章のタイトルを挿入します */ content: string(Chapter); } } @page :right { @top-right { /* 右ページの柱に節のタイトルを挿入します */ content: string(Section); } }
要素の直前または直後に文字列を挿入するには,content プロパティを使います.CSS3では,要素のコンテンツとして文字列を指定もできます.
normal と none 以外の値は繰り返しが可能で,任意の順序で組み合わせが可能です.
.Chapter h2:before { content: "Chapter " counter(ChapterNo) "."; }
string-set プロパティで使用されるcontent()関数については,string-setを参照してください.
指定したカウンタの値を増やすには,counter-increment プロパティを使います.
複数のカウンタ名の指定もできます.整数が後に続く指定もできます.
.Chapter h2 { counter-increment: ChapterNo; }
指定したカウンタの値をリセットするには,counter-reset プロパティを使います.
.Chapter h2 { counter-reset: SectionNo; }
現在のページを求めるには counter(page) を使い,総ページ数を求めるには counter(pages) を使います.
<p>このページのページ数 = <span style="content: counter(page)"></span></p> <p>この文書の総ページ数 = <span style="content: counter(pages)"></span></p>
このページのページ数 =
この文書の総ページ数 =
counter() には,カウンタスタイルを指定する任意の第2引数があります.省略した場合の既定値は decimal となります.
<p>このページのページ数 = <span style="content: counter(page, lower-roman)"></span></p> <p>この文書の総ページ数 = <span style="content: counter(pages, upper-roman)"></span></p>
このページのページ数 =
この文書の総ページ数 =
13
display プロパティには,要素の表示をリストとして表示する値はありません.しかし,display: list-item;は要素にリスト項目を生成させます.すべてのリスト項目にはマーカがあります.これは,リスト項目を識別する行頭記号,数字またはその他のマークです.CSS2 では,list-style-type,list-style-image,list-style-position,list-style プロパティを使用してマーカの組版を指定します.CSS3 は ::marker 疑似要素を追加するので,CSS のすべての範囲のプロパティと値を用いて,リスト項目をスタイルできます.list-style-type と list-style-image プロパティは,::marker 疑似要素の既定コンテンツを設定します.
リスト項目マーカの既定コンテンツとして使用する画像を指定します.list-style-image が none または画像が無効の場合,既定コンテンツは代わりに list-style-type で与えられます.
list-style-image が none または画像が無効な場合のリスト項目マーカの既定コンテンツを指定します.それ以外の場合は無視されます.
list-item-position は,リスト項目マーカの位置を制御します.
list-style は,list-style-type,list-style-image,list-style-position を設定するためのショートハンドです.
ul.References li { list-style: check; line-height: 1.1; }
::marker を,CSS プロパティと値の全範囲を用いてスタイルできます.既定コンテンツは list-style-image と list-style-type プロパティで定義しますが,::marker のcontent プロパティを設定すると上書きできます.
counter style は,連番を表すために使用する数字,アルファベット,記号などを定義し実装します.CSS1 は,HTML が伝統的にリストとして許されているスタイルに基づいて,いくつかのカウンタスタイルを定義しました.CSS Counter Styles Level 3 はカスタムカウンタスタイルを定義するための仕組みを持っている @counter-style; ルールを定義します.
CSS3 カウンタスタイルのコアの部分は,整数カウンタ値の文字列表現を生成するアルゴリズムに名前を付けることです.カウンタスタイルには,生成された値に追加する前置や後置を示すプロパティや,負の数を示す追加の文字列なども含まれます.カウンタスタイルは,list-style-type,counters() 関数で使用できます.
次に,CSS Counter Styles Level 3 の filled-circled-decimal カウンタスタイルに基づいたmy-filled-circled-decimal カウンタスタイルの使用例を示します.その名前が示す様に,カウンタスタイルでは,十進数を表すために 黒丸で囲んだ10進数を使用します.数字の後にはスペースが続きます.カウンタスタイルは,<ol> の項目に番号を付けるときに使用します.
@counter-style my-filled-circled-decimal { system: fixed; symbols: '\2776' '\2777' '\2778' '\2779' '\277a' '\277b' '\277c' '\277d' '\277e'; /* 記号: '❶' '❷' '❸' '❹' '❺' '❻' '❼' '❽' '❾'; */ suffix: ' '; } ol.my-filled-circled-decimal li { list-style-type: my-filled-circled-decimal; } … <ol class="my-filled-circled-decimal"> <li title="1">1</li> <li title="2">2</li> </ol>
カスタムカウンタスタイルを定義できます.@counter-style ルールの一般的な形式の例は以下のとおりです.
@counter-style <counter-style-name> { <declaration-list> }
カウンタスタイル名は大文字と小文字を区別しますが,CSS Counter Styles Level 3 で定義済みカウンタスタイルの名前は大文字と小文字を区別しないで一致させます.カウンタスタイル名は none と一致できません.また,decimal と disc はカウンタスタイル名として定義できません.
宣言リストには以下の記述子が使用できます.
negative,prefix,suffix,pad,symbols の値を持つ記号と additive-symbols 記述子は文字列を指定します.
カウンタの表現を構成するために使用するアルゴリズムを指定します.
値が負の場合に表現を変更する方法を定義します.値はひとつまたはふたつの記号です.値が負の場合は,最初の記号が表現の前に付加され,2番目の記号がある場合は,その記号が表現に追加されます.以下に例を示します.
negative: "\30DE\30A4\30CA\30B9";
(japanese-informalより引用.) 負の値の前に“マイナス記号”を生成します.negative: "(" ")";
は負の値の前に“(” を生成し,“)”を負の値の後に生成します.マーカ表現の前に付ける記号を指定します.接頭辞は,負の符号の前に置かれます.
マーカ表現に追加される記号を指定します.接尾辞は,負の符号の後に来ます.
カウンタスタイル適用範囲を指定します.値は,auto または有効範囲の下限と上限をカンマで区切ったリストのいずれかです.値が autoのとき,範囲は system 値に基づいて決定されます.カウンタスタイルを使用してその範囲外の値を表す場合,カウンタスタイルは代わりにそのフォールバックカウンタスタイルを使用します.
最小数の書記素クラスタではないカウンタ表現を埋め込む記号を指定します.値は整数と記号です.表現が整数値よりも少数の書記素クラスタを有する場合,表現は記号で埋められます.最小値よりも長い表現は埋め込まれません.
現在のカウンタスタイルで表現を作成できない場合に使用されるフォールバックカウンタスタイルを指定します.
マーカ構築アルゴリズムで使用される記号を指定します.system が cyclic,numeric,alphabetic,symbolic,fixedの場合は symbols が必要であり,system がadditiveの場合はadditive-symbols が必要です.
CSS Counter Styles Level 3 は,いくつかのカウンタスタイルをあらかじめ定義しています.その中には,@counter-style で表現するのが複雑なものもあります.W3C国際化ワーキンググループによって発行されたカウンタスタイルは,世界中のさまざまな文化によって使用されるナンバリングシステム用のユーザ定義カウンタスタイル用のコード情報を提供しています.それらは,CSS Counter Styles Level 3 定義済みスタイルも含みます.
AH Formatter は以下の定義済みスタイルを実装しています* のついたスタイルは,古い list-style-type 仕様との下位互換性のためにリストされています..
14
参照先のテキストを参照元に表示するには,target-text() 関数を使います.
target-text() 関数を使った相互参照の方法は,以下のようになります.
.TitleRef { content: target-text(attr(href url), before) " " target-text(attr(href url), content); } … <h2 id="CrossRef">クロスリファレンス(相互参照)</h2> … <p>例:「<a class="TitleRef" href="#CrossRef">この章</a>」</p> <p>「この章」という文字が,参照先のタイトルに差し替わります.</p>
例:「この章」
「この章」という文字が,参照先のタイトルに差し替わります.
参照先の章番号やページ番号を自動的に付加するには,target-counter() 関数を使います.カウンタ を参照してください.
target-counter() 関数を使った相互参照の方法は,以下のようになります.
.ChapterRef::before { content: target-text(attr(href url), before) " " target-text(attr(href url), content); } .PageRef::after { content: "(ページ" target-counter(attr(href url), page) ")"; } … <a class="ChapterRef PageRef" href="#Counters">カウンタ</a>を参照
目次は,target-counter() 関数による章番号とページ番号の参照を使って作ることができます.
.TOC li.TocLevel1 > a::before { /* 目次項目に章番号を付ける */ content: "第" target-counter(attr(href url), ChapterNo) "章 "; } .TOC li.TocLevel1 > a::after { /* 目次項目にページ番号を付ける */ content: leader(space) target-counter(attr(href url), page); } … <div class="TOC"> <ul> <li class="TocLevel1"><a href="#WebvsPrint">Web とページ媒体</a></li> <li class="TocLevel1"><a href="#BoxModel">ボックスによるレイアウト</a></li> <li class="TocLevel1"><a href="#ObjectDecorate">オブジェクトの装飾</a></li> </ul> </div>
15
float: footnote; が指定されている場合,その要素の内容が脚注となります.
<style> .Footnote { float: footnote; } </style> <p><span class="code">float: footnote;</span> が指定されている場合, <span class="Footnote">その要素の内容が脚注となります.</span>.</p>
脚注エリアの設定は,@pageルールの中で @footnote ルールを使います.ページの末尾に脚注を配置するには,float: bottom page;(4.4.1 ページフロート)を使用します.脚注の番号の形式を設定するには,擬似要素の ::footnote-call と ::footnote-marker を使用します.
脚注エリアの上に罫線を引くなど,脚注エリアの設定をするために,@page ルールの中で@footnote を使用します.
@page { @footnote { float: bottom page; /* 脚注エリアは,ページの下部へのフロートとして配置される */ border-top: thin solid black; /* 脚注エリアの上の罫線を指定 */ border-length: 30%; /* 罫線の長さを指定(ページエリア幅の30%) */ padding-top: 0.5em; } }
脚注番号を設定するには,擬似要素の ::footnote-call と ::footnote-marker を使います.footnote カウンタは,脚注が生成されるたびに増加します.
::footnote-call { /* 脚注呼び出し */ content: "(" counter(footnote) ")"; font-size: 6pt; vertical-align: super; } ::footnote-marker { /* 脚注の番号 */ content: "(" counter(footnote) ")"; font-size: 1em; vertical-align: super; }
float: sidenote; が float プロパティに指定されている場合,内容は傍注となります.傍注の指定は,@page ルール内の,@sidenote ルールを使用します.傍注の番号の形式を設定するには,擬似要素の ::sidenote-call ,::sidenote-marker を使います.
Whereas recognition of the inherent dignityQuisque suscipit ante vel eros. and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world,
span.sidenote { float: sidenote; }
@page ルールの@sidenote ルールを使用して,傍注エリアの位置と範囲を設定します.
@page { @sidenote { float: outside; clear: both; width: 20%; } }
16
PDFのブックマーク(しおり)を生成できます.
ブックマークのレベルを指定します.HTMLの <h1>–<h6> 要素の見出しレベルに相当します.
ブックマークのラベルを指定します.ブックマークラベルは none の場合,要素の内容がブックマークラベルになります.
ブックマークを開いた状態にするか閉じた状態にするかを指定します.bookmark-state: closed; とすると,指定のブックマークは閉じた状態になります.
/* ブックマーク */ h1 { bookmark-level: 1; } h2 { bookmark-level: 2; bookmark-state: closed; } h3 { bookmark-level: 3; bookmark-state: closed; } h4 { bookmark-level: 4; bookmark-state: closed; } h5,h6 { bookmark-level: none; }
17
日本語文書を組版する場合の基本的なスタイル設定は,行頭約物半角固定・行末約物半角固定・段落先頭全角1字下げとなっています.
body { /* 日本語組版のための設定 */ punctuation-trim: start end adjacent; -ah-text-justify-trim: punctuation; -ah-text-autospace: ideograph-numeric ideograph-alpha; -ah-text-autospace-width: 25%; hanging-punctuation: none; } p { /* 段落 */ text-align: justify; /* 行末を揃える */ text-indent: 1em; /* 段落は全角1字下げ */ margin: 0; /* 段落間は空けない */ }
夏目 漱石(なつめ そうせき、 慶応三年一月五日(一八六七年二月九日)―大正五年(一九一六年)一二月九日)は、 日本の小説家、評論家、英文学者。 本名、金之助。 『吾輩は猫である』『こゝろ』などの作品で広く知られる、森鷗外と並ぶ明治・大正時代の文豪である。 江戸の牛込馬場下横町(現在の東京都新宿区喜久井町)出身。 俳号は愚陀仏。
大学時代に正岡子規と出会い、俳句を学ぶ。…(中略)… 当初は余裕派と呼ばれた。
「修善寺の大患」後は、『行人』『こゝろ』『硝子戸の中』などを執筆。 「則天去私」(そくてんきょし)の境地に達したといわれる。 晩年は胃潰瘍に悩まされ、『明暗』が絶筆となった。
全角約物を半角扱いにするかどうかを指定します.
約物(句読点や括弧類)が連続する場合や行頭や行末に来たとき,全角文字の約物を半角幅に詰めて,見栄えをよくします.
/* 行頭,行末,約物どうしが隣接のとき,全角約物を半角幅にします */ punctuation-trim: start end adjacent;
「《約物〔やくもの〕》、 つまり『括弧』・『句読点』の類(たぐい)です。 」
約物の詰めを無効にすると次のようになります.(punctuation-trim: none;を指定)
「《約物〔やくもの〕》、 つまり『括弧』・『句読点』の類(たぐい)です。」
日本語での追い込みの処理方法を指定します.指定された詰めを行って,行に入るだけ文字を追い込みます.
/* 行の調整のために約物を詰めます */ -ah-text-justify-trim:punctuation;
この指定により,前節で説明した約物を半角幅に詰める条件に該当しない場合でも,行末をぴったりと揃える調整のために,全角の開き括弧類の前,全角閉じ括弧類や句読点の後を,必要に応じて自動的に詰めます.
日本語で,和欧文間にアキを入れるかどうかを指定します.
このように,日本語の文章の中に欧文や算用数字が混在するとき,間に少しアキを入れて読みやすくします.
/* 漢字や仮名と数字の間,漢字や仮名と欧文の間にアキを入れます */ -ah-text-autospace: ideograph-numeric ideograph-alpha;
以下では比較のため,下側の例で -ah-text-autospace: none; を指定して和欧文間のアキを無効にしています.
「日本語にもglobalにも100%を目指すAH Formatterです」
「日本語にもglobalにも100%を目指すAH Formatterです」
日本語で,和欧文間のアキの量を指定します.
/* 和欧文間のアキの量を指定します */ -ah-text-autospace-width: 25%; /* 初期値 */
行頭での突き出し,行末でマージンにぶら下げを行うかどうかを指定します.
対象となる約物は以下のとおりです.
日本語または簡体字中国語の場合
繁體字中国語の場合
その他の場合
引用符類,閉じ括弧類,ピリオド,カンマ,ハイフン
引用符類,開き括弧類,箇条書き行頭文字/段落番号
/* 行頭での突き出し,行末でのぶら下げを行うかどうかを指定します.*/ hanging-punctuation: none; /* 初期値 */
行頭約物半角固定・行末約物全角または半角・段落先頭全角1字下げとします.
body { /* 日本語組版のための設定 */ punctuation-trim: start allow-end adjacent; -ah-text-justify-trim: punctuation; -ah-text-autospace: ideograph-numeric ideograph-alpha; -ah-text-autospace-width: 25%; hanging-punctuation: none; } p { /* 段落 */ text-align: justify; /* 行末を揃える */ text-indent: 1em; /* 段落は全角1字下げ */ margin: 0; /* 段落間は空けない */ }
夏目 漱石(なつめ そうせき、 慶応三年一月五日(一八六七年二月九日)―大正五年(一九一六年)一二月九日)は、 日本の小説家、評論家、英文学者。 本名、金之助。 『吾輩は猫である』『こゝろ』などの作品で広く知られる、森鷗外と並ぶ明治・大正時代の文豪である。 江戸の牛込馬場下横町(現在の東京都新宿区喜久井町)出身。 俳号は愚陀仏。
大学時代に正岡子規と出会い、俳句を学ぶ。…(中略)… 当初は余裕派と呼ばれた。
「修善寺の大患」後は、『行人』『こゝろ』『硝子戸の中』などを執筆。 「則天去私」(そくてんきょし)の境地に達したといわれる。 晩年は胃潰瘍に悩まされ、『明暗』が絶筆となった。
フリー百科事典『ウィキペディア』より引用
行頭約物半角固定・行末約物は句点のみ全角・段落先頭全角1字下げとします.
body { /* 日本語組版のための設定 */ punctuation-trim: start end-except-fullstop adjacent; -ah-text-justify-trim: punctuation; -ah-text-autospace: ideograph-numeric ideograph-alpha; -ah-text-autospace-width: 25%; hanging-punctuation: none; } p { /* 段落 */ text-align: justify; /* 行末を揃える */ text-indent: 1em; /* 段落は全角1字下げ */ margin: 0; /* 段落間は空けない */ }
夏目 漱石(なつめ そうせき、慶応三年一月五日(一八六七年二月九日)―大正五年(一九一六年)一二月九日)は、日本の小説家、評論家、英文学者。 本名、金之助。 『吾輩は猫である』『こゝろ』などの作品で広く知られる、森鷗外と並ぶ明治・大正時代の文豪である。 江戸の牛込馬場下横町(現在の東京都新宿区喜久井町)出身。 俳号は愚陀仏。
大学時代に正岡子規と出会い、俳句を学ぶ。…(中略)… 当初は余裕派と呼ばれた。
「修善寺の大患」後は、『行人』『こゝろ』『硝子戸の中』などを執筆。 「則天去私」(そくてんきょし)の境地に達したといわれる。 晩年は胃潰瘍に悩まされ、『明暗』が絶筆となった。
フリー百科事典『ウィキペディア』より引用
行頭約物半角固定・行末約物半角固定・段落先頭の開き括弧類は二分下げとします.
body { /* 日本語組版のための設定 */ punctuation-trim: start end adjacent; -ah-text-justify-trim: punctuation; -ah-text-autospace: ideograph-numeric ideograph-alpha; -ah-text-autospace-width: 25%; hanging-punctuation: first; } p { /* 段落 */ text-align: justify; /* 行末を揃える */ text-indent: 1em; /* 段落は全角1字下げ */ margin: 0; /* 段落間は空けない */ }
夏目 漱石(なつめ そうせき、慶応三年一月五日(一八六七年二月九日)―大正五年(一九一六年)一二月九日)は、日本の小説家、評論家、英文学者。 本名、金之助。 『吾輩は猫である』『こゝろ』などの作品で広く知られる、森鷗外と並ぶ明治・大正時代の文豪である。 江戸の牛込馬場下横町(現在の東京都新宿区喜久井町)出身。 俳号は愚陀仏。
大学時代に正岡子規と出会い、俳句を学ぶ。…(中略)… 当初は余裕派と呼ばれた。
「修善寺の大患」後は、『行人』『こゝろ』『硝子戸の中』などを執筆。 「則天去私」(そくてんきょし)の境地に達したといわれる。 晩年は胃潰瘍に悩まされ、『明暗』が絶筆となった。
フリー百科事典『ウィキペディア』より引用
縦書きの中に縦中横(たてちゅうよこ)を指定します.(縦書きの行の中に数字などを横書きにする)
/* 縦中横 */ span.TateChuYoko { display: inline-block; /* 行の中に小さなブロックを作る */ writing-mode: lr-tb; /* この小さなブロックを横書きにする */ text-align: center; /* 中央揃えに */ text-indent: 0; /* 字下げなし(段落pのtext-indentが 継承されないように) */ line-height: 1; /* 行間のアキが縦中横の上下につかないように */ } <div class="VerticalTextBlock"> … <p>縦書きの中に「<span class="TateChuYoko">'08</span>年 <span class="TateChuYoko">12</span>月<span class="TateChuYoko">8</span>日」 のように部分的に数字などを横書きにすることを「縦中横」といいます。 </p> </div>
縦書きの中に「'08年12月8日」のように部分的に数字などを横書きにすることを「縦中横」といいます。
XHTMLでは,<ruby> 要素を使うと,文字にルビ(フリガナ)を振ることができます.<rb> 要素で親文字(ルビを振る対象となる文字)を指定し,<rt> 要素でルビ文字(ルビの内容)を指定します.
これをCSSを使って実現する例を次に示しています.
/* Ruby ('html.css'より引用) */ ruby { display: ruby } rb { display: ruby-base } rt { display: ruby-text } rp { display: none }
<p><ruby><rb>吾輩</rb><rp>(</rp><rt>わがはい</rt><rp>)</rp></ruby>は猫である。</p> <p>名前はまだ無い。どこで生れたかとんと<ruby><rb>見当</rb><rp>(</rp><rt>けんとう </rt><rp>)</rp></ruby>がつかぬ。</p>
吾輩は猫である。
名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。
名前はまだ無い。 どこで生れたかとんと見当がつかぬ。
AH Formatter では,文字列に圏点を付けることができます.ただし,圏点を任意のスクリプトに付けることはできません.CJK以外では,Latn / Cyrl / Grek / Zyyy にのみ適用できます.
/* 圏点 */ span.kenten { -ah-text-emphasis-style: filled; -ah-text-emphasis-offset: 0.25; -ah-text-emphasis-font-size: 0.25; } <p>ここを<span class="kenten">圏点で強調</span>します.</p>
ここを圏点で強調します.
18
ページ媒体は,ひとつ以上のページボックスとして組版されます.ページボックスのコンテンツエリアはページエリアと呼ばれます.ページボックスのマージンエリアには,柱やノンブルなどを置きます.
欧文ページデザインの伝統は,ページの視覚的な中心は幾何学的中心上にあると考えられるので,ページエリアをページの中心より上に置きます.ノド側のマージンは伝統的に小口側のマージンよりも狭いです.これはページから別のページに目線が移動しやすいようにするためです.小口側のマージンが広いと,指でページがめくりやすいこともあります.ノド側のマージンは2本あるので,小口側の広いマージンとバランスを保てます.ページエリアの高さは,ページの幅に一致します.
実際には,ページデザインはさまざまです.印刷する「ページ」には,医薬品,販売パンフレット,児童書,部品カタログのパッケージ折り込みなどがあります.経済面を考えたりまたはオフィスプリンタで A4 またはレターサイズの用紙に印刷する必要があると,ページのデザイン性に影響を与えるかもしれません.ページエリアが見開きページで同じ位置にあるが,ページデザインが左右非対称なことは,かつては斬新なアイデアでしたが,現在は珍しいことではありません.さらに,小説は,特にページサイズの異なる製本版で販売されることが多いので,マージンを減らして同じページエリアを再利用することがあります.
日本語は横書きまたは縦書きで組むことができます.横書きのときページの進行方向は左から右,縦書きのときページの進行方向は右から左になります.横書きと縦書きが混在する場合もあります.出版物の種類によって縦書き,横書きを使う傾向がほぼ決まっています.例えば,公文書や教育資料は主に横書きですが,小説は主に縦書きです.
縦書き横書きの両方の文書で,日本語組版ではページエリアの幅を全角文字数で指定するのが標準です.@page ルールの width プロパティに em を使用して,幅を文字数で設定します.左右のマージンの値を auto に設定すると,ページの中央にページエリアを配置します.
@page { size: A4; width: 43em; /* ページエリアの幅を全角43文字に */ margin-top: 30mm; margin-bottom: 30mm; margin-left: auto; /* ページエリアをページの中央に配置 */ margin-right: auto; }
ページサイズ,マージン,ページヘッダ,ページフッタなどのページの基本的な設定は,@page ルールで行います.
@page { size: A4; margin: 25mm; @top-center { content: "Sample"; } @bottom-center { content: counter(page); } }
ページボックスの幅と高さを size プロパティで指定します.
@page { size: 210mm 297mm; /* ISO/JIS A4 */ }
@page { size: 4in 6in; }
size プロパティには,A5,A4,A3,B5,B4,JIS-B5,JIS-B4,letter,legal ledger などの規定のページサイズ名を使えますsize プロパティは,ISO標準の名前を使いますが,ISO の Bシリーズと JISで 規定している B シリーズでの寸法は異なるため,AH Formatter の独自拡張として,JIS-B5,JIS-B4 などを追加しています.これはまだ CSS ワーキングドラフトになっていません..
@page { size: A4; /* ISO/JIS A4(210mm×297mm) */ }
@page { size: JIS-B5; /* JIS B5(182mm×257mm) */ }
キーワード landscapeを同時に指定することで,横方向の印刷指定ができます.
@page { size: A4 landscape; /* A4ヨコ(297mm×210mm) */ }
margin プロパティは,margin-top,margin-bottom,margin-left,margin-rightのショートハンドです.
@pageルールの margin プロパティでページマージンを指定します.
@page { margin: 10%; /* 上下左右のマージンは,ページ幅の10%ずつ */ }
@page { /* 上下マージンを2cm,左右マージンを3cmとする */ margin-top: 2cm; margin-bottom: 2cm; margin-left: 3cm; margin-right: 3cm; }
margin-* が指定されていないときの初期値はゼロですAH Formatterでは,初期値を任意の値に設定できます.ページマージンの既定値として,2cm などが設定されていることがあります.そのとき,初期値はゼロにはなりません..(X)HTML の <body> 要素に指定された margin-* は,ページエリアの内側に取られます.したがって,(X)HTMLで @page と <html>(または <body>)要素の両方に margin-* を指定しているとマージンは合計になります.
名前付きの @page ルールを複数用意して,文書内で page プロパティにより切り替えて使うことができます.
@page Landscape { /* Landscape名前付きページ 定義 */ size: A4 landscape; } @page Portrait { /* Portrait 名前付きページ定義 */ size: A4; } table.WideTable { page: Landscape; /* 横に大きな表を Landscape ページに */ } html { page: Portrait; /* Portrait ページを既定として使用 */ }
<p>Portrait page</p> <table class="WideTable" border="1" style="width:100%"> <tr> <td>1</td> … <td>18</td> </tr> </table>
文書の総ページ数に制約を課します.制約が満たされない場合,ページの末尾に追加のページ(または複数ページ)が追加されます.ページ数を制約する理由としては,用紙の両面に印刷されたオフィス文書は偶数ページが必要な場合があったり,小冊子 として印刷する文書は,4ページの倍数,商業用印刷機で印刷する文書は,1枚の用紙に8,16,32 または64ページで印刷し,折り畳んで,裁ち落とす場合があるからです.
例えば,5ページの文書を生成する場合:
@page ルールはページボックスを定義します.ページボックスの大きさは @page ルールの size で定義しますが,それよりも大きな用紙に印刷できます.その目的は,画像やその他のコンテンツをページボックスの端まで拡張するためです.プリンタのような物理的デバイスは,通常,用紙の端のまわりに印刷できないエリアを有しており,そこにコンテンツがあれば,印刷できません.大きな用紙にページボックスを印刷し,ページボックスのサイズに合わせて用紙を詰めると,印刷できないエリアの問題が回避されます.画像などをページボックスの外側の裁ち落しエリアに拡張すると,仕上がり寸法が不正確な場合の問題を回避できます.
コーナートンボとセンタートンボは,ページボックスの外側に印刷され,用紙のサイズを仕上がり寸法に処理し,両面に印刷されたコンテンツが正確に位置していることを確認するガイドとして使用します.ページボックスの外側に印刷される情報としては,多色刷りの見当合せのための色見本,ページ,ページを含む文書,バージョン番号などを識別する情報などがあります.
印刷時にトンボを印刷するかどうかを指定します.
ページボックスの四隅にコーナートンボ,また四辺の中央にセンタートンボを出力できます.コーナートンボは,仕上がり寸法に詰め処理するための位置,センタートンボは,多色刷りの見当合せのために,また用紙の表と裏の位置を合わせるのに役立ちます.外部参照画像の位置を指定して,カスタムトンボを出力することもできます.
@page { size: B5; /* ISO B5(176mm 250mm) */ margin: 28mm 21.325mm; marks: crop cross; /* トンボの表示 */ -ah-crop-offset: 14mm; /* 出力媒体の物理的な端から仕上がり寸法までの距離 */ -ah-printer-marks-line-color: auto; /* トンボの線の色 */ -ah-printer-marks-line-length: 10mm; /* トンボの線の長さ */ -ah-printer-marks-line-width: 0.12mm; /* トンボの線の幅 */ bleed: 3mm; /* 裁ち落としの長さ */ }
仕上がり寸法からはみ出したエリアを表示するかどうか指定します.
トンボの線の色を指定します.値が auto のときは,レジストレーションカラーとみなされます.
トンボの線の長さを指定します.値が auto のときは,システム既定値に依存します.トンボの既定値の長さは10mmですが,変更できます.
トンボの線の幅を指定します.値が auto のときは,システム既定値に依存します.トンボの既定値の幅は0.2ptですが,変更できます.
出力媒体の物理的な端から仕上がり寸法までの距離を指定します.
画像などでは,ページの裁ち落としの端を超えて塗り足し部分まで一杯に入れることがあります.画像をページの端まで一杯に拡張するのは,有意義な効果があります.ページの端までぎりぎりに拡張する場合,不正確な裁ち切り処理で画像の外端側に空白を残す可能性があります.画像をページの端を超えて拡張し,仕上がりサイズに裁ち切ることで,このような問題を回避できます.
裁ち落し(塗り足し)の幅を指定します.裁ち落しエリアは,仕上がり寸法の外側に取られます.マージンボックスのマージンに負の値を指定することで,裁ち落しエリアまでブロックの範囲を伸ばすことができます.
19
ページヘッダやページフッタは,ページの周辺のマージンボックスと呼ばれるエリアに割り当てます.
マージンボックスは,@top-left-corner,@top-left,@top-center,@top-right,@top-right-corner,@left-top,@left-middle,@left-bottom,@right-top,@right-middle,@right-bottom,@bottom-left-corner,@bottom-left,@bottom-center,@bottom-right,@bottom-right-cornerのように,ページ周辺の位置により名前がついています.
@page { @top-right { /* ページ見出し */ content: "Sample"; } @bottom-center { /* ページフッタ */ content: counter(page); } }
ページヘッダに本文中の見出しからとった文字列を表示できます.
@page { @top-left { content: string(Chapter); } } h1 { string-set: Chapter content(); }
文字列を名前付きの変数にするには,string-set プロパティを使います.
string-set の値は変数名とその変数に格納するコンテンツリストのペアになります.変数の値(内容)は,柱(ランニングヘッダ)で参照されます.
コンテンツリストは,任意の順序で,以下のいずれかひとつ以上になります.
h1 { /* Chapter content(before) content()に h1:before と h1 自身の内容をセットします*/ string-set: Chapter content(before) content(); }
名前付き文字列(変数)の値を文書にコピーするのに使用します.
string-set で定義した変数は,例えば,柱(ランニングヘッダ)に content: string(Chapter); のように参照されます.
必要とされる最初の値は名前付き文字列です.
@top-right { /* 右先頭ページのタイトル*/ content: string(Chapter); }
ひとつのページの複数要素がそれぞれの同名の名前付き文字列の値を設定する場合,名前付き文字列はそのページに複数の値を持つことがあります.string() の2番目の引数で使用可能な値を指定もできます.
@page Index:right { @top-left { content: string(IndexTerm, first); } @top-right { content: string(IndexTerm, last); } }
要素をマージンボックスに表示させるには,position: running(name); を使用します.引数の名前は,element() 関数で要素が参照される名前です.
position: running(name); の要素は,あるべき位置に表示されません.あたかも display: none; が設定されているように扱われます.
p.Title { position: running(Title); text-indent: 0; }
running 要素をマージンボックスにコピーするのに使用します.
position: running(name); を使用して,あるべき配置から取り出した要素は,柱(ランニングヘッダ)内で content: element(name); として参照されます.running 要素は,疑似要素とその子孫を含め,ひとつの要素を持つことができます.string()と異なり,element() は他の値と組み合わせることができません.
running 要素は,文書の普通の配置を継承します.
必要とされる最初の値は,running 要素名前です.
@top-left { /* 左ページ見出しのタイトル*/ content: element(Title); }
ひとつのページの複数要素がそれぞれの同名の running 要素の値を設定する場合,running 要素はそのページに複数の値を持つことがあります.element() の2番目の引数で使用可能な値を指定もできます.
ノンブル(ページ番号)の出力には,ページカウンタcounter(page) を使いますcounter() は CSS2.1 で規定されていますが,CSS3 ではページコンテキストにページ番号を表す専用のカウンタが導入されます..
@page { @top-right { content: "Page " counter(page); } }
"" のように,現在のページ番号とともに総ページ数を出力できます.
@page { @top-right { content: counter(pages);のページカウンタ(実際の物理ページ) } }
ページのマージンは,ページのマージンボックスの内容とスタイル同様に :blank 擬似クラスを使用してコンテンツがあるかどうかを考慮して設定できます.例えば,左右のページに異なる柱を設定できます.最初のページで柱の内容が異なる場合があります.最初のページの左ページの左側と右ページの右側にあるタイトルとページ番号を非表示にすることもできます.
名前付きページと一緒に使用すると,左ページと右ページ,および名前付きページの最初のページのスタイルを指定できます.擬似クラスを組み合わせて,例えば,空白の左ページに対して別のページルールを作成することは可能です.
@page Chapter:left { /* 左ページ設定 */ margin-left: 23mm; margin-right: 27mm; @top-left { /* 左ページの柱に本のタイトル */ content: string(Title); } @bottom-left { /* ノンブル(ページ番号) */ content: counter(page); } } @page Chapter:right { /* 右ページ設定 */ margin-left: 27mm; margin-right: 23mm; @top-right { /* 右ページの柱に節のタイトル */ content: string(Section); } @bottom-right { /* ノンブル(ページ番号) */ content: counter(page); } } @page Chapter:first { /* Chapterの先頭ページ設定 */ /* ページ見出し非表示 */ @top-right { content: none } @top-left { content: none } } @page Preface:blank { /* 前置きと目次の間の空白ページ */ @bottom-left { content: none; } @bottom-right { content: none; } }
このふたつは AH Formatter の拡張です.:last は最後のページ,:only は唯一のページを指定します.
文書全体の文字,行,ページの進行方向を設定するには,ルート要素に writing-mode を指定します.初期値は writing-mode: lr-tb
(left-to-right,top-to-bottom)で,横書き,すなわち文字の進行方向は左から右,行とブロックの進行方向は上から下,ページは左から右への進行となりますルート要素の writing-mode の設定は,ページボックスに継承され,さらにマージンボックスに継承されます..
日本語の縦書きを指定するには,writing-mode: tb-rl
を指定します.文字の進行方向が上から下,行とブロックの進行方向が右から左,ページの進行方向が右から左となります.
body { writing-mode: tb-rl; /* 縦書き */ }
20
Portable Document Format(PDF)は,ページ組版の最も一般的な出力形式です.AH Formatter は PDFの機能を駆使するための複数の拡張を提供しています.
PDF仕様は,最初のバージョンが1993年に公開されて以来,複数のバージョンを公開しています.公開ごとに新機能が追加されました.PDFバージョンで廃止されていない機能はすべて,後続のバージョンにも含まれます.PDFファイルには,適合するPDFバージョンを識別する情報が含まれています.PDFリーダは,ファイルのバージョンがリーダが実装しているバージョンより新しい場合でも,すべてのPDFファイルを読み取ろうとします.
バージョン | 年 | Acrobat Reader バージョン |
---|---|---|
1.3 | 2000 | 4.0 |
1.4 | 2001 | 5.0 |
1.5 | 2003 | 6.0 |
1.6 | 2004 | 7.0 |
1.7 | 2008 | 8 |
2.0 | 2017 | – |
ISOによって標準化されたPDFの特殊なサブセットもあります.これらの中には,それぞれの特定のPDFバージョンに基づいた複数バージョンを持つものもありますAH Formatter は PDF/E,PDF/VT のいずれも生成しません..
「タグ付きPDF」は,個別のPDF仕様ではありません.文書の論理構造に関する追加情報をもつPDFファイルです.タグ付きPDFは,最初にPDF 1.4で定義されました.
タグ付きPDFのテキスト,グラフィクス,イメージは,例えば視覚障害のあるユーザがコンテンツにアクセスしたり,他の目的で抽出して再利用できます.PDF/UA は,追加条件にも適合するタグ付き PDFファイルです.
AH Formatterは,HTML/CSS要素と疑似要素のPDFタグ(StructElem)を次の表が示すように埋め込みます.
HTMLの要素 | PDF の要素 |
---|---|
html | Document |
div | Div |
h1 | H1 |
h2 | H2 |
h3 | H3 |
h4 | H4 |
h5 | H5 |
h6 | H6 |
p | P |
ul | L |
ol | L |
li | LI |
li::marker | Lbl |
dl | L |
dt | Lbl |
dd | LBody |
blockquote | BlockQuote |
caption | Caption |
table | Table |
tr | TR |
td | TD |
th | TH |
thead | THead |
tfoot | TFoot |
tbody | TBody |
ruby | Ruby |
rb | RB |
rt | RT |
span | Span |
img | Figure |
a[href] | Link |
その他のブロック要素 | Div |
その他のインライン要素 | Span |
タグ付きPDFを生成する際に,指定された名前が標準のPDFタグ名でない場合,PDFのロールマップを生成して,その名前を標準の PDFタグ名へ割り当てます.提供された名前が標準のPDFタグ名のひとつである場合,その名前はそのまま使用されます.
div.TOC { page-break-before: right; page: TOC; -ah-pdftag: 'Sect'; }
PDF/Xは,ISO 15930 で規定されており,印刷用のグラフィクス交換を目的としたPDFのサブセットです.基本的には,印刷するためのすべての情報がPDFファイル内に含まれています.
AH Formatter は,複数のPDF/X バージョンに対応しています.
要件 | PDF/X-1a | PDF/X-2 | PDF/X-3 | PDF/X-4 |
---|---|---|---|---|
フォントはすべて埋め込まれなければならない | ○ | ○ | ○ | ○ |
出力インテントが指定されていなければならない | ○ | ○ | ○ | ○ |
出力インテントとして指定されたICCカラープロファイルを埋め込まなければならない | × | × | × | ○ |
CMYK,スポットカラーをサポートする | ○ | ○ | ○ | ○ |
グレイスケールをサポートする | ○ | ○ | ○ | ○ |
RGBをサポートする | × | ○ | ○ | ○ |
透明をサポートする | × | × | × | ○ |
パスワードの設定や,印刷制限,変更制限などを行ってよい | × | × | × | × |
リンクや注釈などを含めてよい | × | × | × | × |
PDF/Aは ISO 19005で規定されており,電子文書の長期保存を目的としたPDFのサブセットです.
要件 | PDF/A-1a | PDF/A-1b | PDF/A-2a | PDF/A-2b | PDF/A-2u | PDF/A-3a | PDF/A-3b | PDF/A-3u |
---|---|---|---|---|---|---|---|---|
フォントはすべて埋め込まれなければならない | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
ICCカラープロファイルを埋め込まなければならない | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
タグ付けされていなければならない | ○ | × | ○ | × | × | ○ | × | × |
XMP 準拠のメタデータを含んでいなければならない | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
暗号化してよい | × | × | × | × | × | × | × | × |
LZW圧縮してよい | × | × | × | × | × | × | × | × |
透明な画像を含めてよい | × | × | ○ | ○ | ○ | ○ | ○ | ○ |
外部コンテンツを参照してよい | × | × | × | × | × | × | × | × |
JavaScriptを含めてよい | × | × | × | × | × | × | × | × |
テキストにUnicodeが使用されなければならない | ○ | × | ○ | × | ○ | ○ | × | ○ |
PDF/A 以外の任意のファイルを注釈として添付できる | × | × | × | × | × | ○ | ○ | ○ |
PDF/UAは,ISO 14289-1で規定されており,ISO 32000-1(PDF 1.7)仕様に基づいたPDFのアクセシビリティ向上を目的とした仕様です.
PDF/UAの大きな特徴は以下が挙げられます.
画像または数式の代替テキストは,-ah-alttextプロパティ,リンクは -ah-annotation-contentsプロパティで指定できます.
PDF 協会(PDF Association)が公開したマッターホルンプロトコル(Matterhorn Protocol)は,PDFが PDF/UAに準拠しない可能性のあるすべての方法のチェックリストです.マッターホルンプロトコルhttps://www.pdfa.org/publication/the-matterhorn-protocol-1-02/ 文書は,136の失敗条件から成る31のチェックポイン トで構成されています.一部の失敗条件は,プログラミングでチェックできますが,人の手によるレビューが必要な場合があります.
Access For All による PDFアクセシビリティ チェッカー 3http://www.access-for-all.ch/en/pdf-lab/536-pdf-accessibility-checker-pac-3.html (PAC 3) は,PDF/UA準拠のPDFファイルを チェックするフリーウェアのWindows版用のユーティリティです.プログラムは マッターホルンプロトコルチェックを実装しています.PAC 3でPDFファイルを開くと,プログラムはチェックを実行し,結果の要約を表示します.インタラクティブなチェックがないので,プログラムは,人の手によるチェックを必要とする失敗について警告するだけです.
この拡張は <meta> 要素を使用します.以下に例を示します.
<meta name="document-title" content="The document title"/> <meta name="subject" content="The document subject"/> <meta name="author" content="The author"/> <meta name="keywords" content="Comma, separated, keywords, list"/> …
以下のname値を持つ<meta>は,PDFの文書カタログに格納されている情報を提供します.
XMPは,ファイルまたは画像についてメタデータを表現するための標準XML形式です.元々はAdobeで開発され,現在は ISO 16684-1:2012で標準化されています.標準であるため,例えば,デジタルカメラで写した写真に埋め込まれているXMPは,画像を編集する写真編集プログラムによって変更または拡張できます.また,PDFファイル内のすべての画像のXMPを,PDFファイルに埋め込むことが可能です.
XMP 標準自体は,Dublin Core ,RDFなどの他のメタデータ標準に一部基づいています.
AH Formatter が生成するPDFにはXMPが埋め込まれています.
PDFファイルから抽出されたXMPの一部を以下に示します.次の図は,Acrobatで表示されたものと同じXMPを示しています.
<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c015 84.159810, 2016/09/10-02:41:30"> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" … > <pdfuaid:part>1</pdfuaid:part> <xmpMM:DocumentID>uuid:3DF8C5A6-E99A-6946-98C4-644ABDB67511</xmpMM:DocumentID> <xmpMM:VersionID>1</xmpMM:VersionID> <xmpMM:RenditionClass>default</xmpMM:RenditionClass> <pdf:Producer>Antenna House PDF Output Library 6.5.1299 (Windows (x64))</pdf:Producer> <pdf:Keywords>"CSS, formatting"</pdf:Keywords> <pdf:Trapped>Unknown</pdf:Trapped> … <dc:description> <rdf:Alt> <rdf:li xml:lang="x-default">CSS formatting</rdf:li> </rdf:Alt> </dc:description> <dc:title> <rdf:Alt> <rdf:li xml:lang="x-default">CSSページ組版入門</rdf:li> </rdf:Alt> </dc:title> <dc:creator> <rdf:Seq> <rdf:li>アンテナハウス株式会社</rdf:li> </rdf:Seq> </dc:creator> …
次のname 値を持つ<meta> は,最初にリーダで開いたときのPDFの表示方法を制御します.記述のない限り,利用できる値は true ,falseで,その name 値を持つ<meta> が存在しない場合,既定値は false となります.
AH Formatter は,次のCSSセレクタと疑似要素に対応しています.
パターン | 意味 |
* | すべての要素 |
E | E型の要素 |
ns|E | 名前空間 ns の中のE型の要素 |
E.warning | class warningに属する E 要素 |
E#myid | myid と同値のIDを持つE 要素 |
E F | E 要素の子孫である F 要素 |
E > F | E 要素の子である F 要素 |
E + F | E 要素が直前に現れるF 要素 |
E ~ F | E 要素が前に現れるF 要素 |
E:not(s) | 単純なセレクタsと一致しない E 要素 |
E[foo] | foo 属性を持つ E 要素 |
E[foo="bar"] | foo 属性の値 が bar と 同値である E 要素 |
E[foo~="bar"] | foo 属性値が空白区切りの値のリストであり,その値のひとつが bar である E 要素 |
E[foo|="en"] | foo 属性値が en で始まるハイフン区切りの値のリストである E 要素 |
E[foo^="bar"] | foo 属性値が bar で始まる E 要素 |
E[foo$="bar"] | foo 属性値が bar で終わる E 要素 |
E[foo*="bar"] | foo 属性値が bar を含む E 要素 |
E:lang(ja) | 日本語で書かれているとタグ付けされた E 型の要素 |
E:link | ハイパーリンクのアンカーである E 要素 |
E:root | E 要素,文書のルート |
E:empty | 子要素を持たない E 要素(テキストノードもない) |
E:nth-child(n) | E 要素,親の n番目の子 |
E:nth-last-child(n) | E 要素,親の n番目の子,最後の子から数える |
E:first-child | E 要素,親の最初の子 |
E:last-child | E 要素,親の最後の子 |
E:only-child | E 要素,親の子のみ |
E:nth-of-type(n) | E 要素,その型(type)の n番目の兄弟 |
E:nth-last-of-type(n) | E 要素,その型(type)の n番目の兄弟,最後の兄弟から数える |
E:first-of-type | E 要素,その型の最初の兄弟 |
E:last-of-type | E 要素,その型(type)の最後の兄弟 |
E:only-of-type | E 要素,その型(type)の兄弟のみ |
E::first-letter | E 要素の最初に組版された文字 |
E::first-line | E 要素の最初に組版された行 |
E::before | E 要素の前に生成されコンテンツ |
E::after | E 要素の後に生成されコンテンツ |
E::marker | 表示プロパティが list-item に設定されている E 要素のマーカ |
E::footnote-call | 脚注エリアに移動した E 要素の代わりに残された生成コンテンツ |
E::footnote-marker | 脚注エリアに移動した E 要素の ::before 疑似要素を置き換える生成コンテンツ |
E::sidenote-call AH 独自拡張 | 傍注エリアに移動した E 要素の代わりに残された生成コンテンツ |
E::sidenote-marker AH 独自拡張 | 傍注エリアに移動した E要素の ::before 擬似要素を置き換える生成コンテンツ |
ここまで,CSSによるページ組版で何ができるかをざっと紹介しました.以下は関係する主なCSSの仕様で,AH Formatter が実装を進めているものです.
AH Formatter は,XSL-FOによる組版も行えます.
CSSページ組版入門 | |||||||||
| |||||||||
著者 | アンテナハウス株式会社 | ||||||||
発行所 | アンテナハウス株式会社 | ||||||||
3844〒103-0004 東京都中央区東日本橋2丁目1番6号 東日本橋藤和ビル5階 TEL:03-5829-9021 FAX:03-5829-9023 |
|||||||||
Copyright © | 2018アンテナハウス株式会社 | ||||||||
Webページ | https://www.antenna.co.jp/ | ||||||||
本冊子の内容は XHTML5(XMLシリーズのHTML5)で記述しています.目次と索引はXSLTを使用して更新しています.CSS スタイルシートでスタイルを指定しています.本冊子は,AH Formatter V6.6で組版し,PDF化しました. | |||||||||