カテゴリー別アーカイブ: AH Formatter

【動画公開しました】1月26日火曜日のちょっと一息・アンテナハウスウェビナーは「PDF自動生成超入門 PDF自動生成へ挑戦する人のための始めの一歩」

アンテナハウスでは、昨年8月から第2、第4火曜日の16時から「ちょっと一息・アンテナハウスウェビナー」*と題する無償のZoomウェビナーを開催しています。

ちょっと時間の余裕があれば、お気軽にご参加いただけて有用な知識を持ち帰っていただける、肩が凝らないウェビナーを目指しています。

来週は、「PDF自動生成超入門 PDF自動生成へ挑戦する人のための始めの一歩」と題して、自動組版は初めてという人向けに、弊社が目指す自動組版のお話をさせていただきます。

自動組版にはDTPソフトを組版エンジンとして使う方式から、自動組版専用エンジンを使う方式までいろいろな方法がありますが、26日のウェビナーでは、自動組版専用エンジンであるAH Formatter**を使う方法についての簡単な説明を致します。


※画像をクリックすると「こくちーず」の本ウェビナーご案内ページに移動します。
終了しました。

本ウェビナーご視聴いただければ、今すぐでなくてもいずれは必ずお役に立つ情報を得られるでしょう。自動組版に少しでも関心をお持ちの方はぜひご参加ください。


2021年2月:追記ウェビナーの録画を編集した動画を公開しました。

なお、「ちょっと一息・アンテナハウスウェビナー」の過去開催分は録画を、YouTubeのアンテナハウスPDFチャンネルにて公開しています。
チャンネル登録をお願い致します。

Antenna House YouTube Channel

アンテナハウスPDFチャンネル


Antenna House XML Services
AH Formatter

MathMLで空欄付きの数式を表現する

センター、もとい、大学入学共通テストがおこなわれましたね。

数学や物理では数式に空欄が入った問題がおなじみです。「空欄アに入る数を答えよ」といったものですね。

ふと、「これをMathMLだけで組めるのだろうか」と思い、軽く調べてみました。
文字自体は<mtext>で良いとして、空欄であることを示すための枠線が必要です。

borderのようなattributeを持つ要素を探してみると、<mtable>が該当しました。
frame="solid"のようにして枠線が付けられます。枠で囲った「ア」を描画してみました。
セルや行、列単位で枠線を引くのであればcolumnlinesなど細かいattributeを指定しますが、今はもっとも外側の枠線だけて十分ですね。

<mtable frame="solid"><mtr><mtd><mtext>ア</mtext></mtd></mtr></mtable>

数式中に記述し、AH Formatterで出力してみます。

<mtable>による空欄付きの数式

 

根号の中に空欄が表示されています。<mtable>widthを指定できるので、幅を明示的に指定しました。

<mtable>は数ベクトルや行列を表現するために用いるのが主用途であることを考えると、電子的に配布を考える場合は別途注釈や内容のMathMLを記述した方が良いかもしれません。ともあれ、空欄付きの数式を表示してみました。

より簡潔な方法もありました。<menclose>です。

<menclose>による空欄付きの数式

こちらは「ア」の前後のパディングに、とりあえず<mspace>を使用しています。

ふと思いたち書いてみた方法なので、あるいはもっと適した方法があるのかもしれません。

なお、本記事で記述した方法を推奨したり保証するものではありません。


参考文献

Mathematical Markup Language (MathML) Version 3.0 2nd Edition

MathML 数式組版入門



XSL-FOでスライドを作成してみる

先日社内でプレゼンの機会がありました。プレゼンといえばスライドですね。プレゼンには身振り手振りやデモなどもありますが、制作期間や発表時間といった制限時間、不測の事態や資料の提出などを考えるとスライドは安定性が違います。欲をいえばプレゼン時にスクリーンに出す資料と頒布する資料は対応を取りつつ情報量を変えたいなどもありますが、こういったものはリソースとの戦いですね。

スライドといえばMicrosoft PowerPoint、macOSであればKeynoteもあります。
これらのソフトを立ち上げスライドのファイルを読み込みいざオンラインプレゼン、オンライン会議ツールを立ち上げ……あ、画面が固まった。なんてことも。GUIによるプレゼンテーション作成ソフトと、オンライン会議ツールを同時起動しているゆえに負荷がそこそこ高いからでしょうか。
他の手段として、HTML+CSS+JavaScriptスライドというのもあります。Webブラウザがあれば動くということで、まあ悪くありません。クラウドのオフィスツールではGUIでこれらを作ることもできます。外部サービスでは会社で採用していないと使える機会が限られるのが難点でしょうか。

