タグ別アーカイブ: CSS組版

[CSS組版]ページ番号のリセット

今回紹介するのは「表紙を同一のHTMLから生成するとき、
表紙のページ番号はカウントしたくない」という要望の実現についてです。誤りがあれば、ご指摘いただければ幸いです。

組版にはAntenna House CSS Formatter V7.3MR1を利用しています。スクリーンショット画像の、ページ番号以外の本文内容について画像によって差異がありますが、記事を作りながら都度組版をしていたためで、本題には支障ありません。

CSSページ組版でページ番号を参照するには、content: counter(page)と指定します。

リセット未指定でのページ番号カウントを見てみましょう。

@page {
    size: JIS-B5 portrait;
    margin: 2cm;
    @bottom-center {
        content: counter(page);
        font-size: 24pt;
        font-variant: oldstyle-nums;
    }
}

@pageルールで全体のページレイアウトを設定しています。@bottom-centerでページ番号を表示するように指定していますね。

1枚目のページに「1」、2枚目のページに「2」が振られています。

pageカウンタをリセット

1枚目を表紙ページとして、2枚目のページに「1」が振られるようにしてみましょう。

ところでCSSのカウンタはページ組版に限らない汎用的な仕組みです。pageはページ組版のとき、定義済みのカウンタ名として存在している状態です。
つまり、カウンタリセットの仕組みを使うことで、ページ番号についてもリセットが可能です。

... {
      counter-reset: page 1;
     }

できることが分かったところで、次の問題、すなわち「どのセレクタ(要素・ルール)にリセットを記述するか」に移ります。

今回は「表紙ページ」と「それ以外のページ」という分け方ができます。「表紙用のページレイアウト」、
「本文用のページレイアウト」が用意できると嬉しいわけです。@pageルールでは、そういう処理が書けます。

@page {...}
@page mainmatter {
  counter-reset: page 1;     
}
#cover {
    break-after: always;  
}
div#mainmatter {
    page: mainmatter;
}
<div id="cover">
    <h1>[CSS組版]ページ番号のリセット</h1>
    <p>今回紹介するのは...</p>
</div>
<div id="mainmatter">
    <p>CSSページ組版でページ番号を参照するには、...</p>
</div>

上手くいった……と油断するのはまだ早いです。このままでは、@page mainmatterの対象ページが切り換わる度にpageは1にリセットされるのです。

リセット対象のページを追加で条件付けすることで解決できます。@page mainmatter:firstを追加することで、「mainamtterページレイアウトが使用される最初のページでpageを1にリセットする」という処理になります。

 @page mainmatter:first {
    counter-reset: page 1;     
}

期待する出力になりました。

表紙のページレイアウトからページ番号を削除する

ついでに、表紙ページからはページ番号表示を外しておきます。

@page cover {
    @bottom-center {
        /*bottom-centerのコンテンツを上書き*/
        content:"";
    }
}
#cover {
    /*coverページレイアウトを適用*/
    page: cover;
    break-after:always;
}

参考


XSL-FO 試行錯誤 SVG 2.0 inline-sizeのTips

2023年01月19日に『Antenna House Formatter V7.3』がリリースされました!
関連して、2023年01月31日(火)16:00-17:00 にZoomウェビナーとして『Antenna House Formatter V7.3 リリース!  新機能と利用シーン紹介』を開催します。


https://us06web.zoom.us/webinar/register/4716717860524/WN_ElB-ZrzFQzShzKGqWZMHqg

新機能紹介ということで、XSL-FOやCSSページ組版の基礎知識があることを前提としています。しかし、特に知識の無い方でも「自動組版でこんな細かいレイアウト調整が効くのか」と楽しめることを目指していますので、お時間が合いましたら是非参加登録いただければ幸いです。

ウェビナースライドはFormatter V7.3で組版しています。スライドはCSSで組んでいるのですが、話題がSVGについてなので、暫くぶりとなる「XSL-FO 試行錯誤」シリーズを題に含めました。
(前回のXSL-FO試行錯誤のカレンダー作成の続きについてはまた時間があるときにさせていただければ……)

さて、本記事ではウェビナーで割愛する部分について、先行して補足します。
ということで、見た目が地味なのであまり深く掘り下げない予定のinline-sizeによるテキストの折り返しについてです。

