’
’
Copper PDFはCSSの名前空間のための拡張機能 (CSS Namespace Enhancements) をサポートしており、複数の名前空間が混在するXMLをスタイル付けすることができます。
CSSスタイルシート中で名前空間の接頭辞(prefix)とURIを指定するためには、 @namespace指示子を使って以下のように宣言してください。
/* デフォルトの名前空間のURIをhttp://www.w3.org/1999/xhtmlとする。 */ @namespace "http://www.w3.org/1999/xhtml"; /* 接頭辞rdfのURIをhttp://www.w3.org/1999/02/22-rdf-syntax-ns#とする。 */ @namespace rdf "http://www.w3.org/1999/02/22-rdf-syntax-ns#";
なお、互換性のためにURIの部分はurl(http://www.w3.org/1999/xhtml)という書き方も許されています。
スタイルシートの選択子(selector)で接頭辞を使う場合は、'|'で区切ります。 (':'でないことに注意してください。)
/* <pdf:Description>要素のスタイルを指定する。 */
rdf|Description { display: block; }
/* ref:about属性がhttp://foo.com/barであるitem要素のスタイルを指定する。 */
item[rdf|about=http://foo.com/bar] { color: Red; }
選択子の記述方法と、意味は次のとおりです。
Copper PDFは、ページの番号付けのために ページの生成ごとに処理されるページカウンタを用意しています。 ページカウンタは、以下のように@pageルール内の counter-increment プロパティにより宣言します。
@page {
counter-increment: page;
}
ページカウンタの処理は、ページの内容が処理される直前に行われます。 また、ページカウンタは通常のカウンタと同様に、content プロパティ内でcounter関数により参照可能です。 従って、上記の宣言を行った場合、最初のページで content: counter(page); という宣言が処理されるとき、1が出力されます。
途中でページカウンタをリセットする場合 (例えば、目次が終わった後、本文で改めて番号を振りなおすなど) は、通常のカウンタと同様にcounter-reset を使うことができます。 例えば、ある要素が表示されるページでpageという名前のカウンタを1に設定しなおす場合は、その要素で counter-reset: page 1; と宣言します。
Copper PDFは、箇条書きの先頭に付けるマーカー文字の形式を拡張しています。 list-style-type で、次のキーワードを利用可能です。
<html>
<head>
<style type="text/css">
#a {
list-style-type: -cssj-full-width-decimal;
}
#b {
list-style-type: -cssj-cjk-decimal;
}
</style>
</head>
<body>
<ol id="a">
<li>田作り</li>
<li>黒豆</li>
<li>栗きんとん</li>
</ol>
<ol id="b">
<li>かまぼこ</li>
<li>伊達巻</li>
<li>数の子</li>
</ol>
</body>
</html>
contentのcounter関数でも同じキーワードを使うことができます。
<html>
<head>
<style type="text/css">
#a:before {
counter-increment: a;
content: counter(a, -cssj-full-width-decimal);
}
#b:after {
counter-increment: b;
content: counter(b, -cssj-cjk-decimal);
}
</style>
</head>
<body>
<div id="a">田作り</div>
<div id="a">黒豆</div>
<div id="a">栗きんとん</div>
<div id="b">かまぼこ</div>
<div id="b">伊達巻</div>
<div id="b">数の子</div>
</body>
</html>
行頭禁則文字（直前での折り返しをしない文字）は、全角スペースと次の文字です。
～〜ヽヾゝゞ々ーぁぃぅぇぉっゃゅょゎァィゥェォッャュョヮヵヶ・, ) ] ｝ 、 〕 〉 》 」 』 】 〟 ’ ” »
さらに、UnicodeのEND_PUNCTUATION（閉じ括弧類）、OTHER_PUNCTUATION（その他の括弧類）、 MODIFIER_LETTER（修飾文字）、MODIFIER_SYMBOL（修飾記号）が行頭禁則文字とされます。
行末禁則文字（直後での折り返しをしない文字）は次の文字です。
( [ ｛ 〔 〈 《 「 『 【 〝 ‘ “ «
さらに、UnicodeのSTART_PUNCTUATION（開き括弧類）が行末禁則文字とされます。
半角英数字の間でも折り返しが禁止されます。 ただし、半角スペースと、次の文字の間では折り返しされます。
-!?
また、禁則処理により折り返しをできない区間は48文字を超えることはできません (Copper PDF 3.0.0からは、この仕様はなくなりました。 次のword-wrapを使ってください)。
word-wrap はCSS3 Text の先行実装です。仕様は次のとおりです。
break-wordを設定すると、内容が行幅の限界をはみ出さないように、 必要に応じて禁則処理されている部分での折り返しをします。
<html>
<head>
<style type="text/css">
div {
width: 6ex;
border: 1pt solid Red;
}
#a {
word-wrap: normal;
}
#b {
word-wrap: break-word;
}
</style>
</head>
<body>
<div id="a">Distance lends enchantment to the view.</div>
<div id="b">Distance lends enchantment to the view.</div>
</body>
</html>
禁則文字を新たに追加・除外するために、-cssj-no-break-characters, -cssj-break-charactersという独自CSSプロパティを用意しています。
禁則文字を追加します。１つめの<string>は行頭禁則文字、２つめの<string>行末禁則文字を指定します。 <string>が１つだけの場合は行頭禁則文字だけが追加されます。
例えば、次の文章があるとします。
<div style="border:1px solid; width: 7em;"> 今日の相場は１＄がロンドンで９８円５５銭－先月と比べて２㌫上昇しました。 </div>
'㌫'と'＄'を行頭に表示させたくなく、'－'を行末に表示させたくないという場合は、次のように指定してください。
<div style="border:1px solid; width: 7em; -cssj-no-break-characters: '㌫＄' '－';"> 今日の相場は１＄がロンドンで９８円５５銭－先月と比べて２㌫上昇しました。 </div>
禁則文字を除外します。１つめの<string>は行頭禁則文字、２つめの<string>行末禁則文字を指定します。 <string>が１つだけの場合は行頭禁則文字だけが除外されます。
例えば、Copper PDFは次のように、拗音が行頭に来ないように調整します。
<div style="border:1px solid; width: 10em;"> 「トロメライ、ロマチックシューマン作曲。」猫は口を拭いて済まして云いました。 </div>
しかし、実際に書籍は拗音を行頭禁則しないことが多いため、それに従うには次のようにします。
<div style="border:1px solid; width: 10em; -cssj-break-characters: 'ァ ィ ゥ ェ ォ ッ ャ ュ ョ ヮ ヵ ヶ ぁ ぃ ぅ ぇ ぉ っ ゃ ゅ ょ ゎ ゕ ゖ ㇰ ㇱ ㇳ ㇲ ㇳ ㇴ ㇵ ㇶ ㇷ ㇸ ㇹ ㇺ ㇻ ㇼ ㇽ ㇾ ㇿ ';"> 「トロメライ、ロマチックシューマン作曲。」猫は口を拭いて済まして云いました。 </div>
主に日本語の文章の一部を強調するために使われる、圏点を打つことができます。 圏点のためには、CSS3 Textの先行実装である、-cssj-text-emphasis-style, -cssj-text-emphasis-color, -cssj-text-emphasis というCSSプロパティが使われます。
EPUBとの互換性のため、これらのプロパティはそれぞれ、 -epub-text-emphasis-style, -epub-text-emphasis-color, -epub-text-emphasis という名前も使うことができます。
圏点の記号は本文のフォントを使って表示されます。 より美しい圏点を出力するためには Kenten Generic OpenType Font(https://github.com/adobe-fonts/kenten-generic) を埋め込みフォントとして使用することを推奨します。 本文のフォントファミリを font-family: 'Kenten Generic' 本文フォント...; のように指定してください。
noneが設定された場合、圏点を打ちません。
その他の値が設定された場合、圏点の種類（ユニコード 文字）はそれぞれ次のとおりになります。
’
’
filledかopenだけが指定された場合は、横書きではそれぞれ filled circle, open circle が指定されるのと同じになり、縦書きではそれぞれ filled sesame, open sesame が指定されるのと同じになります。
文字列が指定された場合、文字列の最初の文字が圏点になります。
<html>
<head>
<style type="text/css">
#a {
-cssj-text-emphasis-style: filled;
}
#b {
-cssj-text-emphasis-style: open triangle;
}
#c {
-cssj-text-emphasis-style: '※';
}
</style>
</head>
<body>
<p><span id="a">ここ</span>に丸い圏点を打ちます</p>
<p><span id="b">ここ</span>に三角の圏点を打ちます</p>
<p><span id="c">ここ</span>に米印の圏点を打ちます</p>
</body>
</html>
ここに丸い圏点を打ちます
ここに三角の圏点を打ちます
ここに米印の圏点を打ちます
圏点の色を指定します。 色の指定方法はcolorプロパティなどの場合と同じです。
<html>
<head>
<style type="text/css">
span {
-cssj-text-emphasis-style: filled;
}
#a {
-cssj-text-emphasis-color: Red;
}
#b {
color: Red;
}
</style>
</head>
<body>
<p><span id="a">この</span>圏点は赤いです</p>
<p><span id="b">この</span>圏点も文字も赤です</p>
</body>
</html>
この圏点は赤いです
この圏点も文字も赤です
-cssj-text-emphasis-style, -cssj-text-emphasis-color をまとめて指定するプロパティです。 圏点のスタイル、色の順に指定します。
<html>
<head>
<style type="text/css">
#a {
-cssj-text-emphasis: filled triangle Red;
}
#b {
-cssj-text-emphasis: '※' Pink;
}
</style>
</head>
<body>
<p><span id="a">この</span>圏点は赤い三角です</p>
<p><span id="b">この</span>圏点はピンクの米印です</p>
</body>
</html>
この圏点は赤い三角です
この圏点はピンクの米印です
Copper PDFは、一般的なブラウザがサポートしている「文字の影落とし」をサポートしています。 ただし、制約として影の「ぼかし」には対応していません。常にぼかしの半径にゼロを設定したのと同じになります。
text-shadowの値は、影のx方向の位置、y方向の位置、影の色の順に指定します。 また、カンマで区切ることにより、複数の影を落とすことができます。 １つ目の影は文字の後ろに作られ、順に背面へと作られます。
<html>
<head>
<style type="text/css">
* {
font-size: 32pt;
}
#a {
text-shadow: 4pt 8pt Gray;
}
#b {
text-shadow: 8pt 8pt Gray, 16pt 16pt LightGray;
}
</style>
</head>
<body>
<p id="a">灰色の影のある文字</p>
<p id="b">灰色の影の後ろにさらに薄い灰色の影</p>
</body>
</html>
灰色の影のある文字
灰色の影の後ろにさらに薄い灰色の影
レンダリングエンジンとしてWebKitを利用しているブラウザ（Google Chrome, Safari等）との互換性のために、テキストの輪郭と塗りを別々に指定するプロパティを用意しています。 これは袋文字の効果を実現するために使うことができます。
-cssj-text-fill-color, -cssj-text-stroke-width, -cssj-text-stroke-color, -cssj-text-stroke という４つの独自プロパティを用意しています。これらは、WebKitとの互換性のために、それぞれ -webkit-text-fill-color, -webkit-text-stroke-width, -webkit-text-stroke-color, -webkit-text-stroke というプロパティ名でも利用することができます。
テキストの塗りつぶし色を設定します。 なにも指定しない場合は、colorによる指定と同じになります。
テキストの枠の幅をしていします。 0以外の値を設定すると、枠が描画されるようになります。
テキストの枠の色を設定します。 なにも指定しない場合は、colorによる指定と同じになります。
テキストの枠の幅と色を一度に設定します。
<html>
<head>
<style type="text/css">
* {
font-size: 32pt;
}
#a {
-cssj-text-stroke-width: 2pt;
}
#b {
-cssj-text-stroke: 1pt Black;
-cssj-text-fill: White;
}
</style>
</head>
<body>
<p id="a">輪郭を太らせた文字</p>
<p>テキストの<span id="b">この部分</span>が白抜き</p>
</body>
</html>
輪郭を太らせた文字
文章のこの部分が白抜き
要素の不透明度を設定します。値は0(透明)から1(不透明)までの小数値です。 例えば0.5に設定すると、その要素は50%の透明度を持つことになります。
<html>
<head>
<style type="text/css">
* {
font-size: 32pt;
}
#a {
position: relative;
top: -32pt;
font-size: 32pt;
border: 5pt solid Red;
background-color: Yellow;
opacity: 0.7;
}
</style>
</head>
<body>
<div>輪郭を太らせた文字</div>
<div id="a">透明化したボックス</div>
</body>
</html>
前記のopacityは要素全体を半透明にするものでしたが、これとは別に、rgba関数により各指定色に透明度を加えることができます。 これにより、例えば文字、境界線に別々の透明度を指定することができます。 rgba関数は色指定をするcolor, background-color, border-color 等のプロパティで使用することができます。 rgba関数内の数値は、それぞれ赤、緑、青、不透明度の順です。不透明度は0から1までの小数で指定します。
<html>
<head>
<style type="text/css">
* {
font-size: 32pt;
}
#a {
position: relative;
top: -32pt;
font-size: 32pt;
border: 5pt solid Red;
background-color: rgba(255,255,0,0.5);
}
</style>
</head>
<body>
<div>輪郭を太らせた文字</div>
<div id="a">透明化したボックス</div>
</body>
</html>
ボックスの境界線の四隅を丸くすることができます。
Copper PDF 3.0.8からは、背景の四隅も丸くなります。 また、既知の問題として、４つの境界線の色・太さ・スタイル・角の半径が異なる場合、背景が境界をはみ出すことがあります。
角の半径を指定するために、border-*-*-radiusという形式の４つのプロパティを使います。 これらのプロパティは１つまたは２つの長さ、％値を指定し、１つの場合は角の半径、２つの場合は角を楕円形の弧としそれぞれ左右方向と上下方向の半径となります。
border-radiusは前記のプロパティをまとめて指定するためのものです。 値はそれぞれ、 border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius の順に指定します。 ４番目の値が省略された場合、border-bottom-left-radiusは border-top-right-radiusと同じになります。 ３番目の値が省略された場合、border-bottom-right-radiusは border-top-left-radiusと同じになります。 ２番めの値が省略された場合、全ての隅が同じ指定になります。
左右方向と上下方向の半径は'/'(スラッシュ)記号で区切り、それぞれをまとめて指定します。
<html>
<head>
<style type="text/css">
div {
border: 1pt solid Red;
background-color: Yellow;
height: 50pt;
}
#a {
border-radius: 5pt;
}
#b {
border-radius: 10pt 20pt / 20pt 10pt;
border-top-left-radius: 30pt;
}
</style>
</head>
<body>
<div id="a">四隅が丸いボックス</div>
<div id="b">四隅がいびつなボックス</div>
</body>
</html>
ボックスに対して二次元変換により回転、拡大、変形などを行うことができます。 なお、三次元変換には対応していません。
-cssj-transfrom, -cssj-transform-origin というプロパティで変換を行います。 WebKit, Firefoxとの互換性のために、 -webkit-transfrom, -webkit-transform-origin, -moz-transfrom, -moz-transform-origin という名前でも使用することができます。
ボックスに対する変換行列を指定します。 値には、noneまたは複数の変換関数を指定することができます。 利用できる変換関数は次のとおりです。
変換行列は次のとおりに指定されます。
aは左右方向の拡大率、bは上下方向の傾斜率、cは左右方向の傾斜率、dは上下方向の拡大率、eは左右方向の移動距離、fは上下方向の移動距離に対応します。 e, fにはpt, em等の長さの単位を使用することができます。単位がない場合はpt単位です。なお、％値による指定には対応していません。
変換の中央点を指定します。 デフォルトではボックスの中心になっており、例えばrotate関数を使用するとボックスの中心を回転の中心とします。
<html>
<head>
<style type="text/css">
body {
margin: 40pt;
}
div {
font-size: 32pt;
position: absolute;
-cssj-transform-origin: 5pt 5pt;
}
#a {
-cssj-transform: rotate(0deg);
}
#b {
-cssj-transform: rotate(90deg);
}
#c {
-cssj-transform: rotate(180deg);
}
#d {
-cssj-transform: rotate(270deg);
}
</style>
</head>
<body>
<div id="a">▼</div>
<div id="b">▼</div>
<div id="c">▼</div>
<div id="d">▼</div>
</body>
</html>