Copper PDF ドキュメント

CSSの拡張機能

名前空間

Copper PDFはCSSの名前空間のための拡張機能 (CSS Namespace Enhancements) をサポートしており、複数の名前空間が混在するXMLをスタイル付けすることができます。

CSSスタイルシート中で名前空間の接頭辞(prefix)とURIを指定するためには、 @namespace指示子を使って以下のように宣言してください。

なお、互換性のためにURIの部分はurl(http://www.w3.org/1999/xhtml)という書き方も許されています。

スタイルシートの選択子(selector)で接頭辞を使う場合は、'|'で区切ります。 (':'でないことに注意してください。)

要素のスタイルを指定する。 */
rdf|Description { display: block; }

/* ref:about属性がhttp://foo.com/barであるitem要素のスタイルを指定する。 */
item[rdf|about=http://foo.com/bar] { color: Red; }]]>

選択子の記述方法と、意味は次のとおりです。

prefix|ELEMENT: prefixが指す名前空間に属するELEMENT
|ELEMENT: どの名前空間にも属さないELEMENT
*|ELEMENT: 任意の名前空間にも属すか、どの名前空間にも属さないELEMENT
ELEMENT: デフォルトの名前空間に属するELEMENT

ページカウンタ

Copper PDFは、ページの番号付けのためにページの生成ごとに処理されるページカウンタを用意しています。ページカウンタは、以下のように@pageルール内の counter-increment プロパティにより宣言します。

ページカウンタの処理は、ページの内容が処理される直前に行われます。また、ページカウンタは通常のカウンタと同様に、content プロパティ内でcounter関数により参照可能です。従って、上記の宣言を行った場合、最初のページで content: counter(page); という宣言が処理されるとき、1が出力されます。

途中でページカウンタをリセットする場合 (例えば、目次が終わった後、本文で改めて番号を振りなおすなど) は、通常のカウンタと同様にcounter-reset を使うことができます。例えば、ある要素が表示されるページでpageという名前のカウンタを1に設定しなおす場合は、その要素で counter-reset: page 1; と宣言します。

全角数字と漢数字による箇条書き番号

Copper PDFは、箇条書きの先頭に付けるマーカー文字の形式を拡張しています。 list-style-type で、次のキーワードを利用可能です。

-cssj-full-width-decimal3.0.0: マーカーに全角数字を使います。
-cssj-cjk-decimal3.0.0: マーカーに位取り漢数字を使います。
-cssj-decimal-full-width2.1.2: -cssj-full-width-decimalと同じです。


  
    
  
  
    
      田作り
      黒豆
      栗きんとん
    
    
      かまぼこ
      伊達巻
      数の子
    
  
]]>

田作り
黒豆
栗きんとん

かまぼこ
伊達巻
数の子

contentのcounter関数でも同じキーワードを使うことができます。


  
    
  
  
    田作り
    黒豆
    栗きんとん
    かまぼこ
    伊達巻
    数の子
  
]]>

１田作り

２黒豆

３栗きんとん

かまぼこ一

伊達巻二

数の子三

禁則処理

行頭禁則文字（直前での折り返しをしない文字）は、全角スペースと次の文字です。

～〜ヽヾゝゞ々ーぁぃぅぇぉっゃゅょゎァィゥェォッャュョヮヵヶ・, 
) ] ｝ 、 〕 〉 》 」 』 】  〟 ’ ”  »

さらに、UnicodeのEND_PUNCTUATION（閉じ括弧類）、OTHER_PUNCTUATION（その他の括弧類）、 MODIFIER_LETTER（修飾文字）、MODIFIER_SYMBOL（修飾記号）が行頭禁則文字とされます。

行末禁則文字（直後での折り返しをしない文字）は次の文字です。