発表スライドの見出し部分にはSVG 2.0を使っています。

テキストを配置するとき、SVG 1.xでは折り返しを扱えませんでした。
よって、複数行のテキストを配置するときは次の手順(これ以外にもなくはないですが)です。

右揃えで3行でテキストを描画するとします。座標は適当です。

  1. 改行位置でテキストを分割し、別のtspanに分ける
  2. それぞれのtspanにx,yの座標を指定する。2行目であれば1行目から1文字分以上離れた位置にyを設定する
<!-- SVG 1.x -->
<text x="0" y="0">
<tspan text-anchor="end" x="250" y="0">Formatter V7.3</tspan>
<tpsan text-anchor="end"  x="250" y="10">リリース!</tspan>
<tspan text-anchor="end"  x="250" y="20">新機能と利用シーン</tspan>
<text>

text-anchor=”end”によって、xの位置がテキストの終端になっています。

x,yはSVG内の座標系なので、font-size:18ptのように絶対単位で指定されていると対応する高さを調整するのはちょっと手間ですね。
他にも拡大縮小の際などにこれを忘れずに変更しなければなりません。

メリット、といえるかは分かりませんが、あらかじめ分割しているので、意図しない行分割が発生するということはないでしょう。

SVG 2.0のテキスト折り返し機能を使えば、折り返しを自動化可能です。Formatter V7.3ではinline-sizeによる折り返しをサポートしています。
Scalable Vector Graphics (SVG) 2 11.4.1. The ‘inline-size’ property



<text x="0" y="0" inline-size="1000">Formatter V7.3リリース! 新機能と利用シーン</text>

inline-sizeにはテキストの行長を指定します。

  • 両端揃えができない
  • 日本語は行頭・行末禁則以外では基本的に改行可能と判断される

また、見出しのような箇所で使う場合、次のことを意識しておくとよいでしょう。

今まで手動でやっていた行分割を自動処理にする都合上、特に、本文でない箇所での行分割規則は意識しておかなければなりません。
言語処理が日本語になっていれば(xml:lang=”ja”が適用されるような箇所であれば)
意図してそうしない限り「ー」は先頭に来ませんが、「リ」はそうではないので、

Formatter V7.3 リ
リース!

となるかもしれません。

特定単語の行分割を防ぐため、その箇所のマークアップをtspanにして、分割禁止のプロパティを付けることにします。
「tspanを使うなら結局SVG 1.xとあまり変わらない?」と思われるかもしれませんが、座標の明示がなくなるので処理はかなり単純化します。
「この単語で行分割されるのは困るが、ここ以外であれば別に構わない」というケースが多いとみているのですが、どうでしょうか。

<!-- <heading>Formatter V7.3<keep>リリース!</keep><keep>新機能</keep>と<keep>利用シーン</keep></heading> -->
...
<xsl:template match="heading">
  <svg:svg viewBox="0 0 1920 1080" >
  ...
    <svg:style>
      svg|tspan.keep {
        word-break: keep-all;
      }
    </svg:style>

    <svg:text x="1800" y="100" text-anchor="end"><xsl:apply-templates mode="#current"/></svg:text>
  </svg:svg>
</xsl:template>
...

<xsl:template match="keep">
  <svg:tspan class="keep"><xsl:apply-templates mode="#current"/></svg:tspan>
</xsl:template>

上記は実際に使用したコードではないため、参考程度にお考えください。
inline-sizeが対応するalign調整はtext-anchorによるものになるため、両端揃えの自動配置はできません。

その他、SVGのテキストを使う場合の注意点として、FOのブロックやHTMLのテキストと異なり、
「viewBoxは伸長しないため、想定よりテキストが長くなると表示が見切れる」という点があります。
つまり、「ページ単位で表示領域を確保できる」など、特に高さ・テキスト長があらかじめ想定できる
範囲で使うようにするとよいでしょう。

そして、Formatter V7.3で対応したSVGフィルタ・マスク機能と組み合わせることで文字列に効果を付加できます!

SVGテキストとマスク

