Style attribute test

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>

Writing-mode Example

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.

Source:

<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".

Table Example

Header-A	Header-B	Header-C	Header-D
Cell-A1	Cell-B1	Cell-C1	Cell-D1
Cell-A2	Cell-B2	Cell-C2

Source:

<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.

Absolute Position Example

This div is absolute positioned

<div style="position:absolute; z-index:-5;
            right:0cm; top:1.5cm;
            width:7.5cm; height:5cm;
            border: 2cm outset aqua;
            padding: 1mm;">

This div is absolute positioned

<div style="position:absolute; z-index:5;
            left:0cm; top:9cm;
            width:7.5cm; height:5cm;
            border: 1.5cm outset lime;
            padding 1mm;">

This div is absolute positioned

<div style="position:absolute; z-index:0;
            left:5cm; top:16cm;
            width:7.5cm; height:5cm;
            border:2cm inset fuchsia;
            padding:1mm;">