これらのスライドを、PDFに別で保存することがあります。PDFであれば、会議の進行役に念のため予備を渡しておいて「表示環境がない」ということもそうありません。先に挙げたようなオフィスツールでPDF出力をしてもよいし、作り方にもよりますがHTMLスライドもWebブラウザなどからPDFとして出力できます。

今回なぜか発表本番2、3日前にXSL-FOを直接書いてスライドをPDF出力していました。せっかくなのでそのときのFOを一部ご紹介します。

スライドを作成するとき、コンテンツはスライドのコンテンツとして都度作成しなければなりません。構成や情報量は、発表時間やオーディエンス、発表環境などによって、練り直さなければならないためです。「スライドの一部を書き換えて何度も利用する」というのはよくあるかもしれませんが、媒体の方向性としては一品ものと捉えてもよいでしょう。1からスライドを作るのにXSL-FOを直接書くというのは個人的におススメできないことはあらかじめお伝えしておきます。

テキスト内容などは変更しています。また動作などについて保証するものではありません。使用したのはAntenna House XSL Formatter V7.0 MR5となります。

ページレイアウトと背景


<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"
xmlns:axf="http://www.antennahouse.com/names/XSL/Extensions"
font-size="28pt"
line-height="1.8"
font-family="sans-serif"
color="white">
<fo:layout-master-set>
   <fo:simple-page-master master-name="slide"
    background-image="linear-gradient(to left, rgba(0,0,0, .7) 0%,rgba(0,0,0, .9) 100%) )"
    page-width="1920px" page-height="1080px"
    margin="0"
>
    <fo:region-before extent="2cm" />
    <fo:region-after region-name="footer" extent="2cm"/>
    <fo:region-body region-name="body" margin="2cm 3cm" />
  </fo:simple-page-master>
</fo:layout-master-set>

ページサイズは幅1920px、高さ1080pxのFHDサイズにしました。これはPDF出力時に物理的なサイズに変換されます。
ルートでフォントサイズ、行の高さ、フォントファミリ―を指定しています。文字色も指定していますが、背景の色と関連するのでルートよりも後で指定する方が望ましいかもしれません。その背景は単純ページマスターで指定しています。線形グラデーションで灰色の度合いを変化させています。rgbaで透過色を指定をしているのは当初この下に背景画像を置こうとしていたからです。実際に追加するのであれば、linear-gradientの後に指定します。

ヘッダーとフッターの領域を2cmずつ用意し、本文区画は上下2cm、左右3㎝のマージンをとっています。

タイトルページ

タイトルページ
 <fo:page-sequence master-reference="slide">
  <fo:flow flow-name="body">
   <fo:block-container id="title" 
    <fo:wrapper font-size="92pt" line-height="2"  text-align="center">    
     <fo:block margin-top="2cm" >
       なんかものすごい<fo:block />プレゼン</fo:block>
    </fo:wrapper>
      <fo:block-container space-before="3cm" 
            text-align="end">
        <fo:block>2020-11-30</fo:block>
        <fo:block>アンテナ太郎</fo:block>     
        </fo:block-container>
    </fo:block-container>
  </fo:flow>
</fo:page-sequence>

タイトルページではヘッダーとフッターを表示しないよう、その後のページとページシーケンスを分けていますが、参照しているページマスターは同じです。ページマスターを分けるほど複雑な構成は必要なかったためこのようにしています。
タイトルは中央揃え、名前や日時はendに揃えています。よりこだわるなら名前や日時のブロック自体は右側に置いた上で、ブロックの内側では左揃えといった置き方もできます。

ヘッダーとフッター

ヘッダーに社のロゴ、フッターにスライドのページ番号を表示することにします。

ヘッダーとフッター、箇条書き

<fo:page-sequence master-reference="slide" initial-page-number="2">
<fo:static-content flow-name="header" >
    <fo:block-container><fo:block text-align="end">
      <fo:external-graphic src="url(https://www.antenna.co.jp/img/ah_headerlogo.svg)" width="8cm" height="1lh"/>
  </fo:block>  
  </fo:block-container>