画像に対し、テキストをマスクとして被せたものになります。このSVGではtext-anchor=”middle”です。
実のところ、SVGマスク以外の方法もあります、ただ、SVGマスクやフィルタは汎用的ですし、追加の独自仕様無しでXSL-FOでも使えるというメリットがあります。


【動画公開】XSLT超入門3, CSS組版スライドと補足

ちょっと一息アンテナハウスウェビナー「XSLT超入門 3 XPathについて」を終えました。ご視聴いただいた方、ありがとうございます。お時間の合わなかった方、動画が公開されたので、ぜひご覧ください。


Zoomの注釈機能

発表直前に気付いたのですが、Zoomの「画面の共有」ボタンの横に、いつの間にやら「注釈」というボタンが増えていたので早速使ってみました。いかがでしたでしょうか。

PowerPointスライドと違い(おそらくほとんどの)PDFビューアにはレーザポインタ機能がないので、助かりますね。(他機能として、テキストも表示できます。スライド表示中に「これ補足した方がいいかな」といった思いつきでテキストを追加したりはPDF注釈でも実現できますが、操作の切り換えの手間があるため、Zoomにあるに越したことはない、くらいの感想です。)

CSS組版スライド

担当したここ数回のウェビナーではPowerPointでスライドを作成していました。今回も途中まではそうだったのですが、内容の大幅な修正を行うついでにAH FormatterでHTML+CSS組版によるPDFスライドに移行しました。

以前XSL-FOでスライドを組版したことを紹介しました。スライド発表程度の長さであれば単一HTMLでもあまりテキスト分量はかさみません。今回、HTMLが650行弱、CSSは240行程度でした。実作業としてはSCSSで記述して変換していたので……240行程度でした。まあ、セレクタ部分は簡潔になりますが、改行・インデントとしてはあまり変わらないんですね。CSSについてはAH CSS Formatterの既定のCSSを読み込んだ上でなので、0から組むのであればもう少し嵩むでしょう。

VS CodeでSCSSを編集 with AH CSS Extension

SCSSの編集はVS Codeで行いました。VS CodeでのCSSの補完・サジェストについては、@media printなども最初からある程度対応しています。
加えて先日、AH CSS Formatterの豊富な拡張仕様を入力補助してくれるAH CSS Formatter Extensionが公開されたので早速使っています。SCSSファイル編集でも有効なようです。

https://github.com/AntennaHouse/ahformatter-vscode-css-ja

「HTMLソースでスライドを作成する」というと、気になるのは「発表スライドとWebページを同時作成できるか?」という点ではないでしょうか。結論としては「内容次第」ということに落ち着いてしまうのですが、「ある程度まで同一ソースで作成する」ことを目標とすると、方針として押さえるべき点は次のことでしょう。

  • HTMLソースはWebページ向けが主、スライドは従
    • スライド組版時はdisplay:noneにする情報を決めておく
    • スライド向けCSSを先行する場合、とくに注意するのはfloat配置とheightの100%

もちろん、広告を目的とするWebページなどで一度に入る情報量を絞ることなどはよくあります。ここではある程度技術的内容のプレゼンとそのWebページ化を前提としています。

スマホ向けとPC・タブレット向けのページを同じソースで作成する場合にスマホ向けをメインにレイアウトすることを「モバイル・ファースト」といったりしますが、Webページとプレゼンテーションの関係はもう一捻りあります。
モバイルとそれ以外で異なるのは、主に画面サイズです(より正しくは前提とする通信環境によるリソースの出し分けなどもあります)。
一方、Webページとプレゼンにおいて、Webページはそれのみですが、プレゼンは(通常)「スライド+発表者+発表」で構成されます。この違いは「読者側が受動的か能動的か」「発表者による注意対象・情報量のコントロール」といった差異を生みます。

HTMLソースの話に戻ると、ある変換を行うとき、情報量は落とす方が楽で、足すのはかなり困難です。
つまり「より情報量を必要とする方を主とし、そうでないものを従とする」ということになります。
プレゼンは発表という追加情報を前提とするため、スライドにWebページと同じ情報量を与えると情報量が過多になりがちです。

CSSでは手軽に表示を隠蔽する方法としてdisplay:noneがあります。これは、プレゼンでは口頭で与える情報を、Webページではテキストで表示する、という目的にも使えます。

@media print {
.web-page-only {
  display:none;
  }
}