( [ ｛ 〔 〈 《 「 『 【 〝 ‘ “ «

さらに、UnicodeのSTART_PUNCTUATION（開き括弧類）が行末禁則文字とされます。

半角英数字の間でも折り返しが禁止されます。ただし、半角スペースと、次の文字の間では折り返しされます。

-!?

また、禁則処理により折り返しをできない区間は48文字を超えることはできません (Copper PDF 3.0.0からは、この仕様はなくなりました。次のword-wrapを使ってください)。

word-wrap3.0.0

word-wrap はCSS3 Text の先行実装です。仕様は次のとおりです。

値: normal | break-word
初期値: normal
適用対象: すべて
値の継承: する

break-wordを設定すると、内容が行幅の限界をはみ出さないように、必要に応じて禁則処理されている部分での折り返しをします。


  
    
  
  
    Distance lends enchantment to the view.
    Distance lends enchantment to the view.
  
]]>

Distance lends enchantment to the view.

禁則文字を新たに追加・除外するために、-cssj-no-break-characters, -cssj-break-charactersという独自CSSプロパティを用意しています。

-cssj-no-break-characters3.0.6

値: none | <string>{1,2}
初期値: none
適用対象: すべて
値の継承: する

禁則文字を追加します。１つめの<string>は行頭禁則文字、２つめの<string>行末禁則文字を指定します。 <string>が１つだけの場合は行頭禁則文字だけが追加されます。

例えば、次の文章があるとします。


今日の相場は１＄がロンドンで９８円５５銭－先月と比べて２㌫上昇しました。

]]>

今日の相場は１＄がロンドンで９８円５５銭－先月と比べて２㌫上昇しました。

'㌫'と'＄'を行頭に表示させたくなく、'－'を行末に表示させたくないという場合は、次のように指定してください。


今日の相場は１＄がロンドンで９８円５５銭－先月と比べて２㌫上昇しました。

]]>

今日の相場は１＄がロンドンで９８円５５銭－先月と比べて２㌫上昇しました。

-cssj-break-characters3.0.6

値: none | <string>{1,2}
初期値: none
適用対象: すべて
値の継承: する

禁則文字を除外します。１つめの<string>は行頭禁則文字、２つめの<string>行末禁則文字を指定します。 <string>が１つだけの場合は行頭禁則文字だけが除外されます。

例えば、Copper PDFは次のように、拗音が行頭に来ないように調整します。


「トロメライ、ロマチックシューマン作曲。」猫は口を拭いて済まして云いました。

]]>

「トロメライ、ロマチックシューマン作曲。」猫は口を拭いて済まして云いました。

しかし、実際に書籍は拗音を行頭禁則しないことが多いため、それに従うには次のようにします。


「トロメライ、ロマチックシューマン作曲。」猫は口を拭いて済まして云いました。

]]>

「トロメライ、ロマチックシューマン作曲。」猫は口を拭いて済まして云いました。

圏点3.0.4

主に日本語の文章の一部を強調するために使われる、圏点を打つことができます。圏点のためには、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' 本文フォント...; のように指定してください。

-cssj-text-emphasis-style

値: none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>
初期値: none
適用対象: すべて
値の継承: する

noneが設定された場合、圏点を打ちません。

その他の値が設定された場合、圏点の種類（ユニコード文字）はそれぞれ次のとおりになります。

filled dot: U+2022 ‘•’
open dot: U+25E6 ‘◦’
filled circle: U+25CF ‘●’
open circle: U+25CB ‘○’
filled double-circle: U+25C9 ‘◉’
open double-circle: U+25CE ‘◎’
filled triangle: U+25B2 ‘▲’
open triangle: U+25B3 ‘△’
filled sesame: U+FE45 ‘﹅’‘’
open sesame: U+FE46 ‘﹆’‘’

filledかopenだけが指定された場合は、横書きではそれぞれ filled circle, open circle が指定されるのと同じになり、縦書きではそれぞれ filled sesame, open sesame が指定されるのと同じになります。

文字列が指定された場合、文字列の最初の文字が圏点になります。

ここに丸い圏点を打ちます

ここに三角の圏点を打ちます

ここに米印の圏点を打ちます

]]>