</fo:static-content>
  <fo:static-content flow-name="footer">
      <fo:block-container>
          <fo:block 
           text-align="end" space-before="1cm" end-indent="2cm">
           <fo:inline font-family="serif"> p-<fo:page-number font-variant="oldstyle-nums"/> </fo:inline>
          </fo:block>
      </fo:block-container>
  </fo:static-content>
...
<fo:page-sequence>

ヘッダーのロゴの高さを行の高さにしました。このスライドでは使用していませんが、スライドの見出しをマーカーで参照し、ヘッダーで表示することを想定したサイズ指定です。SVGのロゴ画像なのでサイズ変更が容易で助かりました。

本文がサンセリフなのに対し、フッターのページ番号はセリフにすることで本文と区別できるようにしています。ついでにページ番号の数字はオールドスタイルにしてみました。ページ番号の前に接頭辞をつけるにはページシーケンスでfo:folio-prefixをつける方法がありますが、
ページ番号参照のときに「p-4」のように表示させたいわけではないので、通常のテキストとして配置しています。

initial-page-number=”auto”では前のページ番号を引き継ぐので、上で記述されているページの開始番号のように指定しなくとも問題ありません。

箇条書き

スライドでは定番の箇条書き表現。GUIのプレゼンテーションツールやHTMLとXSL-FOでかなり書き心地が異なります。

<fo:block-container break-before="page">
    <fo:wrapper font-size="62pt" font-weight="bold">
        <fo:block>
       XSL-FOの関連仕様
        </fo:block>
    </fo:wrapper>
    <fo:list-block provisional-distance-between-starts="0.5em"
    provisional-label-separation="0em"
    >
        <fo:list-item>
            <fo:list-item-label end-indent="label-end()">
          <fo:block xml:lang="en">•</fo:block>
            </fo:list-item-label>
            <fo:list-item-body start-indent="body-start()">
                <fo:block>Extensible Markup Language
          </fo:block>  
          </fo:list-item-body>
        </fo:list-item>
        <fo:list-item>
            <fo:list-item-label end-indent="label-end()">
          <fo:block>•</fo:block>
            </fo:list-item-label>
            <fo:list-item-body start-indent="body-start()">
               <fo:block>XMLNamespace</fo:block>
          </fo:list-item-body>
        </fo:list-item>
        <fo:list-item>
            <fo:list-item-label end-indent="label-end()">
          <fo:block>•</fo:block>
            </fo:list-item-label>
            <fo:list-item-body start-indent="body-start()">
           <fo:block>XML Transformations</fo:block>
          </fo:list-item-body>
        </fo:list-item>
        </fo:list-block>
    <fo:block>
    </fo:block>
</fo:block-container>

1つの箇条書き項目を表すために記述がリストブロック、リストアイテム、リストアイテムラベル、リストアイテムボディの要素と、ラベルとボディ間の間隔を指定する必要があります。入れ子のリストブロックや長さがバラバラのリストアイテムなどがあるとき真価を発揮する箇条書き用の構造ですが、これくらいの内容であれば項目ごとにブロックで記述した方が簡単です。

ソースコードを複数段表示する

ソースコード

スライドはスクリーンなどの都合もあり幅の方を長くとることが大半であると思います。これは改行で整えられた行数の多いコードを表示するのにあまり向きません。ブロックコンテナ―に段組を指定し、スライド1枚に詰め込めるソースコードを増やしてみました。

<fo:block-container break-before="page" column-count="2"
border="0.3pt solid white" 
axf:column-gap="2em" axf:column-fill="auto"
>
  <fo:block  border-bottom="0.3pt dashed white">XSL</fo:block>
  <fo:block
font-size="24pt"
line-height="1.2"
axf:line-number="show"
axf:line-number-color="white"
axf:line-number-font-size="20pt"
axf:line-number-offset="10pt"
axf:line-number-font-style="italic"
margin="2pt"
white-space-collapse="false" white-space-treatment="preserve"
linefeed-treatment="preserve"
xml:space="preserve" font-family="monospace">
..</fo:block>
</fo:block-container>

ということでXSL-FOで直接作成したスライドとその記述の一部を紹介しました。今回のように直接書くのはやはりおススメできませんが、他のXML文書などからスライドを用意するのであればなかなか悪くないのでは、と感じました。

xsl-foの基礎第2版


fo:bookmarkというマークアップから考えるしおり

『岩波国語辞典第八版』*1によれば、「しおり(しをり)」には2つの意味があります。

