CSSページ組版入門

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 CSS Formatter

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 構文,borderpaddingfont-size などの通常のプロパティの使用には精通しているはずです.本書ではこれらについて説明しますが,詳細については説明しません.

もし既にページ組版以外のCSS のほとんどの点に精通しているなら,ColorsPDF BookmarksPage SettingHeaders and FootersPDF Output がかなり役に立つ章となるでしょう.

また本書は,CSS ページ組版入門編であるため,CSS,AH Formatter のすべてのプロパティ,セレクタ,規則,機能を説明することを意図していません.利用可能な全範囲の機能の詳細については,CSS仕様書,お使いのバージョンの AH Formatter のオンラインマニュアルを参照してください.

本書で使用されている表記規則

フィードバック

本書に関して改善のご提案を歓迎いたします.xml-info@antenna.co.jp 宛てにご意見,修正,改善のご提案などご連絡いただければ幸いです.

目次

Web とページ媒体

1

@mediaルール

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> 要素

<style> 要素には文書のスタイル情報が含まれています.HTML 4.01では,<style><head> 内のみに現れます.HTML5では,<style><body> 内でも使用できます.

<style type="text/css" media="print">
…
</style>

@import ルール

印刷向けスタイルシートを別の 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ページに跨る場合は特に気になるところです.要素間または要素内での分割を強制的に行ったり,禁止するプロパティがあります.widowsorphans プロパティはテキストブロックの内の分割前後の最小行数を制御します.

フロート

ページ概念のない媒体では,ボックスは左右にフロートさせることが可能です.ページ媒体では,ボックスはページの上部または下部にフロートさせることもできます(AH Formatter はフロートのより詳細な制御を実装しています).画像もフロートさせることができます.フロートを使って傍注や脚注も配置できます.

ページ媒体(例えば書籍)は,ページ間を移動するための非常に良くできた決まりごとを持っています.

一般的にページには番号を振り,前付には本文と異なるスタイルで番号を振ることがあります.

書籍では,ページ番号や,章や節の見出しがページ上に表示されます.辞書には,各ページの最初と最後の項目を示すための独自の規則があります.CSS は,そういった情報を表示するために,ページの端の周りに16のエリアを定義しています.

目次と索引を使えば,順を追わず情報にアクセスすることが容易にできます.

章(または重要な内容)が,右側のページから始まり(左から右へ記述する言語の文書の場合),章の始めが他のページと異なる体裁を持つ場合もあります.(ヘッダ・フッタなどが異なる可能性があります.)

左・右ページ

製本用にページの両面に印刷された文書(オフィスプリンタで両面印刷してフォルダに入れた文書も含めて)は,左ページと右ページを持つ見開きページの形状を持ちます.また,製本された文書では,背表紙の近くのページの内側の端を読むよりも,ページの外側の端にある内容を読むほうが簡単です.

これらのすべての側面はページデザインに影響する可能性があります.例えば,章の開始は横組の本では一般的に見開きの右側にあります.縦組の本では逆に見開きの左側にあります.ページのノンブルや色々なナビゲーションの機能は,ページをめくるときに簡単に目につくように各ページの外側の端(小口より)またはその近くにある場合が多いでしょう.文書を見開きのシーケンスとみなすと,見開きページがどのように対称でなければならないか,グラフィクスなどが見開きページに跨るかどうかなど,問題が湧いてきます.

印刷本

画面上の見た目のみではなく,文書を印刷するとなると色々なことを考える必要があります.

ページサイズの制限がある場合があります.エンドユーザによって印刷されることを意図した文書はオフィスのプリンタの用紙サイズに合うようにサイズを設定できます.米国におけるレターサイズ,世界のほとんどの地域でA4,日本ではA4 または JIS-B5などがあります.一方,車のハンドブックは車のダッシュボードに入るサイズでしょう.文庫本は従来の決まったサイズがあり,規格外のサイズを選択すると,書籍の販売に影響する可能性があります.

用紙が十分に不透明でない場合,用紙の反対側のテキストが透けて見えることがあります.用紙の両面のテキストが揃っていないと,見栄えはよくありません.

テキスト揃え・揃えなしの透明の効果

ページの端まで広がった画像や他のデザイン要素は,ページの端を超えて印刷する必要がある場合があります( Page Settingを参照してください).ページの端に塗り足しがない場合,印刷して製本してページを正しい仕上がりサイズにすると,画像とページの端との間に白い帯ができてしまいます.逆に,仕上がりサイズに大幅に裁ち切る場合,画像はページの端の近くに置かない方がよいでしょう.

本をデザインするときには,製本方法まで考慮する必要があるでしょう.製本綴じまたはリング綴じでは,見開きページのノドマージンエリアを減らすことができます.中綴じのように本のページが束に集められて仕上がりサイズに裁ち切られる場合,束の真ん中のページは,束の外側のページよりも小口側が多く裁ち切られている可能性があります.

製本方法の効果

ボックスによるレイアウト

2

ボックスモデル

CSSでは,すべてはボックスで構成されます.文書を構成する要素とテキストのツリーは,ボックスのツリーに変換されます.ある要素は複数ボックスを生成し(例:<li>),ある要素は何も生成しません(例えば,<col> のような要素,あるいは,display: none; 指定の要素).ボックスを幅広い意味で分類すると,ブロックレベル,行,インラインレベルのボックスがあります.段落などのブロックレベルのボックスには,他のブロックレベルのボックスまたは行ボックスが含まれます.例えば,段落にテキストとリストが含まれている場合,ボックスがブロックレベルと行の両方のボックスを持たないようにひとつ以上の匿名ボックスがテキストの行ボックスの周囲に作成されます.行ボックスにはひとつまたは複数のインラインレベルのボックスが含まれます.フォントまたはスタイルの変更ごとに別々のインラインレベルのボックスが生成されるためです.

ボックスのエリアと端

それぞれのボックスがコンテンツエリアを持ち,コンテンツの端はコンテンツエリアの境界になります.パディングエリアはコンテンツエリアを囲み,そのパディングエリアはパディング端が境界となっています.同様に,ボーダーはパディングを囲み,マージンはボーダーを囲んでいます.CSS定義におけるボックスのエリア生成において,上記の説明ではパディング,ボーダー,マージンはあたかも一定の幅を持っているように見えますが,パディング,ボーダー,マージンの値がゼロに設定されているときがあります.

ボックスの表示と印刷

CSSでは,最下位の文字列を含むボックスから,最上位のルート要素のボックスまで階層構造になっています.出力先が画面のときは,ルート要素のボックスを画面に表示します.出力先がページ媒体のときは,ページボックスでページの雛形を設定し,ページに他のボックスを配置します.

ボックスの画面表示と印刷の対応関係
ボックスの画面表示と印刷の対応関係

表示形式:display プロパティ

初期値inline 適用対象:すべての要素 値の継承:しない

要素の表示方法を制御するには,display プロパティを使います.

display プロパティは,要素の表示形式を変更するだけで,要素のもつ役割は変更しません.

ボックスの配置

表以外のボックスは,内側から,コンテンツ,パディング,ボーダー(境界)をもち,最外部にマージンをもちます.それぞれに特有のプロパティによってレイアウト特性を指定します.ページボックス,ルート要素のボックス,ブロックのボックスという階層構造になっているとき,それぞれのコンテンツ,パディング,ボーダーは,次の図のように配置されます.表については,表組を参照してください.

ボックスの配置

ボックスの大きさを決める特性

ボックスの大きさは,コンテンツの幅と高さとその周りのパディング,ボーダー,マージンの四つの特性値の合計となります.

コンテンツの幅:width プロパティ

初期値auto 適用対象:すべての要素表の行,および文字列などを含むインライン要素の幅は,自動的に決定されますので適用対象外です.ただし,インライン要素のうちイメージ要素には適用されます.min-width,max-widthプロパティも同様です. 値の継承:しない

コンテンツの幅を指定します.

コンテンツの最小幅:min-width プロパティ

初期値:0 適用対象:すべての要素 値の継承:しない

コンテンツの最大幅:max-width プロパティ

初期値none 適用対象:すべての要素 値の継承:しない

コンテンツの高さ:height プロパティ

初期値auto 適用対象:すべての要素表の列,および文字列などを含むインライン要素の高さは,自動的に決定されますので適用対象外です.ただし,インライン要素のうちイメージには適用されます. 値の継承:しない

コンテンツの高さを指定します.

コンテンツの最小 高さ:min-height プロパティ

初期値:0 適用対象:すべての要素 値の継承:しない

コンテンツの最大 高さ:max-height プロパティ

初期値none 適用対象:すべての要素 値の継承:しない

パディングの幅:padding プロパティ

初期値:0 適用対象:すべての要素表の行,列,表の見出し,フッタは適用対象外です. 値の継承:しない

padding-toppadding-bottompadding-leftpadding-rightに上下左右のパディングの幅を指定するショートハンドプロパティ(複数のプロパティの値をひとつのプロパティで指定するためのもので,本書ではショートハンドと略記します.)です.paddingに四辺の値を同時に指定できます(ショートハンドの指定方法については オブジェクトの装飾 を参照してください).

ボーダーの幅(太さ):border-width プロパティ

初期値:medium 適用対象:すべての要素 値の継承:しない

border-top-widthborder-bottom-widthborder-left-widthborder-right-widthに上下左右のボーダーの幅を指定するショートハンドです.border-widthに四辺の値を同時に指定できます.

ボーダーは,border-color で色,border-style で線種(スタイル)の特性も指定できます.ボーダーの幅,色,線種については オブジェクトの装飾 を参照してください.

マージン の幅:margin プロパティ

初期値:0 適用対象:ほぼすべての要素値の継承:しない

margin-topmargin-bottommargin-leftmargin-rightに上下左右のマージンの幅を指定するショートハンドです.marginに四辺の値を同時に指定できます.

マージンの値はマイナスになることがあります.マイナスを指定された辺は,包含するボックス からはみ出します.

ボックスモデルの変更:box-sizing プロパティ CSS3

初期値content-box 適用対象:幅または高さを受け入れるすべての要素値の継承:しない

指定された幅と高さの内側または外側にパディングとボーダーを描画するかどうかを指定します.widthheight プロパティのautoには影響しません.

  • content-box:指定された幅と高さは要素のコンテンツボックスに適用されます.
  • border-box:指定された幅と高さは要素のボーダーボックスに適用されます.

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 の例が示す様に,指定する数によって異なる辺に設定できます.

ボーダーのスタイル:border-style プロパティ

初期値:プロパティを参照 適用対象:すべての要素 値の継承:しない

1~4のコンポーネント値は,四辺すべてのボーダースタイルを設定します.

以下のスタイルが使用可能です.

none:ボーダーはありません.(幅 = 0)

hidden:ボーダーは非表示です.

solid:実線

double:二重線

dotted:点線

dashed:破線