ここに丸い圏点を打ちます

ここに三角の圏点を打ちます

ここに米印の圏点を打ちます

-cssj-text-emphasis-color

値: <color>
初期値: 文字の色と同じ
適用対象: すべて
値の継承: する

圏点の色を指定します。色の指定方法はcolorプロパティなどの場合と同じです。


  
    
  
  
この圏点は赤いです
この圏点も文字も赤です
  
]]>

この圏点は赤いです

この圏点も文字も赤です

-cssj-text-emphasis

-cssj-text-emphasis-style, -cssj-text-emphasis-color をまとめて指定するプロパティです。圏点のスタイル、色の順に指定します。


  
    
  
  
この圏点は赤い三角です
この圏点はピンクの米印です
  
]]>

この圏点は赤い三角です

この圏点はピンクの米印です

文字の影3.0.8

Copper PDFは、一般的なブラウザがサポートしている「文字の影落とし」をサポートしています。ただし、制約として影の「ぼかし」には対応していません。常にぼかしの半径にゼロを設定したのと同じになります。

text-shadow

値: none | [ <length>{2} && <color>? ]#
初期値: none
適用対象: すべて
値の継承: する

text-shadowの値は、影のx方向の位置、y方向の位置、影の色の順に指定します。また、カンマで区切ることにより、複数の影を落とすことができます。１つ目の影は文字の後ろに作られ、順に背面へと作られます。


  
    
  
  
灰色の影のある文字
灰色の影の後ろにさらに薄い灰色の影
  
]]>

灰色の影のある文字

灰色の影の後ろにさらに薄い灰色の影

袋文字3.0.8

レンダリングエンジンとして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 というプロパティ名でも利用することができます。

-cssj-text-fill-color

値: <color> | currentcolor
初期値: currentcolor
適用対象: すべて
値の継承: する

テキストの塗りつぶし色を設定します。なにも指定しない場合は、colorによる指定と同じになります。

-cssj-text-stroke-width

値: <width> | medium | thick | thin
初期値: 0
適用対象: すべて
値の継承: する

テキストの枠の幅をしていします。 0以外の値を設定すると、枠が描画されるようになります。

-cssj-text-stroke-color

値: <color> | currentcolor
初期値: currentcolor
適用対象: すべて
値の継承: する

テキストの枠の色を設定します。なにも指定しない場合は、colorによる指定と同じになります。

-cssj-text-stroke

値: <width> <color>
初期値: none
適用対象: すべて
値の継承: する

テキストの枠の幅と色を一度に設定します。


  
    
  
  
輪郭を太らせた文字
テキストのこの部分が白抜き
  
]]>

輪郭を太らせた文字

文章のこの部分が白抜き

透明化3.0.6

opacity

値: <alphavalue>
初期値: 1
適用対象: すべて
値の継承: しない

要素の不透明度を設定します。値は0(透明)から1(不透明)までの小数値です。例えば0.5に設定すると、その要素は50%の透明度を持つことになります。


  
    
  
  
輪郭を太らせた文字
透明化したボックス
  
]]>

背景にある文字

半透明化したボックス

透明色3.0.8

前記のopacityは要素全体を半透明にするものでしたが、これとは別に、rgba関数により各指定色に透明度を加えることができます。これにより、例えば文字、境界線に別々の透明度を指定することができます。 rgba関数は色指定をするcolor, background-color, border-color 等のプロパティで使用することができます。 rgba関数内の数値は、それぞれ赤、緑、青、不透明度の順です。不透明度は0から1までの小数で指定します。


  
    
  
  
輪郭を太らせた文字
透明化したボックス
  
]]>

背景にある文字

背景だけが半透明

角丸境界3.0.6

ボックスの境界線の四隅を丸くすることができます。

Copper PDF 3.0.8からは、背景の四隅も丸くなります。また、既知の問題として、４つの境界線の色・太さ・スタイル・角の半径が異なる場合、背景が境界をはみ出すことがあります。