前提として、「スライド上隠蔽されても前後の話は分かるようにする」というライティングが必要です。なので、パラグラフライティングの基本や、DITAにおけるshortdescのように、「これは最低限最初に伝える」という文章から書いていくよいでしょう。

ページ向け媒体ではフロートはページの上端、下端を前提に書けます。これはpositionについても同様です。

XSLT超入門3の補足

さて、発表の補足です。

何度か述べましたが、XPathの特長は、簡単には「ある文書で、目的の箇所を簡便な記法で指定できる」「取り出した値の加工が行える」ことにあります。ただ「hoge/fuga/…」と書きつらねるだけでなく、軸や述部といった機能・概念を使うことで、他の言語、というかDOMインターフェイスでは難しいこともスマートに行える、ということをXSLT超入門3ではフューチャーしたのですが、いかがでしたでしょうか。
「ここが分からないのでここをじっくりやってほしい」などの要望を、メール・SNS・動画へのコメントなどでいただけると幸いです。

さて、発表について、事前の予定から大きく削った箇所としては2箇所です。データモデルと、XPath 1.0のコードを3.1でリライトするという内容です。

データモデルについては、XPath 2.0でいかに整理されたか、3.0(3.1)で何が拡充されたか、の詳細を削りました。このあたりについてはW3CのXDMのページに図示があるので内部処理モデルに興味のある方はご参照ください。

XPath 3.1でのリライトについては、題材として丁度良いバランスのものを見つけるのはかなり難しかったため、構成から削除しました。「XPath 1.0でまともに処理できるように記述した上で、XPath 3.1で明らかに改善されるように書き直す」ということの難しさは、「そもそも1.0で書けなかった処理を拡充したものがほとんど」「1.0では(XSLT上では)独自functionの定義もできないので、XSLTも多分に含むことになる」といった点にあると感じます。XSLT 1.0のコードでの超絶技巧についてはfunctXライブラリが有名でしょうか。

超絶技巧はおいておいて、もう少し簡単なものはあります。

XPath 1.0(XSLT 1.0)
<xsl:template match="*[contains(@class, ' topic/ph ')]"> 
  ...
</xsl:template>
XPath 3.0(3.1) (XSLT 3.0)
<xsl:template match="*[contains-token(@class, 'topic/ph')]"> 
  ...
</xsl:template>

行っているのはDITAの@class処理で、スペース区切りで続く文字列の部分一致判定です。contains()では含まれてさえいれば真を返してしまうので、topic/ph前後にスペースは必須です。ないと「mytopic/ph」なども一致してしまいます。
contains-token()は、なんだったら名指しで「HTMLやDITAのclass処理に使えるよ」と書かれているのでさもありなん。

コア関数についてはかなり駆け足で紹介しました。コード例をバーッと載せていましたが、コードをしっかり読んでもらうことは意図していません。
これは構成上割と悩みどころで、関数名と処理内容を淡々と流すのであれば、ウェビナーよりもWebサイトや本などを参照するように誘導しても良いと考えています。あるいは数時間~数日のワークショップであれば、サンプル、基本、応用、基本、……といった進め方をしたと思います。

とくにXPath 1.0では、関数型言語らしい「関数を組み合わせて使う」ことはなかなか難しいため、その有用性のアピールを分かりやすく行うのは難しくなっています。

発表中、contains()が(2.0)となっていましたがこれは記述ミスで、XPath 1.0からあります。


SCSSで(S)CSS組版の見通しを良くする

Antenna House CSS FormatterはHTMLあるいはXMLとCSSからPDFを生成できます。

ところで、CSSを直接書くのは結構大変です。
スタイル設定を書いていると、数百行程度はすぐに超えてしまうかもしれません。
そうして膨れ上がったスタイル設定はメインテナンス性の観点からもあまり望ましくはありませんね。
そこで他の記述形式からCSSを生成する方法が普及してきました。
CSSを生成する言語あるいは処理系を指してメタCSSという呼称が用いられることもあります。メタCSSとしてはLESSやSCSSがあります。

本記事ではSCSSを記法として採用し、処理系としてsassを使用しました。SASSとSCSSの違いなどについては割愛します。SCSSは記法として素のCSS記法も可能なため、既に記述されているCSSからの移行が比較的容易いというメリットもあります。