dot-dash:一点鎖線

dot-dot-dash:二点鎖線

wave:波線

groove:立体的にへこんだように見える線

ridge:立体的に隆起したように見える線

inset:ボーダーの範囲が立体的にへこんだように見える線

outset:ボーダーの範囲が立体的に隆起したように見える線

個別のボーダースタイルプロパティは,border-top-styleborder-bottom-styleborder-left-styleborder-right-styleで,初期値はnoneです.

ボーダーの幅:border-width プロパティ

初期値:プロパティを参照 適用対象:すべての要素 値の継承:しない

1~4のコンポーネント値は,四辺すべてのボーダー幅を設定します.

thin:細いボーダー

medium:通常のボーダー

thick:太いボーダー

<length>:ボーダーの長さの明示的な値.負の値は使えません.(例:border-width: 2pt;

個別のボーダーの幅プロパティは,border-top-widthborder-bottom-widthborder-left-widthborder-right-widthで,初期値はmediumです.

ボーダーの色:border-color プロパティ

初期値:プロパティを参照 適用対象:すべての要素 値の継承:しない

1~4のコンポーネント値は,四辺すべてのボーダー色を設定します.

個別のボーダースタイルプロパティは,border-top-colorborder-bottom-colorborder-left-colorborder-right-colorで,初期値は文字の色です.

各辺のボーダープロパティ:border-top/border-bottom/border-left/border-right プロパティ

初期値:プロパティを参照適用対象:すべての要素 値の継承:しない

各プロパティは,ボックスの上下左右のボーダーの幅,スタイル,色を指定します.

ボーダーショートハンド:border プロパティ

初期値:プロパティを参照適用対象:すべての要素 値の継承:しない

ボックスの四辺すべてのボーダーの幅,スタイル,色を指定します.

角丸:border-radius プロパティ CSS3

初期値:0 適用対象:すべての要素 値の継承:しない

ボーダーの角を丸くするには,border-radius プロパティで丸め半径を指定します.

<p style="border-radius: 18pt; /* 角の丸め半径  */
          border: solid green;
          padding: 6pt">‘border-radius’ (丸め罫)を…

‘border-radius’ (丸め罫)を指定します.

四つの角の丸め半径を次のプロパティを使って個別に指定もできます.border-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusborder-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 プロパティ CSS3

初期値none 適用対象:すべての要素 値の継承:しない

ボックスに影を付けるには,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-radiusbox-shadowにも影響します.

背景色:background-color プロパティ

初期値transparent 適用対象:すべての要素 値の継承:しない

ボックスの背景色を指定するには,background-color プロパティを使います.初期値の transparent(透明)は,親要素などの内容が透けて見える状態です.

背景色が適用される範囲は,通常のボックスについてはコンテンツ,パディング,ボーダーです.マージンは常に透明で,背景色は適用されません.

背景色の適用範囲

背景画像:background-image プロパティ

初期値none 適用対象:すべての要素 値の継承:しない

背景画像を指定するには,background-image プロパティを使います.画像は背景色の上に表示されます.

背景画像の繰り返し:background-repeat プロパティ

初期値repeat 適用対象:すべての要素 値の継承:しない

background-repeat は,背景イメージを繰り返し使うかどうか,どのようにして繰り返すかを指定します.

背景画像の位置:background-position プロパティ

初期値:0% 0% 適用対象:すべての要素 値の継承:しない

background-position プロパティは,背景画像の表示開始位置を指定します.水平位置と垂直位置の一方または両方を指定できます.指定した値がひとつであれば,ふたつめの値はcenterとみなされます.指定した値がふたつあれば,最初の値は横方向の位置を表し,2番目の値は縦方向の位置を表します.数値には負の値も指定できます.

横方向の位置を次のように指定します.

縦方向の位置を次のように指定します.

段落設定

4

行揃え

行揃え:text-align プロパティ

初期値:文字の表示方向に依存 適用対象:ブロック要素 値の継承:する

ブロックレベル要素内のテキストを左揃え,右揃え,中央揃え,均等配置にします.text-align プロパティは,CSS3で startend の値が拡張されています.startendwriting-modeプロパティの指定によって左右への対応付けが変わります.左から右に書く指定ではstartは左に,右から左に書く指定ではstartは右になります.endはその逆です.

left:左揃え

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.

right:右揃え

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.

center:中央揃え

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.

inside:ノド側に揃え AH 独自拡張

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.

outside:小口側に揃え AH 独自拡張

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.

start:先頭揃え

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.

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.

justify:均等配置

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; を指定すると,テキストを上下に揃えます.

start:先頭揃え

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。


end:末尾揃え

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。

最終行の配置:text-align-last プロパティ CSS3

初期値start 適用対象:すべての要素 値の継承:する

text-align-last は,ブロックの最後の行または強制改行の直前の行の配置を指定します.

text-align-last: left 最終行の左揃え

AH Formatter は、 CSS 2.1 および CSS3 に対応しています。CSS3 のページモデルにも対応しているため、高品質なページ組版が実現できます。HTML/XHTMLについては、フレームなどの一部HTMLを除き、組版できます。

test-align-last: right 最終行の右揃え

AH Formatter は、CSS 2.1 および CSS3 に対応しています。CSS3 のページモデルにも対応しているため、高品質なページ組版が実現できます。HTML/XHTMLについては、フレームなどの一部HTMLを除き、組版できます。

text-align-last: center 最終行の中央揃え

AH Formatter は、CSS 2.1 および CSS3 に対応しています。CSS3 のページモデルにも対応しているため、高品質なページ組版が実現できます。HTML/XHTMLについては、フレームなどの一部HTMLを除き、組版できます。

text-align-last: inside 最終行のノド側揃え AH 独自拡張

AH Formatter は、CSS 2.1 および CSS3 に対応しています。CSS3 のページモデルにも対応しているため、高品質なページ組版が実現できます。HTML/XHTMLについては、フレームなどの一部HTMLを除き、組版できます。

text-align-last: outside 最終行の小口側揃え AH 独自拡張

AH Formatter は、CSS 2.1 および CSS3 に対応しています。CSS3 のページモデルにも対応しているため、高品質なページ組版が実現できます。HTML/XHTMLについては、フレームなどの一部HTMLを除き、組版できます。

text-align-last: start 最終行の先頭揃え

AH Formatter は、CSS 2.1 および CSS3 に対応しています。CSS3 のページモデルにも対応しているため、高品質なページ組版が実現できます。HTML/XHTMLについては、フレームなどの一部HTMLを除き、組版できます。

text-align-last: end 最終行の末尾揃え

AH Formatter は、CSS 2.1 および CSS3 に対応しています。CSS3 のページモデルにも対応しているため、高品質なページ組版が実現できます。HTML/XHTMLについては、フレームなどの一部HTMLを除き、組版できます。

text-align-last: justify 最終行の均等配置(両端揃え)

AH Formatter は、CSS 2.1 および CSS3 に対応しています。CSS3 のページモデルにも対応しているため、高品質なページ組版が実現できます。HTML/XHTMLについては、フレームなどの一部HTMLを除き、組版できます。

start:最終行の先頭揃え

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。


end:最終行の末尾揃え

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。

先頭揃え:text-align-first プロパティ AH 独自拡張

初期値relative 適用対象:すべての要素 値の継承:する

text-align-first は,ブロックの最初の行または強制改行の直後の行の配置を指定します.行ブロックに text-align-first が指定されている場合は text-align-last よりも優先されます.

  • relative:何もしない
  • start:先頭揃え
  • end:末尾揃え
  • center:中央揃え
  • inside:ノド側揃え
  • outside:小口側揃え
  • justify:均等配置(両端揃え)
  • left:左揃え
  • right:右揃え

上付き文字・下付き文字がある行の高さ:-ah-line-height-shift-adjustment プロパティ AH 独自拡張

初期値consider-shifts 適用対象:インラインレベルの要素 値の継承:する

行に上付き文字と下付き文字が含まれていると,行送りが不規則になることがあります.上付き文字と下付き文字が行送りに影響しないようにするには,-ah-line-height-shift-adjustment: disregard-shifts; を指定します.ただし,画像,文字ベースライン位置の異なるフォント(和文と欧文など)が混在する場合,大きな文字の場合,行送りが不規則になる可能性があります.

  • consider-shifts:文字のずれた位置が,行の高さを決定するために使用されます.
  • disregard-shifts:文字のずれなかった位置が,行の高さを決定するために使用されます.
-ah-line-height-shift-adjustment: consider-shifts;

行に上付き文字ABC や下付き文字 abcが含まれていると,行送りが不規則になることがあります.上付き文字と下付き文字が行送りに影響しないようにするには,-ah-line-height-shift-adjustment: disregard-shifts; を指定します.ただし,画像,文字ベースライン位置の異なるフォント(和文と欧文など)が混在する場合,大きな文字の場合,行送りが不規則になる可能性があります.

-ah-line-height-shift-adjustment: disregard-shifts;

行に上付き文字ABC や下付き文字 abcが含まれていると,行送りが不規則になることがあります.上付き文字と下付き文字が行送りに影響しないようにするには,-ah-line-height-shift-adjustment: disregard-shifts; を指定します.ただし,画像,文字ベースライン位置の異なるフォント(和文と欧文など)が混在する場合,大きな文字の場合,行送りが不規則になる可能性があります.

行送りの調整:-ah-line-stacking-strategy プロパティ AH 独自拡張

初期値line-height 適用対象:ブロック要素 値の継承:する

行の中に大きな文字,上付き文字や下付き文字,画像が含まれる場合や,文字ベースライン位置の異なるフォント(和文と欧文など)が混在する場合,行送りは含まれる文字に依存してしまい,その結果,行送りが不規則になることがあります.-ah-line-stacking-strategy: font-height; を指定すると,行送りを一定にできます.

  • line-height:CSSスタイルの行ボックス送りで,半行間(ハーフリーディング)は行エリアに含まれています.
  • font-height:行送り幅が一定の配置.ブロックエリアのフォントの高さ+前後のハーフリーディング幅により行を配置します.
  • max-height:行間が一定の配置.行の高さは行エリアのフォントの高さとその行エリア内のインラインエリアをすべて含む高さになります.
-ah-line-stacking-strategy: line-height;

行の中に 大きな文字や 上付き文字 ABC 下付き文字 abc,画像が含まれる場合や,文字ベースライン位置の異なるフォント(和文と欧文など)が混在する場合,行送りが含まれる文字に依存してしまい,その結果,行送りが不規則になります.-ah-line-stacking-strategy: font-height; を指定すると,行送りを一定にできます.

-ah-line-stacking-strategy: font-height;

行の中に 大きな文字や 上付き文字 ABC 下付き文字 abc,画像が含まれる場合や,文字ベースライン位置の異なるフォント(和文と欧文など)が混在する場合,行送りが含まれる文字に依存してしまい,その結果,行送りが不規則になります.-ah-line-stacking-strategy: font-height; を指定すると,行送りを一定にできます.

-ah-line-stacking-strategy: max-height;

行の中に 大きな文字や 上付き文字 ABC 下付き文字 abc,画像が含まれる場合や,文字ベースライン位置の異なるフォント(和文と欧文など)が混在する場合,行送りが含まれる文字に依存してしまい,その結果,行送りが不規則になります.-ah-line-stacking-strategy: font-height; を指定すると,行送りを一定にできます.

行グリッド

-ah-line-stacking-strategy は,単一ブロック内の行に影響します.複数のブロックに跨っている行送りには影響しません.複数のブロックに跨っている行送りは,-ah-baseline-grid を使用して一貫させられます.ただし,指定した行グリッドと揃わない行エリアもあります.以下に例を示します.

行グリッドと揃わないコンテンツを持つブロックは,-ah-baseline-block-snap を使用して,ブロック全体をグリッドに揃えることができます.

行グリッドを使わない場合
前  文

人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは、世界における自由、正義及び平和の基礎であるので、

人権の無視及び軽侮が、人類の良心を踏みにじった野蛮行為をもたらし、言論及び信仰の自由が受けられ、恐怖及び欠乏のない世界の到来が、一般の人々の最高の願望として宣言されたので、

行グリッドを使った場合
前  文

人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは、世界における自由、正義及び平和の基礎であるので、

人権の無視及び軽侮が、人類の良心を踏みにじった野蛮行為をもたらし、言論及び信仰の自由が受けられ、恐怖及び欠乏のない世界の到来が、一般の人々の最高の願望として宣言されたので、

行グリッドの指定:-ah-baseline-grid プロパティ AH 独自拡張

初期値normal 適用対象:ブロックコンテナ 値の継承:しない

行グリッドを設定,あるいは解除します.行グリッドが設定されたエリア内にある行は,行グリッドのベースライン位置に揃えられます.

  • normal:行グリッドを設定することも解除することもしません.
  • none:行グリッドを解除し,コンテンツは行グリッドに揃えられません.
  • new:新しい行グリッドを設定します.
  • root:ルート要素で定義される行グリッドを設定します.ルート要素の fontline-height 設定が行グリッドの設定に利用されます.

ブロックを行グリッドに揃える:-ah-baseline-block-snap プロパティ AH 独自拡張

初期値auto border-box 適用対象baseline-grid: new または baseline-grid: root のblock-level 要素値の継承:しない

通常の行以外のブロック(見出しや図や表)をどのように行グリッドに揃えるかを指定します.

  • none:ブロックを行グリッドに揃えません.
  • auto:段の先頭では before,最後では after,それ以外では center と同じです.
  • before:ブロックの前側を行グリッド上の上端 (text-before-edge) ラインに揃えます.
  • after:ブロックの後側を行グリッド上の下端 (text-after-edge) ラインに揃えます.
  • center:ブロックを行グリッド上の上端 (text-before-edge) ラインと下端 (text-after-edge) ラインの間で中央寄せします.
  • border-box:ブロックを行グリッドに配置するのにボーダーボックスの端を使います.
  • margin-box:ブロックを行グリッドに配置するのにマージンボックスの端を使います.

autobeforeafter,または centerborder-box または margin-box と組み合わせて使用できます.none は他の値との組み合わせはできません.

リーダ:leader() 関数 CSS3

leader() 機能を使って,目次では,項目タイトルとページ番号の間をリーダ(点線など)で伸ばして,ページ番号を右寄せにする形式がよく使われます.

リーダ文字として,dottedsolidspace,任意の文字が使えます.

  • leader(dotted) leader(dotted)
  • leader(solid) leader(solid)
  • leader(space) leader(space)
  • leader("*-") leader("*-")

リーダ文字として space を使うと,右インデントタブと同じになります.

二次方程式 x = b ± b 2 4 a c 2 a (1)

ハイフネーション

ハイフネーション:hyphens プロパティ CSS3

初期値manual 適用対象:すべての要素 値の継承:する

AH Formatter は,40言語以上のハイフネーション処理を行うことができます.ハイフネーション処理は言語固有のアルゴリズムを使用しますので,ハイフネーション辞書を用意する必要がありません.アルゴリズムによって処理されない単語をハイフネーションする場合は,例外辞書に追加できます.ソフトハイフン(U+00AD)を単語の中に明示的に挿入して,ハイフネーションを指定できます.

  • none:ハイフネーション処理とソフトハイフンを無効にします
  • manual:ハイフネーション処理を無効に,ソフトハイフンを有効にします.
  • auto:ハイフネーション処理とソフトハイフンを有効にします.

ハイフネーション処理を有効にするには,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;
}