1. 本の読みかけのところに挟んで目印とするもの 2. 初めての人などにわかりよく説明した本。手引き

岩波国語辞典第八版

「目次」は次のように記されています。

(書物の)内容の題目を、書かれている順に並べて記したもの

岩波国語辞典第八版

しおりについて、1の意味では、読み手側が設定するものという印象が強いですね。ちなみに岩波国語辞典だとブックマークはWebブラウザのブックマーク(お気に入り)機能についての言及となっています。

さて、XML組版の仕様であるXSL1.1仕様にはしおりを作成するための機能fo:bookmarkfo:bookmark-titlefo:bookmark-treeが存在します。1.1の仕様に1.0との差異が記載されているのですぐにわかりますが、実は1.0のときには存在しなかった機能です*2

『XSL-FOの基礎 第2版』*3にしおりのFOについての解説があります。また、Antenna House XSL Formatterの*4サンプルFOのページ*5からしおりの設定されたPDFを確認できます。

<fo:layout-master-set>
    …略…
  </fo:layout-master-set>
  <fo:bookmark-tree>
    <fo:bookmark internal-destination="MARK001">
      <fo:bookmark-title font-weight="bold">
    目次</fo:bookmark-title>
    </fo:bookmark>
    <fo:bookmark internal-destination="MARK002"
                 starting-state="hide">
      <fo:bookmark-title>第1章</fo:bookmark-title>
      <fo:bookmark internal-destination="MARK003">
        <fo:bookmark-title>1.1</fo:bookmark-title>
      </fo:bookmark>
     ...
     </fo:bookmark-tree>
     ...
    <fo:page-sequence ...>
      <fo:block font-size="2em" font-weight="bold" space-after="5mm" id="MARK001">Bookmark sample-1</fo:block>
        <fo:block font-size="1.5em" font-weight="bold" id="MARK002">Lorem Ipsum</fo:block>
          <fo:block space-before="4mm" margin-left="2em" line-height="1.4">
         <fo:block keep-with-next="always" font-weight="bold" id="MARK003">Lorem ipsum dolor sit amet</fo:block>
            <fo:block>...</fo:block>
        </fo:block>
...
</fo:page-sequence>

ごく簡単に説明すると、fo:rootの子としてしおりのツリーを用意し、その子として、目的のIDやURLなどをプロパティの値に持つしおりfo:bookmarkとしおりの項目名fo:bookmark-titleを記述します。上の例ではfo:blockにそのIDが記述されていますね。ツリー構造ですので、階層も表現できます。

PDFなど、ページドメディアへの出力を意識したマークアップであるXSL-FOの機能として用意されていることから分かる通り、これは文書コンテンツ提供側が用意するしおりです。
XSL-FOは(中間形式にせよ)ページドメディアとしてかなり明示的なマークアップを求めますから「fo:bookmark*」は「この箇所をしおりとする」というはっきりとした意思表示となります。
文書コンテンツ作成者がコンテンツ頒布時に「この部分は読みかけ」というしおりを作ることは稀なことと捉えて良いでしょう。そして、fo:bookmark-titleというマークアップ名から分かる通り、しおりの項目名は長い段落などを記述する箇所でもありません。

目次項目は当然その項の内容を反映しまとめたものになりますから、しおりは多くの場合目次項目と同じ箇所でマークアップされ、対応したPDFビューアーでは「しおりを表示」といった機能でページ表示とは独立して表示できます。
特に数百、数千ページのPDF文書を頻繁に読む機会のある方は頷かれるのではないかと思いますが、紙の文書ではそれこそ「しおり」を挟んで分厚いページの束をまとめてむんずと掴んで目次に戻ったりできますが、PDFビューアー上で毎回目次ページへ戻って目次項目を確認するというのはそこそこ時間がかかります。

個人的には、しおりの重要な点として「ページ外の要素」であることが大きいのではないか、と考えています。目次で「2.3 詳細 200ページ」、文章中に「299ページに詳細」、索引ページに「fo:bookmark…300p」といったページ参照があるのはそれはそれで重要ですが、「本文を読みながら文書(あるいは文書外)の他の箇所への目印へすぐにアクセスできる」機能がしおりといえるのではないでしょうか。そして、XSLでは文書コンテンツ提供側がそれを提供することになります。

