This is a "style" attribute example:
<h1 style="text-align: center">Style attribute test</h1>
This is a normal paragraph.
This paragraph is red and right-aligned.
<p style="color:red;text-align:right">This paragraph is...</p>
This block has fixed width and height (12cm x 7.5cm).
The following embeded block has tb-rl writing-mode.
ここは縦書きのテキストです。 (Here is vertical writing text.)
次は横書きです。 (next is horizontal writing.)
この横書きブロックは 縦書きブロック内に埋め込まれています。 (This horizontal writing block is embeded in the vertical writing block.
<div style="width:12cm; height:7.5cm; border:outset"> <p>This block has fixed width and height (12cm x 7.5cm).</p> <p>The following embeded block has tb-rl writing-mode.</p> <div style="writing-mode:tb-rl; height:5cm; margin:.5em; border:dotted green"> <p xml:lang="ja">ここは縦書きのテキストです。 (Here is vertical writing text.)</p> <p xml:lang="ja">次は横書きです。 (next is horizontal writing.)</p> <div style="writing-mode:lr-tb; width:6cm; margin:.5em; border:dashed blue"> <p xml:lang="ja">この横書きブロックは 縦書きブロック内に埋め込まれています。 (This horizontal writing block is embeded in the vertical writing block.</p> </div> </div> </div>
メモ: xhtml2fo.xsl は、div 要素の style 属性に writing-mode、width、height、position:absolute、position:fixed のいずれかが含まれる場合に、fo:block-container を生成します。
NOTE: The xhtml2fo.xsl generates fo:block-container when the div element's "style" attribute contains "writing-mode:", "width:, "height:", "position:absolute" or "position:fixed".
Header-A | Header-B | Header-C | Header-D |
---|---|---|---|
Cell-A1 | Cell-B1 | Cell-C1 | Cell-D1 |
Cell-A2 | Cell-B2 | Cell-C2 |
<table style="border:2px solid; border-collapse:collapse;"> <col style="width:3cm;"/> <col style="width:4cm; border:3px dotted green; background:yellow"/> <col style="width:2.5cm"/> <col style="width:2.5cm; border:3px dotted red"/> <thead style="background:silver; border:6px double blue"> <tr> <th>Header-A</th><th>Header-B</th> <th>Header-C</th><th>Header-D</th> </tr> </thead> <tbody> <tr> <td>Cell-A1</td><td style="font-size:200%">Cell-B1</td> <td>Cell-C1</td><td>Cell-D1</td> </tr> <tr style="vertical-align:bottom; border-top:1px solid"> <td>Cell-A2</td><td>Cell-B2</td> <td colspan="2" style="font-size:300%">Cell-C2</td> </tr> </tbody> </table>
メモ: HTMLのtable関連属性 (width, border, frame, rules, cellspacing, cellpadding, align, valign, colspan, rowspan) も使用可能です。
NOTE: HTML's table related attributes (width, border, frame, rules, cellspacing, cellpadding, align, valign, colspan, rowspan) are also available.
メモ: xhtml2fo.xsl は col または colgroup 要素に指定された width(CSSスタイルで指定されたものもHTMLのwidth属性も)を fo:table-column の column-width プロパティに変換します。また、table内の各要素に指定されたvertical-align(HTMLの属性ではvalign)を対応する FO の display-align と relative-align プロパティに変換します。
NOTE: The xhtml2fo.xsl converts the col or colgroup's "width" (in CSS style, or HTML's width attribute) to fo:table-column's "column-width" property, and also converts "vertical-align" ("valign" in HTML) in table elements to "display-align" and "relative-align" on corresponding formatting objects.
<div style="position:absolute; z-index:-5; right:0cm; top:1.5cm; width:7.5cm; height:5cm; border: 2cm outset aqua; padding: 1mm;">
<div style="position:absolute; z-index:5; left:0cm; top:9cm; width:7.5cm; height:5cm; border: 1.5cm outset lime; padding 1mm;">
<div style="position:absolute; z-index:0; left:5cm; top:16cm; width:7.5cm; height:5cm; border:2cm inset fuchsia; padding:1mm;">