ハイフン分割の前の最小文字数:hyphenate-before プロパティ CSS3

初期値auto 適用対象:すべての要素 値の継承:する

ハイフネーションによる行分割の前の最小文字数(標準は2)を指定します.

例えば,"hyphen" という6文字の単語は,"hy-phen" とハイフネーションされる可能性があります.hyphenate-before: 3; と指定すると,ハイフン分割の前の文字数が3文字以上の単語でないとハイフネーションされないので,"hyphen" がハイフネーションされることはなくなります.

ハイフン分割の後の最小文字数:hyphenate-after プロパティ CSS3

初期値auto 適用対象:すべての要素 値の継承:する

ハイフネーションによる行分割の後の最小文字数(標準は2)を指定します.

例えば,“hyphen” という6文字の単語は,“hy-phen” とハイフネーションされる可能性があります.hyphenate-after: 5; と指定すると,ハイフン分割の後の文字数が5文字以上の単語でないとハイフネーションされないので,“hyphen” がハイフネーションされることはなくなります.

ブロックの縦書き:writing-mode: tb-rl; CSS3

ブロックを縦書きにするには,ブロック要素に 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)です。

縦書きの中に「'08128日」のように部分的に数字などを横書きにすることを「縦中横」といいます。

段組

5

段数:column-count プロパティ CSS3

初期値auto 適用対象:ブロック要素 値の継承:しない

ブロックの段数を指定します.

段数 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 プロパティCSS3

初期値auto 適用対象:ブロック要素 値の継承:しない

段組の要素の段幅を指定します.

column-width:を 12em と指定した段組のブロックです.段間 column-gap,段間罫 column-ruleも指定しています.

div.MultiColW {
  column-width: 12em;
  column-gap: 1em;
  column-rule:
     solid 1pt;
}

段組の指定には,column-count を指定する代わりに column-widthを指定します.

段数,幅:columns プロパティ CSS3

column-widthcolumn-countを指定するためのショートハンドです.値が省略されたときは,初期値が設定されます.

段抜き:column-span プロパティ CSS3

初期値none 適用対象:ブロック要素(フロートと絶対配置された要素を除く)値の継承:しない

段抜きする要素の段数を指定します.

いろはにほへとちりぬるを わかよたれそつねならむ うゐのおくやまけふこえて あさきゆめみしゑひもせす。 いろはにほへとちりぬるを わかよたれそつねならむ うゐのおくやまけふこえて あさきゆめみしゑひもせす。

いろはにほへとちりぬるを

いろはにほへとちりぬるを わかよたれそつねならむ うゐのおくやまけふこえて あさきゆめみしゑひもせす。 いろはにほへとちりぬるを わかよたれそつねならむ うゐのおくやまけふこえて あさきゆめみしゑひもせす。

段間:column-gap プロパティ CSS3

初期値normal 適用対象:マルチコラム要素値の継承:しない

段間の幅を指定します.

段間罫:column-rule プロパティ CSS3

初期値:各プロパティを参照適用対象:マルチコラム要素値の継承:しない

段間罫の幅,線種,色をまとめて指定します.

段間罫の種類:column-rule-style プロパティ CSS3

初期値none 適用対象:マルチコラム要素値の継承:しない

段間罫の種類を指定します.ボーダーのスタイルを指定する場合と同じ値を使用できます.詳細については ボーダーのスタイル:border-style プロパティを参照してください.

段間罫の幅:column-rule-width プロパティ CSS3

初期値medium 適用対象:マルチコラム要素値の継承:しない

段間罫の幅を指定します.ボーダーの幅を指定する場合と同じ値を使用できます.詳細については ボーダーの幅:border-width プロパティ を参照してください.

段間罫の色:column-rule-color プロパティ CSS3

初期値:現在の色 適用対象:マルチコラム要素 値の継承:しない

段間罫の色を指定します.第11章 色指定 を参照してください.

段間罫の長さ:-ah-column-rule-length プロパティ AH 独自拡張

初期値:100% 適用対象:マルチコラム要素 値の継承:しない

段間罫の長さを指定します.

column-rule-length: 60%; は段の高さの60%の長さの段間罫を中央に縦に配置します.

div.MultiCol {
  column-rule-length: 60%;
}

段間罫の揃え:-ah-column-rule-align プロパティ AH 独自拡張

初期値center 適用対象:マルチコラム要素値の継承:しない

段内の段間罫の縦方向の配置を揃えます.

-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 独自拡張

初期値gap 適用対象:マルチコラム要素値の継承:しない

-ah-column-rule-displayは,段間のないところにも段間罫を引くかどうか指定します.

-ah-column-rule-display: end は,存在する段のend側に段間罫を引きます.

div.MultiCol3 {
  -ah-column-rule-display: end;
}

改ページ・ページコンテンツの維持

6

ページ組版では,当然のことながらブラウザとは異なりページの分割が発生します.CSSは,要素のコンテンツをひとつのページにまとめるかどうか,コンテンツの前後に改ページ設定するかどうかを制御するための複数のプロパティを提供しています.

改ページの制御

改ページ:page-break-before/page-break-after プロパティ

初期値auto 適用対象:ブロック要素 値の継承:しない
  • auto:改ページを強制も禁止もしません.
  • always:常に改ページを強制します.
  • avoid:常に改ページを避けます.
  • left:改ページを強制して,次のページが左側のページになるようにします.
  • right:改ページを強制して,次のページが右側のページになるようにします.
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;
}

改ページの禁止:page-break-inside プロパティ

初期値auto 適用対象:ブロック要素 値の継承:する

値をavoidにすると,指定した要素内での改ページを禁止できます.

  • auto:改ページを強制も禁止もしません.
  • avoid:常に改ページを避けます.
/* このブロックの中では改ページ禁止 */
div.NoBreak {
  page-break-inside: avoid;
}

左右どちらかのページから始める

章の始まりのページを常に右側または左側のページにするといった指定ができます.必要に応じて空白ページが挿入されます.

/*h2見出しが常に右ページに来るように改ページ*/
h2 {
  page-break-before: right;
}

改ページ前後の最小行数:orphans/widows プロパティ

初期値:2 適用対象:ブロック要素 値の継承:する

