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

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本はたくさん印刷しましたので、まず売り切れはないと思いますので、遅くてもたぶん大丈夫なはずです。


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)

ルーズリーフ出版は、PDFによるデジタルな配信が可能になるにしたがって消え去っており、唯一残っているのが、地方自治体の条例分野だそうです。

この分野でのサービスをしているMunicode社では、ずっとXMLベースの出版システムであるXPPを使用していました。配信のソースコンテンツをHTML5ベースで開発して、HTMLからPDFを作成するためにCSS組版を採用することになりました。Municode社の組版要求を満たすことができる世界で唯一のCSS組版エンジンがAH Formatterであったことから、白羽の矢が立つこととなりました。

しかし、AH Formatter自身には、ルーズリーフ出版機能はありません。そこで、コンサルタントであるEliot Kimber氏の出番となりました。さて、Kimber氏は課題にどのように立ち向かったのでしょうか。興味津々です。

しかし、今日はこれ以上ご紹介している時間がありません。続きは、また、機会をみてご紹介いたします。もちろん英語であれば、今すぐ原文をお読みいただけます。

  その2 >>


[AH Formatter] Markdown形式の原稿を CSS組版により PDF文書に変換するための事例紹介

AH Formatter の導入事例紹介ページに有限会社フェリックス・スタイル様の事例「AH Formatter を用いた Markdown-PDF 変換事例紹介」を掲載しております。

事例紹介ページにある PDF文書では、Markdown形式の原稿を『AH Formatter』の CSS組版により、表紙や目次、ノンブルなどを備えた PDF文書へと変換するフローが詳解されております。

また、この事例紹介の PDF文書も Markdown原稿から作成されており、その作成に用いたソースファイル一式も GitHub にて公開しておりますので、実際に Markdown原稿から CSS組版を利用した PDF へのビルドをご体験いただけます。是非ご覧ください。

なお、主に海外の方に向けて、ソースファイルは英語版もご用意しております。
Markdown-PDF
https://github.com/2SC1815J/md2pdf/tree/en (English Version)
 
 
AH Formatter ロゴ

『AH Formatter』の評価版は以下のページよりお申し込みいただけます。是非、お試しください。
AH Formatter 評価版のお申し込み

XSL-FO の基本仕様と『AH Formatter』の拡張機能をお試しいただけるよう「サンプル FO 集」もご用意しています。

『AH Formatter』についてお問い合わせがございましたら sis@antenna.co.jp 宛てにご連絡ください。


AH Formatter V6.6 改訂2版 の強化内容

昨日、2018年12月6日に XML/HTML 自動組版ソフトのベストセラー『AH Formatter V6.6』のメンテナンスリリースとして改訂2版を公開しました。

AH Formatter ロゴ

基本的に改訂版では機能強化は行っておりませんが、今回は海外のユーザ様からご要望のあった次の機能に対応しました。

『AH Formatter』は主にバージョンアップのたびに機能強化や新機能の追加を行っていますが、”あったら便利な機能” も既に追加されていることがございますし、いくつかの機能を組み合わせたり工夫することで実現できることもありますので、どうぞお気軽にサポートにお問い合わせください。なお、未実装の機能であれば、ご要望として承り今後の開発の参考にさせていただきます。お問い合わせをお待ちしております。

ご購入前のお客様で『AH Formatter』についてお問い合わせがございましたら、sis@antenna.co.jp 宛てにご連絡ください。

 


Pages: 1 2 Next