xhtmlの表示で、ボタン名の表示がおかしくなりました。プログラムソースを変更していないのに、 JSF2.0コンポーネントであるprimefacesの<p:commandButton>のボタン名が、一部の日本語表示において、1行で表示されていましたが、突然2行で表示されました。原因を調べたら、GoogleChrome最新版(22.0.1229.79)の不具合のように思われます(断定ではありません)。IEとFirefoxでは、ボタン名の表示は正しいです。使用しているOSは、Windows 7 64bitです。
私の環境では、Chromeのバージョンを以前のものに戻したら、改行されずに正しく表示されましたが、GoogleChrome最新版(22.0.1229.79)にもどしたら、複数行に表示されました。複数行に表示されるのは日本語のみで、英語では正しく表示されました。下記サイトに、Chromeのバージョンを元に戻す方法が掲載されています。今の時点で、そのような不具合は報告されていませんが、私と同じような不具合が発生した人は要注意です。
Chromeのバージョンを元に戻す方法を掲載したサイト
GoogleChrome最新版(22.0.1229.79)でGmail印刷不具合とChromeのバージョンを元に戻す方法
©中條勝徳 and okulejp.com, 2012.
1.はじめに
このブログにたどりついた、検索エンジンのキーワードを調べると、SVGを利用したApache FOPの使用方法について、知りたいと思われる読者がいると思われます。そのような理由で、今日は、簡単にSVGを利用したApache FOPの使用方法について、とても簡単に説明したいと思います。連携の仕方は、すごく簡単です。図 1は、SVGをXSL-FO文書に埋め込み場合です。15行目にある、<fo:instream-foreign-object>要素を使用します。子要素は、SVG形式そのものです。図 2は、XSL-FO文書の外部にあるSVGを利用する場合です。15行目にある、<fo:external-graphic>要素を使用します。また注意点としては、src属性で指定するURIは、XSL-FO文書からの相対パスではなく、プログラムから見た相対パスです。図 3のhellow_svg.svgは、XSL-FO文書で参照されるSVGです。図 4のhellow_svg.pdfは、出力結果です。
Apache FOPのバイナリ配布に含まれるサンプルプログラムに、SVGを利用したサンプルがあります。パスは、「fop-1.0-bin/fop-1.0/examples/fo/svg」です。
(SyntaxHighlighterを使用して、XSL-FO、XMLを掲載しています。ブラウザー上で、各々の図の右上のアイコンをマウスでクリックすることで、ソースを表示したり、クリップボードにコピーしたり、印刷したりできます。注意点として、「さらに記事を読み込む」のリンクで、この記事を読み込んだ場合に、SyntaxHighlighterによる表示が不正になる場合がありますので、恐れ入りますが、タイトルをクリックして再表示して下さい。)
図 1. hellow_svg_embedding.fo
<?xml version="1.0" encoding="UTF-8" ?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format" xml:lang="ja">
<fo:layout-master-set>
<fo:simple-page-master page-width="210mm" page-height="297mm" margin-top="0mm" margin-left="0mm" margin-right="0mm" margin-bottom="0mm" master-name="PageMaster">
<fo:region-body margin-top="0mm" margin-left="0mm" margin-right="0mm" margin-bottom="0mm"/>
<fo:region-before extent="0mm" />
<fo:region-after extent="0mm" />
<fo:region-start extent="0mm" />
<fo:region-end extent="0mm" />
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="PageMaster">
<fo:flow flow-name="xsl-region-body">
<fo:block>
<fo:instream-foreign-object content-width="210mm" content-height="297mm">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
width="210mm" height="297mm" font-size="20"
stroke-width="0.1mm" font-family="MS 明朝">
<text x="4.9mm" y="10.5mm" fill="black">Hellow SVG with FOP</text>
</svg>
</fo:instream-foreign-object>
</fo:block>
</fo:flow>
</fo:page-sequence>
</fo:root>
図 2. hellow_svg_external.fo
<?xml version="1.0" encoding="UTF-8" ?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format" xml:lang="ja">
<fo:layout-master-set>
<fo:simple-page-master page-width="210mm" page-height="297mm" margin-top="0mm" margin-left="0mm" margin-right="0mm" margin-bottom="0mm" master-name="PageMaster">
<fo:region-body margin-top="0mm" margin-left="0mm" margin-right="0mm" margin-bottom="0mm"/>
<fo:region-before extent="0mm" />
<fo:region-after extent="0mm" />
<fo:region-start extent="0mm" />
<fo:region-end extent="0mm" />
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="PageMaster">
<fo:flow flow-name="xsl-region-body">
<fo:block>
<fo:external-graphic src="hellow_svg.svg"/>
</fo:block>
</fo:flow>
</fo:page-sequence>
</fo:root>
図 3. hellow_svg.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
width="210mm" height="297mm" font-size="20"
stroke-width="0.1mm" font-family="MS 明朝">
<text x="4.9mm" y="10.5mm" fill="black">Hellow SVG with FOP</text>
</svg>
図 4. hellow_svg.pdf

2.注意事項
SVGを利用したデータ可視化のためのグラフ作成の記事で説明しましたが、XSL-FO文書を介して、SVGをPDFで出力する際、Apache FOPの制限で、フィルター処理を使用したSVGをPDFにすると正しく表示されませんので注意が必要です。FOPのバイナリ配布に含まれるサンプルプログラムの「ExampleSVG2PDF.java」を利用すれば、SVGを直接PDF化するので、フィルター処理のものもうまく処理されます。
3.総評
SVGには、ご存知のとおりいろいろな機能があります。SVGの機能を利用することで、既存の商用の帳票作成ツールでは、できないようなデザインを、自由自在にできます。Apache FOPの可能性と日本語設定の記事で紹介したとおり、コンビ請求書のようなデザインも可能です。
©中條勝徳 and okulejp.com, 2012.