orphans は,ページの下部に残さなければならない段落先頭の最小行数を指定します.widows は,ページの上部に残さなければならない段落終わりの最小行数を指定します.

orphan と widow の行

文字設定

7

フォント指定

フォント:font プロパティ

初期値:プロパティを参照 適用対象:すべての要素 値の継:する

このプロパティは,font-stylefont-variantfont-weightfont-sizeline-heightfont-familyの6個のプロパティをまとめて指定するためのショートハンドです.

フォントプロパティを指定すると,各プロパティの値は初期値にいったんリセットされます.そして,フォントのショートハンドで明示的に指定したプロパティについてその値に設定されます.font プロパティに指定する順序は以下のとおりです.

  1. font-stylefont-variantfont-weight の値は省略可能で,この三つの中での順序は問いません.
  2. font-size 値は省略できません.
  3. line-height の値は省略可能です.font-sizeline-height の値は “/” で区切ります.(例:14q/25q
  4. font-family は省略できません.複数の フォントファミリをカンマで区切って指定できます.
/* 文書タイトル */
.CoverPage h1 {
  font: bold 30pt "源ノ角ゴシック JP", sans-serif;
  text-align: center;
}

フォントサイズ:font-size プロパティ

初期値medium 適用対象:すべての要素 値の継承:する

フォントのサイズを指定します.

/* 本文 */
body {
  font-size: 12pt;
  line-height: 1.5;
  font-family: "Source Sans Pro", "源ノ角ゴシック JP", sans-serif;
}

フォントの種類:font-family プロパティ

初期値:ユーザエイジェントに依存serif.初期値の serif は変更できます. 適用対象:すべての要素値の継承:する

フォントの種類を指定します.フォントの種類は,フォント名かキーワードで指定します.キーワードは以下のいずれかで,ゼネリックフォントファミリと呼ばれます.

  • sans-serif:装飾はほとんどまたは一切ない先端を持つ傾向のあるフォントです.Helvetica などのひげ飾りなしのプレーンフォントです.日本語ではゴシック系のフォントです.
  • serif:Times などのなどのひげ飾り付きのフォントです.日本語では明朝系のフォントです.
  • monospace:等幅フォントです.文字幅が等しいフォントです.
  • fantasy:装飾のあるフォントです.
  • cursive:文字をつなげて書く手書きのような特性を持つ筆記体フォントです.

"Times New Roman" のようにフォント名にスペースが含まれる場合は,ダブルクォーテーションまたはシングルクォーテーションで囲みます.

カンマで区切って複数のフォントを指定できます.ユーザ環境で利用できるフォントが記述順に選ばれます.AH Formatter は,文字列をスクリプトの種類ごとに区切り,スクリプト単位で最初に指定されているフォントから割り当てていきます.例えば,日本語フォントの多くはラテンスクリプトをサポートしますので,font-family: "源ノ角ゴシック JP",Helvetica;という指定の場合,ラテンスクリプトと日本語にも "源ノ角ゴシック JP" が割り当てられる結果となりますこのフォントの選択方法は,1文字1文字に対してどのフォントにグリフがあるか調べる方法に変更もできます..次のようにラテンフォントを先に指定することで,MS ゴシックの前にHelveticaが採用されるようになります.

font-family: Helvetica, "源ノ角ゴシック JP", sans-serif;

指定したフォントがシステムに存在しないときのために,serifsans-serifなどのゼネリックフォントファミリを最後に指定するとよいでしょう.

フォントの太さ:font-weight プロパティ

初期値normal 適用対象:すべての要素 値の継承:する

フォントの太さを指定します.

  • normal:標準(数値指定では400).
  • bold:太字(数値指定では700).
  • lighter:1段階(数値指定では100)細くする.
  • bolder:1段階(数値指定では100)太くする.
  • 数値指定:100,200,300,400,500,600,700,800,900のいずれか.100が最も細く,900が最も太い.

イタリック体・斜体:font-style プロパティ

初期値normal 適用対象:すべての要素 値の継承:する

フォントをイタリック体や斜体に指定します.

  • normal:標準(立体).
  • italic:イタリック体.
  • oblique:斜体.

italic は,初めから斜めに傾けてデザインされたフォントですが,oblique は単純に元のフォントを傾けたものです.italic 指定したフォントにイタリック体がない場合は,そのフォントを斜めに傾けて表示します.

AH Formatter では,oblique を指定しても italic と同じように処理します.

日本語フォントには,イタリック体はほとんど存在しないので,italicを指定してもobliqueを指定しても同じ表示になります.(日本語フォントでも,欧字に対してはイタリック体を持っているものは多いです.)

italicとoblique

スモールキャピタル・フォント機能:font-variant プロパティ

初期値normal 適用対象:すべての要素 値の継承:する

フォントをスモールキャピタルにするときに指定します.英小文字などでのみ有効です.

  • normal:標準(何もしない).
  • small-caps:スモールキャピタルにする.
  • <keyword>:OpenType機能に対応する oldstyle-nums など,他にも多数のキーワードがあります.

これらはOpenTypeフォントの機能を使って表示されます.OpenTypeフォントが対応していない場合,スモールキャピタルはAH Formatterによってエミュレートされます.

追加のフォント:@font-face ルール

AH Formatter の設定を変更せずに,また,オペレーティングシステムにフォントをインストールせずに,文書内で利用するフォントを追加指定できます.以下の記述子の指定が可能です.

The Quick Brown Fox

@font-face {
  font-family: font-face-example;
  src: url(UglyQua.ttf);
}

p { font-family: font-face-example; }

行の高さ:line-height プロパティ

初期値normal 適用対象:すべての要素 値の継承:する

行の高さを指定します.normal は標準の行送りで,AH Formatter では,1.2に初期設定されています初期設定値の1.2は変更できます.

数値だけを指定すると,その数値にフォントのサイズを掛けた値が行の高さとなります.1.5と指定すると,150%や1.5emと指定したのと同じ行の高さになります.ただし,line-height プロパティが継承されるときに,数値だけの指定の場合はその数値が継承され,フォントのサイズが変われば行の高さもそれに応じて変わります.

行の高さと行間

縦方向の揃え位置:vertical-align プロパティ

初期値baseline 適用対象:インラインと表のセル要素 値の継承:しない

縦方向の揃え位置や上付き文字,下付き文字を指定できます.

下線・上線・打ち消し線

文字の修飾 ショートハンド:text-decoration プロパティ CSS3

初期値none 適用対象:すべての要素 値の継承:しない

下線・上線・打ち消し線のタイプ,色,種類を指定します.text-decoration は,ひとつの宣言で text-decoration-linetext-decoration-colortext-decoration-style を指定するためのショートハンドです.text-decoration-line 要素のみを設定する text-decoration プロパティは,CSS2と後方互換性があります.

span {
  text-decoration: underline dotted cmyk(0,1,1,0); /* 下線 点線 赤 */
}

下線・上線・打ち消し線:text-decoration-line プロパティ CSS3

初期値none 適用対象:すべての要素 値の継承:しない

テキストに下線・上線・打ち消し線を指定します.同時に複数の指定をするときは,スペースで区切って任意の順序で値を指定します.

  • none:テキストに線は付かない.
  • underline:テキストに下線が付く.
  • overline:テキストに上線が付く.
  • line-through:テキストに打ち消し線が付く.
/* 章見出し */
.Chapter h2 {
  text-decoration-line: underline overline;
}

線の種類:text-decoration-style プロパティ CSS3

初期値solid 適用対象:すべての要素 値の継承:しない

下線・上線・打ち消し線の種類を指定します.ボーダーのスタイルを指定する場合と同じ値を使用できます.詳細については ボーダーのスタイル:border-style プロパティを参照してください.

span.dotted {
  text-decoration-style: dotted;        /* 線の種類を点線にする */
}
...
<p>dotted:点線 <span class="dotted">   </span></p>

dotted:点線    

線の色:text-decoration-color プロパティ CSS3

初期値:文字の色 適用対象:すべての要素 値の継承:しない

下線・上線・打ち消し線の色を指定します.第11章 色指定 を参照してください.

span {
  text-decoration-color: cmyk(0,1,1,0);  /* 線の色を赤にする */
}

線の幅:-ah-text-line-width プロパティ AH 独自拡張

初期値auto 適用対象:すべての要素 値の継承:しない

下線・上線・打ち消し線の幅を指定します.

MathMLとSVGグラフィクス

8

MathML

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を参照してください.

MathMLを使った組版例

2次方程式 a x 2 + b x + c = 0 の解は, D = b 2 4 a c とおくと,

D 0 のとき, x = b ± D 2 a

D < 0 のとき,実数の解なし.

<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>&#x2062;</m:mo>
     <m:mi>x</m:mi>
    </m:mrow>
    <m:mn>2</m:mn>
   </m:msup>
…
の解は,
…
MathMLを使った組版例

ふたつの直線の方程式を y = m 1 x + n 1 y = m 2 x + n 2

とすると,この2直線のなす角 θ は,

tan θ = ± m 2 m 1 1 + m 2 m 1 ( 0° θ < 180° )

SVGグラフィクス

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>
SVGの例


1 2 3 4 5 6 7 8 9

画像配置

9

インライン画像

文章中にインライン画像を配置するには,インライン要素の <img> 要素や <object> 要素を使います.

インライン画像

Antenna House AH logo AH Formatter は世界中のお客様にご利用いただきながら 18年目を迎える大容量・多言語データに最適な自動組版ソフトです。独自開発した PDF出力エンジンで、アクセシブルなタグ付きPDF や印刷用の PDF/X、長期保存 PDF/A などさまざまな PDF形式の出力ができます。

AH Formatter V6 logo のスタイルシートは XSL-FO と CSS のどちらでも使えます(併用はできません)。マニュアルのような複雑なレイアウトには XSL-FO が、比較的単純なレイアウトには直感的な CSS がお勧めです。

<p>Antenna House <img src="images/logo-antenna.svg" alt="AH logo" style="height: 9pt;" /> Formatter は世界中のお客様にご利用いただきながら…

ブロック画像

display: block; を使用して,画像表示をインラインではなくブロックとして表示します.

display: block; を指定したインライン画像

Antenna House AH logo 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 プロパティ

初期値none 適用対象:すべての要素 値の継承:しない

画像をフロートさせて左寄せまたは右寄せにするには,float プロパティを使います.AH Formatterのfloat プロパティは,水平方向のfloat-x,垂直方向のfloat-y,フロートへのテキストの回り込みを指定するfloat-wrap,フロートを配置する基準となるエリアを指定するfloat-reference,フロートを次のページ(または段)に移動するかどうかを指定するfloat-moveをまとめて指定するショートハンドに拡張されています.

サイドフロート:float: left;/float: right;

CSS2標準のフロート機能です.float プロパティを適用した画像の次の要素は,反対側に回り込みます.

画像の左寄せ float: left;

AH logoAH 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形式の出力ができます。
画像の右寄せ float: right;

AH logo 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形式の出力ができます。

画像だけでなく,文字をフロートさせることもできます.

左寄せテキスト float: left;

Antenna
House
Formatter は世界中のお客様にご利用いただきながら 18年目を迎える大容量・多言語データに最適な自動組版ソフトです。独自開発した PDF出力エンジンで、 アクセシブルなタグ付きPDF や印刷用の PDF/X、長期保存 PDF/A などさまざまな PDF形式の出力ができます。

右寄せテキスト float: right;

Antenna
House
Formatter は世界中のお客様にご利用いただきながら 18年目を迎える大容量・多言語データに最適な自動組版ソフトです。独自開発した PDF出力エンジンで、アクセシブルなタグ付きPDF や印刷用の PDF/X、長期保存 PDF/A などさまざまな PDF形式の出力ができます。

ページフロート:float: top page;/float: bottom page; AH 独自拡張

ページフロートはフロートを配置する基準エリアとしてページを指定します.ページの縦方向へのフロートを指定できるように拡張したものです.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; AH 独自拡張

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>

フロートの値の拡張:横書き insideoutsidecenterstartendalternate AH 独自拡張

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

人間が専制と圧迫とに対する最後の手段として反逆に訴えることがないようにするためには、法の支配によって人権保護することが肝要であるので、

フロートの値の拡張:縦書き topbottomcenterbeforeinsideafteroutside AH 独自拡張

float: left;float: right; は縦書きの文書では無効です.

夏目 漱石(なつめ そうせき、慶応三年一月五日(一八六七年二月九日)―大正五年(一九一六年)一二月九日)は、日本の小説家、評論家、英文学者。 本名、金之助。 『吾輩は猫である』『こゝろ』などの作品で広く知られる、森鷗外と並ぶ明治・大正時代の文豪である。 江戸の牛込馬場下横町(現在の東京都新宿区喜久井町)出身。 俳号は愚陀仏。

float: top

大学時代に正岡子規と出会い、俳句を学ぶ。…(中略)… 当初は余裕派と呼ばれた。

float: bottom

「修善寺の大患」後は、『行人』『こゝろ』『硝子戸の中』などを執筆。 「則天去私」(そくてんきょし)の境地に達したといわれる。 晩年は胃潰瘍に悩まされ、『明暗』が絶筆となった。

float: center

フリー百科事典『ウィキペディア』より引用

夏目 漱石(なつめ そうせき、慶応三年一月五日(一八六七年二月九日)―大正五年(一九一六年)一二月九日)は、日本の小説家、評論家、英文学者。 本名、金之助。 『吾輩は猫である』『こゝろ』などの作品で広く知られる、森鷗外と並ぶ明治・大正時代の文豪である。 江戸の牛込馬場下横町(現在の東京都新宿区喜久井町)出身。 俳号は愚陀仏。

大学時代に正岡子規と出会い、俳句を学ぶ。…(中略)… 当初は余裕派と呼ばれた。

「修善寺の大患」後は、『行人』『こゝろ』『硝子戸の中』などを執筆。 「則天去私」(そくてんきょし)の境地に達したといわれる。 晩年は胃潰瘍に悩まされ、『明暗』が絶筆となった。

float: before

float: after

float: inside

float: outside

フリー百科事典『ウィキペディア』より引用

段組フロート:float: multicol; CSS3

float: multicol; は,フロートを段組と段間にも段抜きをします.gr (grid)は特別な長さの単位であり,段組の段幅(column-width)と段間(column-gap)の両方をそれぞれ 1grとして数えます.このため、n 段抜きの指定は (2n - 1)grとなります.段幅または段間の途中までの長さの指定のために端数の指定も可能です.

人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは、世界における自由、正義及び平和の基礎であるので、

float: multicol; width: 3gr;

人権の無視及び軽侮が、人類の良心を踏みにじった野蛮行為をもたらし、言論及び信仰の自由が受けられ、恐怖及び欠乏のない世界の到来が、一般の人々の最高の願望として宣言されたので、

回り込みの解除:clear プロパティ

初期値none 適用対象:ブロック要素 値の継承:する 値の継承:しない

clear プロパティは右寄せまたは左寄せを指定したブロックへの回り込みを解除します.

表組

10

表の作成方法

CSSの表モデルは,HTML4の表モデルを元にしています.表要素を持っていない文書言語で CSS を使用する場合,文書要素を HTML4に対応する display プロパティ値に割り当てることができます.

displayHTMLの要素
tableTABLE
inline-tableTABLE
table-rowTR
table-row-groupTBODY
table-header-groupTHEAD
table-footer-groupTFOOT
table-columnCOL
table-column-groupCOLGROUP
table-cellTD,TH
table-captionCAPTION

要素を表関連の 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;
}
XML を表として表示