ところで、XSL-FOとXSL-FOプロセッサーによる処理ではPDFの作成時にしおりをマークアップすることになるので、すでにPDFとなっているものにしおりを付与することは範囲外です。Antenna House Formatterでは「PDFを画像のように埋め込む」といったことができるので、多少トリッキーな方法で後からしおりを付与することもできなくはありません。しかし専用のソフトウェアがあればもっと分かりやすく、そして効率的にしおりを付与できます。

antenna house webinar pdf bookmark

隔週で火曜に開催している「ちょっと一息 アンテナハウスウェビナー」、11月10日(火)16時からは「そもそも、PDFのしおりとはなにか ~目次と何が違うのか。どう作って活用するか~ 」というテーマでお送りします。この記事を書いているのが担当者でないため、発表内容の詳細はわかりません。しおりってなんなんでしょうね……。この謎を明かすためにも明日のウェビナーは必見です。

参考文献・資料

  1. *1 『岩波国語辞典第八版』(岩波書店, 2019年11月22日第1刷発行, ISBN 978-4-00-080048-8)
  2. *2 https://www.w3.org/TR/xsl11/#change10
  3. *3 https://www.antenna.co.jp/AHF/ahf_publication/data/xsl-fo-v2/201603282131.html『XSL-FO の基礎 第2版 – XML を組版するためのレイアウト仕様』(アンテナハウス株式会社, 2017年3月, ISBN 978-4-900552-48-7)
  4. *4 Antenna House Formatter
  5. *5 https://www.antenna.co.jp/AHF/ahf_samples/sample-fo.html#pdf


海外ウェビナー動画「CSSとXSL-FO:印刷出版に私はどちらを使うべきでしょうか?」(日本語字幕付き)