今回はサンプルとして、弊社で公開している『CSSページ組版入門』のサンプルファイルを利用しました。
Antenna House CSS FormatterのバージョンはV7.2改訂1版を想定しています。

処理の流れとしては次のようになります。

1. SCSSファイルの記述
2. SCSSをCSSにコンパイル
3. HTML、XML+CSSをAH CSS Formatterで組版

sassの導入

sassは現在Dart言語で開発されていますが、インストールはDart環境よりもWeb系でより普及しているnpmやyarn経由の方が簡単かもしれません。

$ yarn add sass 

今回SCSSに変更していくbooklet-page-ja.cssをリネームし、booklet-page-ja.scssとします。SCSSに変更後、sassによって改めてbooklet-page-ja.cssを生成します。

$ yarn run sass booklet-page-ja.scss booklet-page-ja.css

ネスト記法

booklet-page-ja.css(変換前)

...
/* 目次 */
.TOC > ul {
  font-size: 15.5q;
  font-family: source-serif-pro, source-han-serif, serif;
}
.TOC li.TocLevel1 {
  font-size: 15.5q;
}
.TOC li.TocLevel2 {
  font-size: 14q;
}
.TOC li.TocLevel3 {
  font-size: 12.5q;
}

CSSでは基本的にセレクタは個別に書いていく必要がありますが、SCSSではセレクタの親子関係を入れ子で記述できます。また、「>」や同じ要素で別のクラス指定のものも入れ子にし、Parent Selector 「&」を使うことで目的の出力が得られます。
@pageはトップレベルのセレクタのため、「& :left」のような利用方法はエラーとなります。

booklet-page-ja.scss