ボックス基本特性の表への適用

CSSのボックスは marginborderpaddingwidthheight プロパティの大きさで決まります.表については少し異なっており,これらの特性は次のように適用されます.

ボックス基本特性の表への適用
displaymarginborderpaddingwidthheight
table
inline-table
table-row×××
table-row-group×××
table-header-group××
table-footer-group××
table-column×××
table-column-group×××
table-cell×
table-caption

表のボーダーモデル

ボーダーを分離するかどうか:border-collapse プロパティ

初期値separate 適用対象:表要素 値の継承:する

CSSの表の各セルの周囲のボーダーを独立に扱うかどうかを指定します.

  • collapse:隣接セルのボーダーをひとつにして扱います.
  • separate:隣接セルのボーダーを分離して扱います.

ボーダー間のアキ:border-spacing プロパティ

初期値:0 適用対象:表要素 値の継承:する

border-collapse: separate;のとき,隣接するセルのボーダーどうしの間隔(アキ量)を指定します.

table {
  padding: 5mm;
  border: solid 2mm gray;
  border-collapse: separate;
  border-spacing: 2mm;
}

th, td {
  padding: 2mm;
  border: solid 2mm silver;
}

上の指定例は次のように可視化されます.

border-collapse: separate;の表
table {
  padding: 5mm;
  border: solid 2mm gray;
  border-collapse: collapse;
}

th, td {
  padding: 2mm;
  border: solid 2mm silver;
}

上の指定例は次のように可視化されます.このとき,表のパディングはなくなります.また,表のボーダーとセルのボーダーが同じ幅のため,次項の優先度が適用されて,表が生成するボックスのボーダーがセルのボーダーに上書きされています.

border-collapse: collapse;の表

ボーダーの優先度

前項の例のように,border-collapse: collapse; を指定すると,隣接するボーダーをひとつにまとめます.このとき,ボーダースタイルの優先度は次のようになります.

  • border-style: hidden; の優先度が最も高い.
  • border-style: none; の優先度が最も低い.
  • 幅の広いボーダーが狭いボーダーよりも優先度が高い.
  • 同じ幅をもつボーダーの優先度は,ボーダーのスタイルによって,高い順に次のとおり.
    1. double
    2. solid
    3. dashed
    4. dotted
    5. ridge
    6. outset
    7. groove
    8. inset
    double が最も高く,inset が最も低い.
  • 色のみが異なるボーダーの優先度は,要素の display 種類によって,高い順に次のとおり.
    1. table-cell
    2. table-row
    3. table-row-group
    4. table-column
    5. table-column-group
    6. table
    の優先度が最も低い.
  • 要素の種類が同じで,同じプロパティの線種をもつときは,横書きでは,左に行くほど,上に行くほど優先度が高くなります.

表の幅・段の幅の決定方法:table-layout プロパティ

初期値auto 適用対象:表要素 値の継承:しない

表や列の幅の決定方法を 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 プロパティ

初期値top 適用対象:キャプション要素 値の継承:する

表のキャプションの位置を指定するには,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

RGBとCMYの関係は,1860年頃にJames Clerk Maxwellによって最初に実証されました.簡単に言えば,印刷原色は,透過された原色の二次色で,逆も同様です.シアンは,青色と緑色の混合または白色から赤色を除いた混合,同様にマゼンタと黄色の混合です.しかし,以下の図が示すように,CMYK印刷インクは,ウェブ上のRGB色に使用されるsRGBカラースペースと同じ色域(すなわち色範囲)を持っていません.また,可視光の全色域をカバーしていません.

sRGB ・ CMYK 色エリア

sRGB と CMYK の相違は,色の使い方に影響を与えます.印刷用デバイスを使用するにあたって遭遇するのは CMYKを使用して RGB 色を表現するのにどうやって処理するかという問題です.通常は色域外の色を印刷できるように色を置き換えます(色域外の色はほとんど置き換えるのが難しいので,期待した色にならないのは避けられません).主に画面上でページを表示するなら,そして,プリンターで印刷する場合も想定するなら,RGB 色が最適です.ただし,ページ媒体を商業目的で印刷する場合は,画像に RGB と CMYK のどちらを使用するかどうかは,CMYKへの最終変換を行うプリンタを考慮する必要があります.商業印刷用の画像を準備する作業は複雑な課題であり,本書の対象外です.

文字色:color プロパティ

初期値black初期値 のblackは変更できます. 適用対象:すべての要素 値の継承:する