角の半径を指定するために、border-*-*-radiusという形式の４つのプロパティを使います。これらのプロパティは１つまたは２つの長さ、％値を指定し、１つの場合は角の半径、２つの場合は角を楕円形の弧としそれぞれ左右方向と上下方向の半径となります。

border-top-left-radius

値: [ <length> | <percentage> ]{1,2}
初期値: 0
適用対象: すべて
値の継承: しない

border-top-right-radius

値: [ <length> | <percentage> ]{1,2}
初期値: 0
適用対象: すべて
値の継承: しない

border-bottom-left-radius

値: [ <length> | <percentage> ]{1,2}
初期値: 0
適用対象: すべて
値の継承: しない

border-bottom-right-radius

値: [ <length> | <percentage> ]{1,2}
初期値: 0
適用対象: すべて
値の継承: しない

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と同じになります。２番めの値が省略された場合、全ての隅が同じ指定になります。

左右方向と上下方向の半径は'/'(スラッシュ)記号で区切り、それぞれをまとめて指定します。

border-radius

値: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
適用対象: すべて
値の継承: しない


  
    
  
  
四隅が丸いボックス
四隅がいびつなボックス
  
]]>

四隅が丸いボックス

四隅がいびつなボックス

回転・拡大・変形3.0.8

ボックスに対して二次元変換により回転、拡大、変形などを行うことができます。なお、三次元変換には対応していません。

-cssj-transfrom, -cssj-transform-origin というプロパティで変換を行います。 WebKit, Firefoxとの互換性のために、 -webkit-transfrom, -webkit-transform-origin, -moz-transfrom, -moz-transform-origin という名前でも使用することができます。

-cssj-transform

値: none | <transform-function> [ <transform-function> ]*
初期値: none
適用対象: ブロックレベル要素
値の継承: しない

ボックスに対する変換行列を指定します。値には、noneまたは複数の変換関数を指定することができます。利用できる変換関数は次のとおりです。

matrix(a,b,c,d,e,f): 変換行列を直接指定します。

変換行列は次のとおりに指定されます。

aは左右方向の拡大率、bは上下方向の傾斜率、cは左右方向の傾斜率、dは上下方向の拡大率、eは左右方向の移動距離、fは上下方向の移動距離に対応します。 e, fにはpt, em等の長さの単位を使用することができます。単位がない場合はpt単位です。なお、％値による指定には対応していません。

translate(x, y): 左右方向と上下方向の移動距離を指定します。 yを省略した場合は、左右方向のみが指定されます。長さの単位を使用することができます。単位がない場合はpt単位です。

translateX(x): 左右方向の移動距離を指定します。長さの単位を使用することができます。単位がない場合はpt単位です。

translateY(y): 上下方向の移動距離を指定します。長さの単位を使用することができます。単位がない場合はpt単位です。

scale(x, y): 左右方向と上下方向の拡大率を指定します。

scaleX(x): 左右方向の拡大率を指定します。

scaleY(y): 上下方向の拡大率を指定します。

rotate(theta): 回転させます。thetaは角度で、degを付けると度単位、単位を省略するとラジアン単位となります。

skew(xtheta, ytheta): 左右方向と上下方向の傾斜角度を指定します。それぞれの値は角度で、degを付けると度単位、単位を省略するとラジアン単位となります。

skewX(xtheta): 左右方向の傾斜角度を指定します。 xthetaは角度で、degを付けると度単位、単位を省略するとラジアン単位となります。

skewY(ytheta): 上下方向の傾斜角度を指定します。 ythetaは角度で、degを付けると度単位、単位を省略するとラジアン単位となります。

-cssj-transform-origin

値: <position> [ , <position> ]*
初期値: 50% 50%
適用対象: ブロックレベル要素
値の継承: しない

変換の中央点を指定します。デフォルトではボックスの中心になっており、例えばrotate関数を使用するとボックスの中心を回転の中心とします。


  
    
  
  
▼
▼
▼
▼
  
]]>

▼