...
/* 目次 */
.TOC {
   
 & > ul {
  font-size: 15.5q;
  font-family: source-serif-pro, source-han-serif, serif;
 }
 li {
  &.TocLevel1 {
    font-size: 15.5q;
  }
  &.TocLevel2 {
    font-size: 14q;
  }
  &.TocLevel3 {
    font-size: 12.5q;
  }
}
...

フォーマットした上での行数は増えることもありますが、同じ要素やクラスを親とするスタイル指定がすっきりまとまりました。

SCSSでの「&」は「&-top」のようにも使えるのですが、CSSのNesting Module(Draft)では処理が変わってしまうため、使用を控えています。

@mixin

SCSSでは@mixin <name> (<arg>) { ...}で指定した内容を@include <name>(<arg>)で取り出して使用できます。

フッタのページ番号とヘッダのテキストでfont-familyとfont-sizeが揃っていたため、@mixinを使用してみましょう。

booklet-page-ja.css

 ... {
  @top-left {    /* 柱(ページヘッダ)*/
    font-size: 11.5q;
    font-family: source-serif-pro, source-han-serif, serif;
  }
  @top-right { content: none }

  @bottom-left { /* ノンブル(ページ番号)*/
    font-size: 11.5q;
    font-family: source-serif-pro, source-han-serif, serif;
    content: element(Title);
  }
...
}
booklet-page-ja.scss

@mixin running-font {
      font-size: 11.5pt;
      font-family: source-serif-pro, source-han-serif, serif;
}
...
... {
    @top-left {    /* 柱(ページヘッダ)*/
      @include running-font();
    }
    @top-right { content: none }
  
    @bottom-left { /* ノンブル(ページ番号)*/
      @include running-font();
      content: element(Title);
    }
}

今回は使用していませんが、SCSSではCSSに変換時に置換される変数が使用できます。CSSにも変数機能がありますが、組版に使う処理系がCSSの変数に対応していないときなどはこちらが有用です。

AH CSS Formatter V7.2はCSS変数に対応しています。
AH Formatter V7.2 | CSS仕様の実装状況

@mixinなどと併用するときは粒度の管理が大切です。

ファイルをまとめる

素のCSSでは分割したファイルは都度HTMLのlink要素で読み込んでいたかもしれません。CSSの@import機能もありました。
「分割して細かくしていくうちに数十ファイルのCSSでどこに何が書かれているか分からなくなり、そのまますべて読み込むことにした」という話も耳にします。Webサイト読み込みにおけるパフォーマンス以外に、メインテナンス性にもかかわる話です。

SCSSでは複数の入力SCSSファイルから、1つまたは複数のCSSファイルを出力することもできます。
「SCSSファイルと同数のCSSファイルをチェックすることになり作業が倍に」といった事態にしないため、
出力するCSSファイルはまとめることにします。

複数の入力ファイルから出力を得る場合、sassへ指定する引数の書き方が少し変わります。
次のSCSSファイルのあるディレクトリをscss、出力するCSSファイルを含むディレクトリをcssとします。

$ yarn run sass scss:css 

scssディレクトリ内部のSCSSファイルがCSSへと変換されます。scss/a.scss、scss/b.scssファイルが存在する場合はcss/a.css、css/b.cssファイルが生成されます。

さてこのとき、ファイル名の先頭を「_」とすることで、そのファイルは出力するCSSファイルから除かれます。この除外されてしまうファイルの意義はどこにあるかというと、出力対象の別ファイルから内部的に読み込ませるためにあります。

出力するCSSファイルから除外するファイルを_color.scssとします。

booklet-page-ja.scss

@use "_color"
...

@useで読み込まれた_color.scssの内容は変換出力されたbooklet-page-ja.cssに反映されます。このとき名前空間などの概念が登場しますが、詳細はSCSS(SASS)のWebサイトなどをご覧ください。

ざっくりとした紹介となりましたが、メタCSSによってCSS組版の設定記述の見通しを良くする方法について説明しました。WebサイトでのSCSS-CSS利用との差異はほとんどありませんが、Webサイトよりも細かに異なるレイアウト指定を行うであろうCSSページ組版で、メタCSSによって得られる恩恵はより大きくなるのではないでしょうか。

参考資料



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に変換!


アンテナハウスの公開資料

ここ暫く外出が減り、外に出ていた時間を読書や学習にあてるという方も少なくないのではないでしょうか。
出版社による期間限定の書籍の無料公開も様々にあります。
以前から公開されている企業の技術資料をこの機会に読んでみるのも、新たな発見があるかもしれません。

何気なくWebページで技術資料を検索していたら弊社の記事だった、
なんてことを先週の休日にも体験しました。日本語情報自体が少なめなものでしたから、見つけて吃驚しました。日々技術や規格はアップデートされるものですから、資料の更新日時などには注意が必要ですが、そこさえ押さえてあれば色々と興味深い資料が見つかります。

アンテナハウスでは書籍や漫画のような形態の資料も公開しています。
トップページや製品ページからもアクセスできますが、折角なのでここでも一部紹介します。

マンガでわかる!! アンテナハウス システム製品利用例シリーズ
https://www.antenna.co.jp/system/PDFCase000.html
仕事の合間にもさらっと読める、漫画形式の製品利用例の紹介です。同じようなお悩みが見つかるかもしれません。
XSL-FO の基礎 第2版 – XML を組版するためのレイアウト仕様
https://www.antenna.co.jp/AHF/ahf_publication/index.html#fo-basis
「XML組版に興味はあるけど、JISやW3Cのページをいきなり読むのは辛いなぁ」という方におすすめです。
CSSページ組版入門 第4版
https://www.antenna.co.jp/AHF/ahf_publication/index.html#CSSPrint
こちらはCSS組版での書籍作成の入門書になります。AH CSS Formatter用の拡張を使う箇所もありますが、CSS組版での基本を把握できるようになっています。
MathML 数式組版入門
https://www.antenna.co.jp/AHF/ahf_publication/index.html#MathML
数式マークアップ用の言語MathMLの入門書です。こちらも、「興味はあるけれど、いきなりリファレンスを読むのは辛い」という方におすすめです。

その他にも http://www.cas-ub.com/project/index.html で公開している書籍などがあります。「印刷された形で欲しい」という方にもPrint On Demand 本として購入いただけますので、ぜひどうぞ。


Antenna House Formatter V7.0 リリースのお知らせ

2020年2月20日に XML/HTML 自動組版ソフトのベストセラー『AH Formatter』をバージョンアップした『AH Formatter V7.0』を公開しました。

AH Formatter のロゴ

『AH Formatter V7.0』では、欧文組版における行分割処理の改良、BIDI処理の改良、GUI の改良、
ドロップキャップ・PDF 2.0 出力・PDF/X-4p 出力・Adobe Fonts・WebP への対応など
盛りだくさんです。

詳しくは「ニュースリリース」に記載しておりますので、是非ご覧ください。
 
 


Balisageで『Loose-leaf publishing using Antenna House and CSS』の発表 その3

Balisageで『Loose-leaf publishing using Antenna House and CSS』の発表 その2

この記事の続きです。
8月2日(金)米国Washington DCで開催された恒例Balisage会議にて米国の高名なコンサルタントであるEliot Kimber氏より「Loose-leaf publishing using Antenna House and CSS」と題した発表がありました。
原文はこちらにあります:

Loose-leaf publishing using Antenna House and CSS(Balisage: The Markup Conference 2019 July 30 – August 2, 2019)

発表資料ではこれらの課題をどのように解決したかを具体的なサンプルコードを示し説明を行っています。原文の他に、日本語翻訳版もWeb上にご用意いたしました。ぜひご参照いただき、より理解を深めていただければ幸いです。

https://www.antenna.co.jp/AHF/ahf_jirei/pdf/201909/Loose-leafPublishingUsingAntennaHouseAndCSS-J.pdf


Balisageで『Loose-leaf publishing using Antenna House and CSS』の発表 その2

Balisageで『Loose-leaf publishing using Antenna House and CSS』の発表
この記事の続きです。

8月2日(金)米国Washington DCで開催された恒例Balisage会議にて米国の高名なコンサルタントであるEliot Kimber氏より「Loose-leaf publishing using Antenna House and CSS」と題した発表がありました。

原文はこちらにあります:

Loose-leaf publishing using Antenna House and CSS(Balisage: The Markup Conference 2019 July 30 – August 2, 2019)

ルーズリーフ出版とは、以前に印刷された文書のページ番号は変更せずに、内容の更新を行う出版方法です。文書の更新により新しいページが作成されると、それらのページには元のページ番号に修飾子を加えたページ番号、例えば「10.1」、「10.2」などが付与されます。このようなページは「ポイントページ」と呼ばれます。

Eliot Kimber氏の挑戦

ルーズリーフ出版の課題の1つは、文書の2つのバージョン間でどのページが変更されたかを判断することです。Eliot Kimber氏は次の様なパイプラインでルーズリーフ出版を行うことを考えました。

  1. 編集者は、変更されたページの開始と終了のマークを含むXMLソースを準備します。開始は常に、以前のバージョンのページの開始に対応し、終了は変更が終了する場所です。
  2. 入力XMLソースはXHTMLを生成するために前処理し、必要に応じて一般的にはCSSページ組版を可能にし、また具体的には、変更ページの生成を可能にするために拡張されます。
  3. 拡張されたXHTMLは、CSSスタイルを使用してAHFによってレンダリングされ、最初のエリアツリーが生成されます。
  4. 最初のエリアツリーが処理され、ポイントページ番号とそれらのページを参照するページのページ番号が更新されます。変更パッケージが作成されている場合、変更されていないページはすべて除外され、生成された「更新の説明」の節、目次、表紙など、変更されたページとパッケージに必要な他のページのみを反映するエリアツリーが作成されます。
  5. マスターページの履歴データベースが更新され、更新されたバージョンの文書のページの詳細が反映されます。これには開始ページと終了ページのIDを持つ要素からのマッピングが含まれます。
  6. 更新されたエリアツリーはAH FormatterによってPDFにレンダリングされます。

そのためには、変更された一連のページ内のどの場所でポイントページが必要かを知る必要があり、変更パッケージの目次を生成する必要があり、変更パッケージの「更新の説明」と「有効ページのリスト」の節を生成する事が課題となりました。

CSSページ組版の課題

加えて、CSSでページ組版を行う上で、いくつかの課題があります。
CSSページ組版を有効にするために完了しなければいけない事項としては:

  • 目次、巻末索引、および類似のナビゲーション構造の生成。
  • 構造化されたヘッダとフッタを作成するために使用される要素の生成。たとえば書式設定が異なる複数行のヘッダ、またはHTMLの個別の要素を必要とするインライン書式設定など。
  • @class値またはその他の考えられる手がかりを追加して、CSSスタイリングを可能に(先読みして)またはより便利にする。
  • ソースの順序に関係なく表示される要素の並べ替え。たとえば、図のキャプション要素を図の上部から図の下部に移動したり、メタデータ要素または属性を使用して表示されるコンテンツ(著作権ページや各記事または章の著作者など)を合成する。
  • ラッパー構造を追加して特定のフォーマット効果を有効にするか、スタイリングを簡単にする。
  • 作成されたさまざまなマークアップパターンを持つ要素のマークアップを標準化する。たとえば、リスト項目に段落要素を追加してCSSスタイルシートを単純化する。
  • CSSだけでは生成が困難または不可能なテキストを生成する。

またスタイルシートを実装する際、次の様な課題がありました。

  • 特定のレイアウト機能に関連する定義を、関連するW3C仕様の中で見つける。
  • AH Formatterが仕様で定義された特定の機能を実装しているかどうかを判断する。
  • 複雑なレイアウト要件においては、AH Formatterを使用した最適なソリューションを判断する。
  • 改ページを動的にコントロールする。

ほとんどのレイアウト要件では、CSSの開発は通常のCSS技術の範疇の単純な応用で可能でしたが、 次の複雑な要件を満たす必要がありました。

  • ページのfirst またはlast値を反映する必要がある柱 (ランニングヘッダとランニングフッタ) の要素の境界を越えたカウンターと変数の管理。
  • 改ページの管理。 改ページ制御のCSSセマンティクスは、XSL-FOほど明確ではない。特に、CSSには「keep together always」または「keep with next always」コントロールがない。 これにより、ページの下部にあるセクション見出しと、コンテンツが介在しないサブセクションの見出しの間など、残念な改ページが生じることがあった。改ページをより適切にコントロールするには、AHF拡張機能を使用する必要があった。
  • 幅の広いページ端領域のサイズとレイアウトの制御。ページ端領域のCSS設計では、単一の領域が端領域のほとんどまたはすべてを占めることを明確に許可していない。これにより、長いコンテンツ(たとえば、長いセクション見出し)を持つ右揃えまたは左揃えのヘッダを作成することが困難になっている。

Eliot Kimber氏はこれらの課題をCSSページ組版用にXMLを準備し、AH Formatterの拡張機能を用いて、クリアーしていきました。

発表資料ではこれらの課題をどのように解決したかを具体的なサンプルコードを示し説明を行っています。原文の他に、日本語翻訳版もWeb上にご用意でき次第、ここにお知らせいたしますので、ぜひご参照いただければと思います。

その3 >>


「技術書典7」に出展いたします。

来週 9月22日(日)に開催される「技術書典」(主催:TechBooster / 達人出版会)に向けて、最近、組版界隈で話題の Markdown(と CSS)を用いて、実際に技術同人誌『簡単!Markdown+CSSによる冊子本作り ―理論と実践―』を作成いたしました。当日販売いたしますので、ぜひお手にとってご覧ください。

『簡単!Markdown+CSSによる冊子本作り ―理論と実践―』の表紙

本書籍の内容については、先日、弊社ブログでご紹介しております。ご関心ございましたらご覧ください。
Markdown+CSS組版で冊子本(PDF)を作ってみる

◆ 技術書典概要
・開催日時:2019年9月22日(日) 11:00~17:00
・開催場所:池袋サンシャインシティ2/3F 展示ホールC/D(文化会館ビル2/3F)
・サークル名とブース番号:アンテナハウスCAS電子出版(き45D)
販売書籍
技術書典7

◆技術書典ご来場予定の方に

一般参加者は13時まで有償の整理券が必要です。ご注意ください。

整理券のご案内

整理券は1,000円で、3種類あります。

(1) Cホール(3階)から入場 11時~
(2) Dホール(2階)から入場 11時~
(3) Dホール(2階)から入場 12時~

弊サークルの場所は、展示ホールD(2F):き45Dです。

アンテナハウスCAS電子出版(き45D)

入場が13時過ぎると無償(ただし、待機列解消後)になります。Markdown本はたくさん印刷しましたので、まず売り切れはないと思いますので、遅くてもたぶん大丈夫なはずです。


Pages: 1 2 Next