文字やボーダーの色を指定するには,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 色は,CMYK に対応していない媒体で使用するフォールバック RGB 色の有無にかかわらず,指定できます.フォールバック RGB 色がない場合は,CMYK 色から計算されます.

  • cmyk(<C>, <M>, <Y>, <K>):CMYK 色.シアン,マゼンタ,イエロー,ブラックのコンポーネントです.
  • device-cmyk(<C>, <M>, <Y>, <K>):GCPM による定義と等価.
  • rgb-icc(#CMYK, <C>, <M>, <Y>, <K>):等価.
  • rgb-icc(<R>, <G>, <B>, #CMYK, <C>, <M>, <Y>, <K>):フォールバック 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() AH 独自拡張

rgb-icc() 色関数は,以下の方法で指定できます:

  • rgb-icc(#CMYK, 0.5, 0.5, 0.5, 0):CMYK 色.
  • rgb-icc(#Grayscale, 0.5):グレイスケール.
  • rgb-icc(#Separation, 'Name'):スポットカラー.
  • rgb-icc(#Registration):すべてのセパレーションで同じ強度で印刷します.
  • rgb-icc(#Separation, 'All')rgb-icc(#Registration) と同様.

グレイスケール AH 独自拡張

グレイスケール(白黒)の色は 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

PANTONE® スポットカラー AH 独自拡張

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 独自拡張

スポットカラーは,AH Formatter PANTONE® オプションなしで使用できます.ただし,スポットカラーセパレーションに対応していない媒体で使用するには,同等の RGB とCMYK カラーのひとつか両方を持つ必要があります.RGB か CMYK の等価が省略されている場合は,他の等価色のコンポーネントから計算されます.

  • rgb-icc(<R>, <G>, <B>, #Separation, <Name>, <Tint>, <C>, <M>, <Y>, <K>):スポットカラーの名前,色合い,CMYK と RGB の両方のフォールバックカラーです.
  • rgb-icc(<R>, <G>, <B>, #Separation, <Name>, <Tint>):スポットカラーの名前,色合い,RGB のフォールバックカラーです.
  • rgb-icc(<R>, <G>, <B>, #Separation, <Name>, <Tint>):スポットカラーの名前,RGB のフォールバックカラーです.
  • rgb-icc(#Separation, <Name>, <Tint>, <C>, <M>, <Y>, <K>):スポットカラーの名前,色合い, 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 プロパティ

初期値normal 適用対象:CSS2.1の場合 ::before 疑似要素と ::after 疑似要素(CSS3 ではあらゆる要素に適用)値の継承:しない

要素の直前または直後に文字列を挿入するには,content プロパティを使います.CSS3では,要素のコンテンツとして文字列を指定もできます.

normalnone 以外の値は繰り返しが可能で,任意の順序で組み合わせが可能です.

.Chapter h2:before {
  content: "Chapter " counter(ChapterNo) ".";
}

string-set プロパティで使用されるcontent()関数については,string-setを参照してください.

カウンタの加算:counter-increment プロパティ

初期値none 適用対象:すべての要素 値の継承:しない

指定したカウンタの値を増やすには,counter-increment プロパティを使います.

複数のカウンタ名の指定もできます.整数が後に続く指定もできます.

.Chapter h2 {
  counter-increment: ChapterNo;
}

カウンタのリセット:counter-reset プロパティ

初期値none 適用対象:すべての要素 値の継承:しない

指定したカウンタの値をリセットするには,counter-reset プロパティを使います.

.Chapter h2 {
  counter-reset: SectionNo;
}

ページカウンタ CSS3

現在のページを求めるには 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-typelist-style-imagelist-style-positionlist-style プロパティを使用してマーカの組版を指定します.CSS3 は ::marker 疑似要素を追加するので,CSS のすべての範囲のプロパティと値を用いて,リスト項目をスタイルできます.list-style-typelist-style-image プロパティは,::marker 疑似要素の既定コンテンツを設定します.

リスト項目マーカ画像:list-style-image プロパティ

初期値none 適用対象:リスト項目 値の継承:する

リスト項目マーカの既定コンテンツとして使用する画像を指定します.list-style-imagenone または画像が無効の場合,既定コンテンツは代わりに list-style-type で与えられます.

リスト項目マーカ 種類:list-style-type プロパティ

初期値disc 適用対象:リスト項目 値の継承:する

list-style-imagenone または画像が無効な場合のリスト項目マーカの既定コンテンツを指定します.それ以外の場合は無視されます.

リスト項目マーカ位置:list-style-position プロパティ

初期値outside 適用対象:リスト項目 値の継承:する

list-item-position は,リスト項目マーカの位置を制御します.

リスト項目マーカショートハンド:list-style プロパティ

初期値:プロパティを参照 適用対象:リスト項目 値の継承:プロパティを参照

list-style は,list-style-typelist-style-imagelist-style-position を設定するためのショートハンドです.

ul.References li {
  list-style: check;
  line-height: 1.1;
}

リスト項目マーカ:::marker 疑似要素

::marker を,CSS プロパティと値の全範囲を用いてスタイルできます.既定コンテンツは list-style-imagelist-style-type プロパティで定義しますが,::markercontent プロパティを設定すると上書きできます.

カウンタスタイル CSS3

counter style は,連番を表すために使用する数字,アルファベット,記号などを定義し実装します.CSS1 は,HTML が伝統的にリストとして許されているスタイルに基づいて,いくつかのカウンタスタイルを定義しました.CSS Counter Styles Level 3 はカスタムカウンタスタイルを定義するための仕組みを持っている @counter-style; ルールを定義します.

CSS3 カウンタスタイルのコアの部分は,整数カウンタ値の文字列表現を生成するアルゴリズムに名前を付けることです.カウンタスタイルには,生成された値に追加する前置や後置を示すプロパティや,負の数を示す追加の文字列なども含まれます.カウンタスタイルは,list-style-typecounters() 関数で使用できます.

次に,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>
my-filled-circled-decimal カウンタスタイルのリスト
  1. 1
  2. 2

カスタムカウンタスタイルの定義:@counter-style ルール

カスタムカウンタスタイルを定義できます.@counter-style ルールの一般的な形式の例は以下のとおりです.

@counter-style <counter-style-name> { <declaration-list> }

カウンタスタイル名は大文字と小文字を区別しますが,CSS Counter Styles Level 3 で定義済みカウンタスタイルの名前は大文字と小文字を区別しないで一致させます.カウンタスタイル名は none と一致できません.また,decimaldisc はカウンタスタイル名として定義できません.

宣言リストには以下の記述子が使用できます.

negativeprefixsuffixpadsymbols の値を持つ記号と additive-symbols 記述子は文字列を指定します.

カウンタアルゴリズム:system 記述子 CSS3

初期値symbolic

カウンタの表現を構成するために使用するアルゴリズムを指定します.

  • cyclic:指定された記号を繰り返します.
  • numeric:カウンタ記号のリストを数字方式として解釈します.
  • alphabetic:記号リストをアルファベット数字方式の桁として解釈します.
  • symbolic:指定された記号を繰り返し,各連続するパス上で,記号を2倍,3倍などと繰り返します.
  • additive:記号は加重された値を表し,その数値は記号を追加されることによって得られます.
  • fixed <integer>?:カウンタ記号を一度実行し,別のカウンタスタイルにフォールバックします.<integer> がある場合は最初の記号値を設定し,それ以外の場合は最初の記号値を1に設定します.
  • extends <counter-style-name>:指定されたカウンタスタイル名と同様のアルゴリズムを使用します.

負の値の組版:negative 記述子 CSS3

初期値:"\2D" ("-" hyphen-minus)

値が負の場合に表現を変更する方法を定義します.値はひとつまたはふたつの記号です.値が負の場合は,最初の記号が表現の前に付加され,2番目の記号がある場合は,その記号が表現に追加されます.以下に例を示します.

  • negative: "\30DE\30A4\30CA\30B9";japanese-informalより引用.) 負の値の前に“マイナス記号”を生成します.
  • 会計士は,負の数を表すのに括弧を頻繁に使用します.例えば,“(100)” は -100 です.negative: "(" ")"; は負の値の前に“(” を生成し,“)”を負の値の後に生成します.

マーカ前の記号:prefix 記述子 CSS3

初期値:""(空文字列)

マーカ表現の前に付ける記号を指定します.接頭辞は,負の符号の前に置かれます.

マーカ後の記号:suffix 記述子 CSS3

初期値:"\2E\20" ("." ピリオドの後にはスペースが続きます.)

マーカ表現に追加される記号を指定します.接尾辞は,負の符号の後に来ます.

カウンタの範囲:range 記述子 CSS3

初期値auto

カウンタスタイル適用範囲を指定します.値は,auto または有効範囲の下限と上限をカンマで区切ったリストのいずれかです.値が autoのとき,範囲は system 値に基づいて決定されます.カウンタスタイルを使用してその範囲外の値を表す場合,カウンタスタイルは代わりにそのフォールバックカウンタスタイルを使用します.

最小のカウンタ幅:pad 記述子 CSS3

初期値:0 ""

最小数の書記素クラスタではないカウンタ表現を埋め込む記号を指定します.値は整数と記号です.表現が整数値よりも少数の書記素クラスタを有する場合,表現は記号で埋められます.最小値よりも長い表現は埋め込まれません.

フォールバックカウンタスタイル:fallback 記述子 CSS3

初期値decimal

現在のカウンタスタイルで表現を作成できない場合に使用されるフォールバックカウンタスタイルを指定します.

カウンタの記号:symbols および additive-symbols 記述子 CSS3

初期値:n/a

マーカ構築アルゴリズムで使用される記号を指定します.systemcyclicnumericalphabeticsymbolicfixedの場合は symbols が必要であり,systemadditiveの場合はadditive-symbols が必要です.

定義済みカウンタスタイル CSS3

CSS Counter Styles Level 3 は,いくつかのカウンタスタイルをあらかじめ定義しています.その中には,@counter-style で表現するのが複雑なものもあります.W3C国際化ワーキンググループによって発行されたカウンタスタイルは,世界中のさまざまな文化によって使用されるナンバリングシステム用のユーザ定義カウンタスタイル用のコード情報を提供しています.それらは,CSS Counter Styles Level 3 定義済みスタイルも含みます.

AH Formatter は以下の定義済みスタイルを実装しています* のついたスタイルは,古い list-style-type 仕様との下位互換性のためにリストされています.

クロスリファレンス(相互参照)

14

テキスト内容の参照:target-text() 関数 CSS3

参照先のテキストを参照元に表示するには,target-text() 関数を使います.

target-text() 関数を使った相互参照の方法は,以下のようになります.

  1. CSSファイルの相互参照用クラスに参照元に挿入する文字列を指定します.
  2. target-text() 関数を使うと,target-text()関数内に指定した変数のカウンタをcontent プロパティに挿入できます.
  3. 文章中の参照元には,アンカーとなる <a> タグを挿入し,そのクラスに相互参照クラス名を指定します.さらに href 属性にソース参照のID値を指定します.
  4. アンカータグ内の文字列が,参照先の文字列と差し替わります.
.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() 関数 CSS3

参照先の章番号やページ番号を自動的に付加するには,target-counter() 関数を使います.カウンタ を参照してください.

target-counter() 関数を使った相互参照の方法は,以下のようになります.

  1. CSS では,::before または ::after 疑似要素の内容として挿入される文字列を指定します.
  2. target-counter()関数を使うと,target-counter() 関数内に指定した変数のカウンタを content プロパティに挿入できます.単なる文字列を挿入する場合は,その文字列をダブルクォーテーションまたはシングルクォーテーションで囲みます.また,target-counter() 関数との間は,半角スペースで区切ります.
  3. 文章中の参照元には,アンカーとなる <a> タグを挿入し,そのクラスに相互参照クラス名を指定します.さらに href 属性にソース参照のID値を指定します.
.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; CSS3

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 を使用します.

脚注のスタイル:@footnote ルール CSS3

脚注エリアの上に罫線を引くなど,脚注エリアの設定をするために,@page ルールの中で@footnote を使用します.

@page {
  @footnote {
    float: bottom page; /* 脚注エリアは,ページの下部へのフロートとして配置される */
    border-top: thin solid black; /* 脚注エリアの上の罫線を指定 */
    border-length: 30%;           /* 罫線の長さを指定(ページエリア幅の30%) */
    padding-top: 0.5em;
  }
}

脚注番号:::footnote-call/::footnote-marker 疑似要素 CSS3

脚注番号を設定するには,擬似要素の ::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; CSS3

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;
}

傍注スタイル:@sidenote ルール CSS3

@page ルールの@sidenote ルールを使用して,傍注エリアの位置と範囲を設定します.

@page {
  @sidenote {
    float: outside;
    clear: both;
    width: 20%;
  }
}

PDFブックマーク

16

PDFのブックマーク(しおり)を生成できます.

本書のブックマークの一部のスクリーンショット

ブックマークレベル:bookmark-level プロパティ CSS3

初期値none 適用対象:すべての要素 値の継承:しない

ブックマークのレベルを指定します.HTMLの <h1><h6> 要素の見出しレベルに相当します.

ブックマークラベル:bookmark-label プロパティ CSS3

初期値none 適用対象:すべての要素 値の継承:しない

ブックマークのラベルを指定します.ブックマークラベルは none の場合,要素の内容がブックマークラベルになります.

ブックマークの状態:bookmark-state プロパティ CSS3

初期値open 適用対象:ブロック要素 値の継承:しない

ブックマークを開いた状態にするか閉じた状態にするかを指定します.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字下げ

日本語文書を組版する場合の基本的なスタイル設定は,行頭約物半角固定・行末約物半角固定・段落先頭全角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 プロパティ CSS3

初期値none 適用対象:ブロック要素 値の継承:する

全角約物を半角扱いにするかどうかを指定します.

約物(句読点や括弧類)が連続する場合や行頭や行末に来たとき,全角文字の約物を半角幅に詰めて,見栄えをよくします.

/* 行頭,行末,約物どうしが隣接のとき,全角約物を半角幅にします */
punctuation-trim: start end adjacent;

「《約物〔やくもの〕》、 つまり『括弧』・『句読点』の類(たぐい)です。 」

約物の詰めを無効にすると次のようになります.(punctuation-trim: none;を指定)

「《約物〔やくもの〕》、 つまり『括弧』・『句読点』の類(たぐい)です。」

行調整のための約物の詰め:-ah-text-justify-trim プロパティ AH 独自拡張

初期値none 適用対象:すべての要素 値の継承:する

日本語での追い込みの処理方法を指定します.指定された詰めを行って,行に入るだけ文字を追い込みます.

  /* 行の調整のために約物を詰めます */
  -ah-text-justify-trim:punctuation;

この指定により,前節で説明した約物を半角幅に詰める条件に該当しない場合でも,行末をぴったりと揃える調整のために,全角の開き括弧類の前,全角閉じ括弧類や句読点の後を,必要に応じて自動的に詰めます.

和欧文間のアキ:-ah-text-autospace プロパティ AH 独自拡張

初期値auto 適用対象:ブロック要素 値の継承:する

日本語で,和欧文間にアキを入れるかどうかを指定します.

このように,日本語の文章の中に欧文や算用数字が混在するとき,間に少しアキを入れて読みやすくします.

  /* 漢字や仮名と数字の間,漢字や仮名と欧文の間にアキを入れます */
  -ah-text-autospace: ideograph-numeric ideograph-alpha;

以下では比較のため,下側の例で -ah-text-autospace: none; を指定して和欧文間のアキを無効にしています.

「日本語にもglobalにも100%を目指すAH Formatterです」

「日本語にもglobalにも100%を目指すAH Formatterです」

和欧文間のアキ量:-ah-text-autospace-width プロパティ AH 独自拡張

初期値:25% 適用対象:ブロック要素 値の継承:する

日本語で,和欧文間のアキの量を指定します.

  /* 和欧文間のアキの量を指定します */
  -ah-text-autospace-width: 25%;  /* 初期値 */

突き出し・ぶら下げ:hanging-punctuation プロパティ CSS3

初期値none 適用対象:ブロック要素 値の継承:する

行頭での突き出し,行末でマージンにぶら下げを行うかどうかを指定します.

対象となる約物は以下のとおりです.

/* 行頭での突き出し,行末でのぶら下げを行うかどうかを指定します.*/
hanging-punctuation: none;  /* 初期値 */

行頭約物半角固定・行末約物全角/半角・段落先頭全角1字下げ

行頭約物半角固定・行末約物全角または半角・段落先頭全角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字下げ

行頭約物半角固定・行末約物は句点のみ全角・段落先頭全角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;            /* 段落間は空けない */
}

夏目 漱石(なつめ そうせき、慶応三年一月五日(一八六七年二月九日)―大正五年(一九一六年)一二月九日)は、日本の小説家、評論家、英文学者。 本名、金之助。 『吾輩は猫である』『こゝろ』などの作品で広く知られる、森鷗外と並ぶ明治・大正時代の文豪である。 江戸の牛込馬場下横町(現在の東京都新宿区喜久井町)出身。 俳号は愚陀仏。

大学時代に正岡子規と出会い、俳句を学ぶ。…(中略)… 当初は余裕派と呼ばれた。

「修善寺の大患」後は、『行人』『こゝろ』『硝子戸の中』などを執筆。 「則天去私」(そくてんきょし)の境地に達したといわれる。 晩年は胃潰瘍に悩まされ、『明暗』が絶筆となった。

フリー百科事典『ウィキペディア』より引用

行頭行末約物半角固定・段落先頭全角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: 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>

縦書きの中に「'08128日」のように部分的に数字などを横書きにすることを「縦中横」といいます。

ルビ・圏点

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 ルールで行います.

@page {
  size:   A4;
  margin: 25mm;
  @top-center {
    content: "Sample";
  }
  @bottom-center {
    content: counter(page);
  }
}

ページボックスのサイズ:size プロパティ CSS3

初期値auto 適用対象@page 値の継承:しない

ページボックスの幅と高さを size プロパティで指定します.

@page {
  size: 210mm 297mm; /* ISO/JIS A4 */
}
@page {
  size: 4in 6in;
}

size プロパティには,A5A4A3B5B4JIS-B5JIS-B4letterlegal ledger などの規定のページサイズ名を使えますsize プロパティは,ISO標準の名前を使いますが,ISO の Bシリーズと JISで 規定している B シリーズでの寸法は異なるため,AH Formatter の独自拡張として,JIS-B5JIS-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 プロパティは,margin-topmargin-bottommargin-leftmargin-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 プロパティ CSS3

初期値auto 適用対象:クラス1の改ページを作成するボックス 値の継承:しない

名前付きの @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>
page プロパティは名前付きページを選択します

ページ数の制約:-ah-force-page-count プロパティ AH 独自拡張

初期値auto 適用対象@page 値の継承:しない

文書の総ページ数に制約を課します.制約が満たされない場合,ページの末尾に追加のページ(または複数ページ)が追加されます.ページ数を制約する理由としては,用紙の両面に印刷されたオフィス文書は偶数ページが必要な場合があったり,小冊子 として印刷する文書は,4ページの倍数,商業用印刷機で印刷する文書は,1枚の用紙に8,16,32 または64ページで印刷し,折り畳んで,裁ち落とす場合があるからです.

例えば,5ページの文書を生成する場合:

トンボ

@page ルールはページボックスを定義します.ページボックスの大きさは @page ルールの size で定義しますが,それよりも大きな用紙に印刷できます.その目的は,画像やその他のコンテンツをページボックスの端まで拡張するためです.プリンタのような物理的デバイスは,通常,用紙の端のまわりに印刷できないエリアを有しており,そこにコンテンツがあれば,印刷できません.大きな用紙にページボックスを印刷し,ページボックスのサイズに合わせて用紙を詰めると,印刷できないエリアの問題が回避されます.画像などをページボックスの外側の裁ち落しエリアに拡張すると,仕上がり寸法が不正確な場合の問題を回避できます.

コーナートンボとセンタートンボは,ページボックスの外側に印刷され,用紙のサイズを仕上がり寸法に処理し,両面に印刷されたコンテンツが正確に位置していることを確認するガイドとして使用します.ページボックスの外側に印刷される情報としては,多色刷りの見当合せのための色見本,ページ,ページを含む文書,バージョン番号などを識別する情報などがあります.

トンボ(クロップマーク)の用語

トンボの表示:marks プロパティ CSS3

初期値none 適用対象:CSS @page 値の継承:しない

印刷時にトンボを印刷するかどうかを指定します.

  • crop:コーナートンボ(crop marks)を出力します.
  • crop-trim:仕上がり寸法の位置にのみコーナートンボを出力します.(内トンボ)
  • cross:センタートンボ(cross marks,registration marks)を出力します.
  • cross-circle:十字のセンタートンボに円を付けて出力します.
  • crop-registration:西洋トンボ(registration marks)を出力します.
  • <uri-specification>:カスタムトンボ,色見本バーなどを表現する SVG などの画像の位置を指定します.複数の画像を指定もできます.AH 独自拡張
センタートンボとコーナートンボ

ページボックスの四隅にコーナートンボ,また四辺の中央にセンタートンボを出力できます.コーナートンボは,仕上がり寸法に詰め処理するための位置,センタートンボは,多色刷りの見当合せのために,また用紙の表と裏の位置を合わせるのに役立ちます.外部参照画像の位置を指定して,カスタムトンボを出力することもできます.

@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;               /* 裁ち落としの長さ */
}

トンボの可視性:-ah-crop-area-visibility プロパティ AH 独自拡張

初期値:非表示 適用対象:CSS @page 値の継承:しない

仕上がり寸法からはみ出したエリアを表示するかどうか指定します.

  • hidden:塗り足し部分は,非表示にします.
  • visible:塗り足し部分は,表示します.

トンボの線の色:-ah-printer-marks-line-color プロパティ AH 独自拡張

初期値auto 適用対象:CSS @page 値の継承:しない

トンボの線の色を指定します.値が auto のときは,レジストレーションカラーとみなされます.

トンボの線の長さ:-ah-printer-marks-line-length プロパティ AH 独自拡張

初期値auto 適用対象:CSS @page 値の継承:しない

トンボの線の長さを指定します.値が auto のときは,システム既定値に依存します.トンボの既定値の長さは10mmですが,変更できます.

トンボの線の幅:-ah-printer-marks-line-width プロパティ AH 独自拡張

初期値auto 適用対象:CSS @page 値の継承:しない

トンボの線の幅を指定します.値が auto のときは,システム既定値に依存します.トンボの既定値の幅は0.2ptですが,変更できます.

出力媒体の端から仕上がり寸法までの距離:-ah-crop-offset プロパティ AH 独自拡張

初期値:0 適用対象:CSS @page 値の継承:しない

出力媒体の物理的な端から仕上がり寸法までの距離を指定します.

裁ち落し(塗り足し)

画像などでは,ページの裁ち落としの端を超えて塗り足し部分まで一杯に入れることがあります.画像をページの端まで一杯に拡張するのは,有意義な効果があります.ページの端までぎりぎりに拡張する場合,不正確な裁ち切り処理で画像の外端側に空白を残す可能性があります.画像をページの端を超えて拡張し,仕上がりサイズに裁ち切ることで,このような問題を回避できます.

裁ち落し(塗り足し)

裁ち落し(塗り足し)の幅:bleed プロパティ CSS3

初期値:0 適用対象:CSS @page 値の継承:しない

裁ち落し(塗り足し)の幅を指定します.裁ち落しエリアは,仕上がり寸法の外側に取られます.マージンボックスのマージンに負の値を指定することで,裁ち落しエリアまでブロックの範囲を伸ばすことができます.

ヘッダとフッタ

19

マージンボックス CSS3

ページヘッダやページフッタは,ページの周辺のマージンボックスと呼ばれるエリアに割り当てます.

マージンボックスは,@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 プロパティ CSS3

初期値none 適用対象:擬似要素を除くすべての要素 値の継承:しない

文字列を名前付きの変数にするには,string-set プロパティを使います.

string-set の値は変数名とその変数に格納するコンテンツリストのペアになります.変数の値(内容)は,柱(ランニングヘッダ)で参照されます.

コンテンツリストは,任意の順序で,以下のいずれかひとつ以上になります.

  • <string>:文字列です.
  • <counter()>counter() の関数です.カウンタ を参照してください.
  • <counters()>counters() の関数です.
  • <content()>content() の関数です.指定可能な値は以下のとおり:
    • content():要素の文字列値.
    • content(before)::before 疑似要素の文字列値.
    • content(after)::after 疑似要素の文字列値.
    • content(first-letter):要素の最初の文字.
  • attr(<attr-name>):<attr-name>属性の文字列値.
  • -ah-attr-from(<from-name>, <attr-name> <type-or-unit>?[, <fallback> ]?):先祖 <from-name> 要素の属性 <attr-name> の文字列値 AH 独自拡張
h1 {
  /* Chapter content(before) content()に
     h1:before と h1 自身の内容をセットします*/
  string-set: Chapter content(before) content();
}

string() CSS3

名前付き文字列(変数)の値を文書にコピーするのに使用します.

string-set で定義した変数は,例えば,柱(ランニングヘッダ)に content: string(Chapter); のように参照されます.

必要とされる最初の値は名前付き文字列です.

@top-right {
  /* 右先頭ページのタイトル*/
  content: string(Chapter);
}

ひとつのページの複数要素がそれぞれの同名の名前付き文字列の値を設定する場合,名前付き文字列はそのページに複数の値を持つことがあります.string() の2番目の引数で使用可能な値を指定もできます.

  • start:そのページの名前付き文字列のエントリ値(前のページの最後の有効な指定)を使用します.
  • first:ページに値の割り当てがある場合は,最初の割り当て値を使用し,それ以外の場合は,エントリ値を使用します.
  • last:そのページの名前付き文字列の退出値(現在のページの最後の有効な指定)を使用します.
  • first-exceptfirst と似ていますが,値が割り当てられているページに空の文字列が使用されます.例えば,これは,章の先頭ページのヘッダに章のタイトルを繰り返さないようにするために使用します.
@page Index:right {
  @top-left {
    content: string(IndexTerm, first);
  }

  @top-right {
    content: string(IndexTerm, last);
  }
}

要素をヘッダ・フッタに移動する:running() 位置値 CSS3

要素をマージンボックスに表示させるには,position: running(name); を使用します.引数の名前は,element() 関数で要素が参照される名前です.

position: running(name); の要素は,あるべき位置に表示されません.あたかも display: none; が設定されているように扱われます.

p.Title {
    position: running(Title);
    text-indent: 0;
}

running 要素を挿入:element() CSS3

running 要素をマージンボックスにコピーするのに使用します.

position: running(name); を使用して,あるべき配置から取り出した要素は,柱(ランニングヘッダ)内で content: element(name); として参照されます.running 要素は,疑似要素とその子孫を含め,ひとつの要素を持つことができます.string()と異なり,element() は他の値と組み合わせることができません.

running 要素は,文書の普通の配置を継承します.

必要とされる最初の値は,running 要素名前です.

@top-left {
  /* 左ページ見出しのタイトル*/
  content: element(Title);
}

ひとつのページの複数要素がそれぞれの同名の running 要素の値を設定する場合,running 要素はそのページに複数の値を持つことがあります.element() の2番目の引数で使用可能な値を指定もできます.

  • start:そのページの running 要素のエントリ値を使用します.
  • first:ページに値の割り当てがある場合は,最初の割り当て値を使用し,それ以外の場合は start 値を使用します.
  • last:そのページの running 要素の退出値を使用します.
  • first-exceptfirstと似ていますが,値が割り当てられているページに空文字列が使用されます.

ノンブル(ページ番号)の出力には,ページカウンタcounter(page) を使いますcounter() は CSS2.1 で規定されていますが,CSS3 ではページコンテキストにページ番号を表す専用のカウンタが導入されます.

@page {
  @top-right {
    content: "Page " counter(page);
  }
}

総ページ数:counter(pages) CSS3

"" のように,現在のページ番号とともに総ページ数を出力できます.

@page {
  @top-right {
    content:  counter(pages);のページカウンタ(実際の物理ページ)
  }
}

左・右・先頭・空白ページ: :left:right:first:blank

ページのマージンは,ページのマージンボックスの内容とスタイル同様に :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; }
}

最終ページ・単一ページ::last:only AH 独自拡張

このふたつは AH Formatter の拡張です.:last は最後のページ,:only は唯一のページを指定します.

進行方向:writing-mode プロパティ CSS3

初期値lr-tb 適用対象:すべての要素 値の継承:する

文書全体の文字,行,ページの進行方向を設定するには,ルート要素に writing-mode を指定します.初期値は writing-mode: lr-tb (left-to-right,top-to-bottom)で,横書き,すなわち文字の進行方向は左から右,行とブロックの進行方向は上から下,ページは左から右への進行となりますルート要素の writing-mode の設定は,ページボックスに継承され,さらにマージンボックスに継承されます.

日本語の縦書きを指定するには,writing-mode: tb-rl を指定します.文字の進行方向が上から下,行とブロックの進行方向が右から左,ページの進行方向が右から左となります.

body {
  writing-mode: tb-rl;  /* 縦書き */
}

PDF出力

20

Portable Document Format(PDF)は,ページ組版の最も一般的な出力形式です.AH Formatter は PDFの機能を駆使するための複数の拡張を提供しています.

PDFバージョン

PDF仕様は,最初のバージョンが1993年に公開されて以来,複数のバージョンを公開しています.公開ごとに新機能が追加されました.PDFバージョンで廃止されていない機能はすべて,後続のバージョンにも含まれます.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は,最初にPDF 1.4で定義されました.

タグ付きPDFのテキスト,グラフィクス,イメージは,例えば視覚障害のあるユーザがコンテンツにアクセスしたり,他の目的で抽出して再利用できます.PDF/UA は,追加条件にも適合するタグ付き PDFファイルです.

AH Formatterは,HTML/CSS要素と疑似要素のPDFタグ(StructElem)を次の表が示すように埋め込みます.

HTMLの要素 PDF の要素
htmlDocument
divDiv
h1H1
h2H2
h3H3
h4H4
h5H5
h6H6
pP
ulL
olL
liLI
li::markerLbl
dlL
dtLbl
ddLBody
blockquoteBlockQuote
captionCaption
tableTable
trTR
tdTD
thTH
theadTHead
tfootTFoot
tbodyTBody
rubyRuby
rbRB
rtRT
spanSpan
imgFigure
a[href]Link
その他のブロック要素Div
その他のインライン要素Span

カスタムPDFタグ名:-ah-pdftag プロパティ AH 独自拡張

初期値:空文字列 適用対象:すべての要素 値の継承:しない

タグ付きPDFを生成する際に,指定された名前が標準のPDFタグ名でない場合,PDFのロールマップを生成して,その名前を標準の PDFタグ名へ割り当てます.提供された名前が標準のPDFタグ名のひとつである場合,その名前はそのまま使用されます.

div.TOC {
  page-break-before: right;
  page: TOC;
  -ah-pdftag: 'Sect';
}
<div class="TOC"> は PDFでは「Sect」とタグ付けされています.

PDF/X

PDF/Xは,ISO 15930 で規定されており,印刷用のグラフィクス交換を目的としたPDFのサブセットです.基本的には,印刷するためのすべての情報がPDFファイル内に含まれています.

AH Formatter は,複数のPDF/X バージョンに対応しています.

PDF/X の大きな特徴
要件 PDF/X-1a PDF/X-2 PDF/X-3 PDF/X-4
フォントはすべて埋め込まれなければならない
出力インテントが指定されていなければならない
出力インテントとして指定されたICCカラープロファイルを埋め込まなければならない × × ×
CMYK,スポットカラーをサポートする
グレイスケールをサポートする
RGBをサポートする ×
透明をサポートする × × ×
パスワードの設定や,印刷制限,変更制限などを行ってよい × × × ×
リンクや注釈などを含めてよい × × × ×

PDF/A

PDF/Aは ISO 19005で規定されており,電子文書の長期保存を目的としたPDFのサブセットです.

PDF/A の大きな特徴
要件 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

PDF/UAは,ISO 14289-1で規定されており,ISO 32000-1(PDF 1.7)仕様に基づいたPDFのアクセシビリティ向上を目的とした仕様です.

PDF/UAの大きな特徴は以下が挙げられます.

マッターホルン プロトコル

PDF 協会(PDF Association)が公開したマッターホルンプロトコル(Matterhorn Protocol)は,PDFが PDF/UAに準拠しない可能性のあるすべての方法のチェックリストです.マッターホルンプロトコルhttps://www.pdfa.org/publication/the-matterhorn-protocol-1-02/ 文書は,136の失敗条件から成る31のチェックポイン トで構成されています.一部の失敗条件は,プログラミングでチェックできますが,人の手によるレビューが必要な場合があります.

表に関するマッターホルンプロトコル失敗条件

PAC 3 PDF/UA チェッカー

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ファイルを開くと,プログラムはチェックを実行し,結果の要約を表示します.インタラクティブなチェックがないので,プログラムは,人の手によるチェックを必要とする失敗について警告するだけです.

PAC 3 PDF/UA チェッカー

文書 プロパティAH 独自拡張

この拡張は <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の文書カタログに格納されている情報を提供します.

Acrobat Readerで表示される文書プロパティ

Extensible Metadata Platform (XMP)

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>
XMPプロパティはAcrobatで表示されます
Acrobatで表示されたXMPプロパティ

ページ表示 AH 独自拡張

次のname 値を持つ<meta> は,最初にリーダで開いたときのPDFの表示方法を制御します.記述のない限り,利用できる値は truefalseで,その 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ページ組版入門
2008年12月8日初版発行
2009年3月13日第2版発行
2009年4月21日第3版発行
2018年9月10日第4版発行
著者 アンテナハウス株式会社
発行所 アンテナハウス株式会社
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化しました.