Xplor International(https://xplor.org/)主催のウェビナーにて、弊社副代表のMichael Millerが発表を行いました。

タイトルは「CSSとXSL-FO:印刷出版に私はどちらを使うべきでしょうか?」(原題:CSS or XSL-FO: Which should I use for producing print publications)です。
「CSSとXSL-FO、どちらを使うべきでしょうか?」という質問をよくいただきます。こののウェビナーではCSSとXSL-FO、それぞれの特徴や歴史的な背景を昨今の出版を取り巻く環境も含めてご紹介しています。技術的な内容は少なめで、どなたでも理解しやすい内容となっています。

ウェビナーの様子はYouTubeでご覧いただくことができますので、ぜひご視聴ください。

なおYouTubeの字幕機能を使えば、日本語字幕付きでご視聴いただくこともできます。
字幕の設定方法は、

  1.  動画右下の設定アイコン(歯車マーク)をクリック
  2. 「字幕」をクリック
  3. 「日本語」にチェックを入れる

以上の設定で日本語字幕付きでご視聴いただけます。



XSL-FO/CSSスタイルシートにより、XMLとHTMLをサーバー上で高速にPDFに変換!



アンテナハウス ウェビナー スケジュール一覧 2020


Google Chrome開発者版(86)でタグ付きPDFを出力[8/4修正]

[8/4追記]社内で「Chrome出力ではなくAcrobat Readerの対応外のタグ使用によって表示が壊れている可能性がある」と指摘を受けました。記事内での表現を修正します。

当初の記事タイトルは「タグ付きPDFがGoogle Chromeのデフォルトに?」だったのですが、現状としては「今後Google Chromeでタグ付きPDF出力が可能になるかもしれない」あたりのようです。

今回使用した環境は次になります。

  • Windows 10 Home 1909
  • Google Chrome バージョン: 86.0.4221.0(Official Build)canary (64 ビット)
  • Acrobat Reader DC – Japansese (20.009.20074)
  • 検証に使用したページ*https://www.w3.org/TR/xsl11/

2020年8月リリースのGoogle Chrome 85から、タグ付きPDFの出力がサポートされます[1]。関連する情報発信自体は以前からあったようですが、実際にリリースされるこのタイミングで俄かに活気づいているようです。活気づいてますよね?

早速Google Chromeをサイトからダウンロードしてみましたが、バージョンを確認すると2020年8月3日時点では84のようです。Google ChromeにはCanaryバージョンがあるのでこちらをダウンロード。試験運用版ですので、同様に検証される方はくれぐれも自己責任でお願いします。(84でもExperimentalの設定として「Export Tagged PDF」を有効化できます。)

バージョンを確認。86……86ですね。85ではありませんが、検証には問題ないでしょう

この後Chrome 84でのtagged PDF出力も確認しましたが、同様の結果になりました。

タグ付きPDFとは

ざっくりとまとめると「タグ付きPDFは、内部に文書構造を指定するタグを付与したPDFのこと」になります。
通常PDFは印刷物のデジタル表現、つまり視覚的な表現として文書構造が見られればよいわけですが、
PDF内部のデータを別の目的で使うときにこの情報だけでは不足することがあります。
別の目的としては、データの読み上げ、PDFから他形式への再変換などがあります。

また、PDFをHTMLのようにリフローで表示したいときにも、タグを用いることで文書の表示順序などを壊さないようにできます。
「HTMLのように」と書きましたが、このタグ付きPDFで設定できるタグの多くはHTMLでのタグと類似したものになります。

概要は[2][3]、詳細は[4][5]をご覧ください。

新ビューアは今のところリフロー表示に対応していないらしい

Canaryだと、PDF出力オプションの他に「PDF Viewer Update」オプションがあるんですね。

chrome://flags/#pdf-viewer-update

これを有効化すると、84ではExperimentalのオプションである「PDF Two-up View」もついでに使えるようになります。

ウインドウ画面と表示をフィットさせる場合に上下と左右どちらを優先するか、回転表示、PDF注釈の表示のオンオフ、アウトライン表示など、色々改善がされていることがわかります。とはいえ、全体的なPDFの表示機能についてはまだまだ頑張ってほしいところです。

さて、タグ付きPDF対応と聞いて真っ先に期待してしまうであろうリフロー表示ですが、とりあえず86の新ビューアではできないようです。
「タグ付きPDFの出力」と「PDFのリフロー表示」は重なる部分もあるものの別の話なので、そういうこともありますね。
今回の新バージョンについて、ChromiumのブログにChrome Accessibilityのリーダーからコメントがあります。improving Chrome’s built-in PDF reader to better consume tagged PDFsとあるので、それなりに可能性はあるのではないでしょうか。
> While this is an important milestone, we’re not done. Future work includes both improving the quality of generated tagged PDFs, and also improving Chrome’s built-in PDF reader to better consume tagged PDFs.

タグ付きPDFをChromeで出力する

本題のタグ付きPDF出力です。Experimentalな設定で次を指定するとタグ付きPDFが出力できるようになるとあります。

chrome://flags/#export-tagged-pdf

では、PDFを出力してみます。*のページを「PDFで保存」します。さて、本来はこれをAcrobat Readerで開いてみて「おおー」となる予定だったのですが、「表示」「折り返し」を有効にしたAcrobat Readerでのリフロー表示がうまくいってないようです。

W3Cのページはあまり変なマークアップのHTMLはないはずです。タグ付きPDFは検証した日時でのGoogle ChromeとしてはExperimentalな機能なので、こちらが原因でしょうか。タグ付きPDFとリフロー表示についてはAcrobat Readerの対応状況も関連するので、Chromeの出力が原因ではないかもしれないとの指摘をいただきました。Google Chromeには自分の出力の正しさを証明するためにもPDFリフロー表示に対応してほしいですね。
PDFの内部を確認したい方は、アンテナハウスのデスクトップ製品『
瞬簡PDF 編集 9
』[6]付属の『タグ編集ツール PDFタグエディターVer.2』を使うとよいかもしれません。

他に数件確認してみましたが、ページが上のように壊れることはないものの、「いきなり何もかも上手く出力できる」とはいかないようです。Experimentalな機能なので詳細な検証をすることを避けました。

ちなみに、Chromeでのタグ付きでないPDF出力をAcrobat Readerの折り返し表示したときは、とりあえずは表示されています。

ちなみに、同じWebサイトをAntenna House Formatter V7.0 MR3でタグ付きPDFを出力した場合、折り返し表示でも問題はないようです(フォントサイズや余白、分割アルゴリズムの違いなどがあるので同じ条件にはなっていません。)。

ChromeでのHTMLとタグ付きPDFの補足資料

Chromiumのタグ付きPDF機能開発におけるデザイン資料[7]によればこれはマークアップを元にタグを付与するものなので(AIが何もかもやってくれるような話ではない)、求められるタグを出力できるかはページ製作者次第です。Chromeの開発過程で実際にはどうなったかは確認していませんが(資料中のメーリスやバグトラッカーを確認していけばよさそうです)、DOMツリーと描画用ツリー、そしてARIA属性などを基にした「Accessibility tree」を利用するデザインのようです。


The accessibility tree computed in Blink is another good possibility. The accessibility tree is derived from the DOM and the Layout Tree and also takes accessibility attributes such as ARIA attributes into account.
Chromium Tagged PDF Export Design Doc

We think the accessibility tree is the best fit and that’s the design proposed here.
Chromium Tagged PDF Export Design Doc

つまり出力が完璧だったとして、現在のところ多くのWebページについて実用的かと言われれば疑問の残るところ。残念ながら、ページによってはむしろ不要なノイズだらけになってしまうでしょう。[7]に次のようにありますが、こういった機能を機にアクセシブルなWebページを作ろうという気運が再燃したりすれば幸いです。

正常に出力されるページもあるかもしれませんが、現在Experimentalとある機能ですので、今回はここまでとします。

タグ付きPDFにご興味を持たれた方は、アンテナハウスのPDF製品を是非チェックしてみてください。


if you visit a web page that’s compliant with WCAG accessibility guidelines, then export it as PDF, then open that PDF in Chrome, the PDF in Chrome should have the same level of accessibility, modulo the limitations of a PDF file.Chromium Tagged PDF Export Design Doc

  1. [1] Using Chrome to generate more accessible PDFs – Chromium Blog
  2. [2] タグ付きPDFとはどんなもの
  3. [3] PDFのリフロー表示。タグ付きPDFとタグの付いていないPDFの比較。
  4. [4] 『タグ付きPDF 仕組と制作方法解説』
  5. [5] 『PDFインフラストラクチャ解説』
  6. [6] かんたん操作でPDFを自由自在に編集 瞬簡PDF 編集 9
  7. [7] Chrome Tagged PDF Export – Authors: dmazzoni[at]chromium.org
    November 2019



AH FormatterでXSL-FO 2.0 仕様DraftのWebページをPDF化してみる

業務を行っていると、W3Cで公開されている仕様を確認しにいくこと、例えばXSL-FO 2.0のDraft[1]を確認しにいくことがあったりなかったりします。
Webページの利点の1つはスクロール操作によって文書の目的の位置へいけることですが(もちろんそうでない作りのWebページもあります)、手元の電子ペーパー端末でページをめくるように読みたい場合もあります。
「WebページのURLを打ち込むだけでそこそこ読めるPDFを出力してほしい」、そんなときにもCSS組版が可能なお手持ちのAntenna House (CSS) Formatterが利用できます。

AH Formatterでファイルを読み込む際、通常はファイルパスを指定するかと思います(GUIではドラッグ&ドロップも可能です)。しかし、ここにWebページのURLを指定することもできます。マニュアルにも記載してありますね。「組版種別」によって、AH FormatterのデフォルトCSSを使用する設定、元のHTMLのCSSを利用するなど違いがあるので、マニュアルを確認してください[2]。

Windowsの場合、AH Formatterをインストールしたフォルダにhtml.cssがあります。これがHTMLファイルを読み込んだときにAH Formatterのデフォルトとして適用されるCSSです。
今回は「HTML」を指定しました。

全体的な文字サイズやページサイズなどを「組版オプション」で設定してみます。


XSLT2.0の仕様[3]を、ページサイズをJISB5、本文14ptとしてみたところ、673ページ程度になりました。

JIS B5サイズのPDFでXSLT2.0 仕様出力

記事冒頭で「例えば~」とXSL-FO2.0の話題を振っておきながらFOではなくXSLT2.0で例を出しているのは、XSL-FO2.0のドラフトだと1200ページ超え(JISB5、本文14pt程度)となり、GUIでプレビューを表示しながら操作をするには手元のマシンだと厳しいためです[4]。CUIで組版する分には問題ありません。

JIS B5サイズのPDFでXSL 2.0 Draftを出力

今回PDF出力してみたWebページの場合ですと、ソースコードや巨大な画像ではページサイズに収まるように表示できていません。元がリフロー型のWebページなので、デフォルトのCSSでは少し無理があったようです。とはいえ、手軽にそこそこ見やすいPDFを得ることができました。

Antenna House Formatterの評価版は、こちらのページからお申込みいただけます。
AH Formatter 評価版のお申し込み

CSSでのページメディアの印刷に興味がある方へ、アンテナハウスでは『CSSページ組版入門』という書籍を発行しています。

  1. [1] Extensible Stylesheet Language (XSL) Version 2.0
    W3C Working Draft 17 January 2012
  2. [2] ドラッグ&ドロップ組版 – Antenna House Formatter V7 マニュアル グラフィカルユーザインターフェイス
  3. [3] XSL Transformations (XSLT) Version 2.0
  4. [4] ページ数上限自体は変更可能です。 制限事項 – Antenna House Formatter V7 マニュアル グラフィカルユーザインターフェイス

関連記事

  1. AH Formatter の CSS組版例「MathML 3.0 2nd Edition」

Antenna House Formatter V7XSL-FO/CSSスタイルシートにより、XMLとHTMLをサーバー上で高速にPDFに変換!


[AH Formatter V7.0 の新機能] BPIL による行分割

2020年2月20日にリリースされた『AH Formatter V7.0』の新機能、今回は行分割についてご紹介します。

『AH Formatter V7.0』では行分割を Knuth-Plass の Breaking Paragraphs into Lines(以降、BPIL)のアルゴリズムに従って行う方法を導入しました。BPIL は、主に欧文組版のためのアルゴリズムで、ブロック全体のバランスを考慮して分割位置を決定します。

BPIL については過去のブログで詳しく触れていますので、こちらもご覧ください。
Breaking Paragraphs into Lines

例えば、『AH Formatter』の従来の行分割では次のように組版されます。
従来の行分割の例

BPIL で組版すると以下のような結果になります。
BPILの行分割の例

全体のバランスが考慮され行末のアキの幅がより均等になります。
※ 行末のアキの幅を分かりやすくするため、あえて justify していません。

BPIL が機能するのは既定値でオプション設定ファイルの bpil で指定されている言語 “Latn Grek Cyrl” または axf:line-break=”bpil” が設定されているブロックです。制御はオプション設定ファイルなどで行え、もちろん従来の行分割になるよう機能を無効にすることも可能です。詳しくは行分割をご覧ください。

新しい行分割アルゴリズムが導入された『AH Formatter V7.0』を非是お試しください。

この記事の画像は公開サンプルを用いたものとなります。実際のデータは公開サンプルのページよりダウンロードいただけます。

評価版は以下よりお申し込みいただけます。
AH Formatter 評価版のお申し込み


[AH Formatter V7.0 の新機能] エラー行指定ジャンプ機能のご紹介

AH Formatter V7.0 で追加された機能のひとつに、組版時エラーが出た際、ワンクリックで簡単にエディタを起動し、エラーが出た箇所を容易に修正するための機能があります。AH Formatter V7.0 で、エラーログにファイルパスへのリンクが追加されました。
エラーログの例

この機能の使用前には少し準備が必要です。
GUI の [組版メニュー]-[その他設定]-外部エディタのタブの、行指定時コマンドライン引数という項目を調整します。
その他設定ダイアログ

この項目で外部エディタに指定されたエディタで行指定して起動するオプションを指定します。%1 がオープンするファイル名、%line が行番号となります。

上記で行指定パラメータを指定した状態で、エラーログの青色のファイルパスのリンクをクリックすると、指定したエディタを起動し、エラーのある行にジャンプします。このように自動的にエラーのある行から編集を開始することができるため、エラーの位置を検索する手間が省けるようになりました。

詳しくは、ヘルプの「ログウィンドウ」と「外部エディタ」をご覧ください。

ドキュメントの修正がさらに容易になった AH Formatter V7.0 を是非ご活用ください。




AH Formatter V7.0 の新機能確認サンプル

先月 2020年2月20日に XML/HTML 自動組版ソフトのベストセラー『AH Formatter』をバージョンアップした『AH Formatter V7.0』を公開しました。この『AH Formatter V7.0』の新機能をご確認いただくためのサンプルは、「サンプルFO集」ページに掲載しています。ここには、XSL-FO の基本仕様と『AH Formatter』の拡張機能を使用したサンプルFO を豊富にご用意していますので、是非ご活用ください。

『AH Formatter V7.0』で追加された機能は、「V7.0 の新しい機能」に列挙しています。『AH Formatter V7.0』では、欧文組版における行分割処理の改良、BIDI処理の改良、GUI の改良、ドロップキャップ、PDF 2.0 出力、PDF/X-4p 出力、Adobe Fonts や WebP への対応など盛りだくさんです。自動組版にご興味ございましたら、是非評価版をお試しください。

評価版は以下のページよりお申し込みいただけます。
AH Formatter 評価版のお申し込み

AH Formatter のロゴ


Pages: 1 2 3 4 5 6 7 8 9 10 ... 24 25 26 Next