Antenna House Formatter V7.4紹介

大幅強化された

CSS組版で簡単レイアウト

会社
アンテナハウス株式会社
名前
横田達朗

Formatter

Antenna House Formatter

Antenna House Formatter

ふたつのスタイルシート（XSL 1.1 ・CSS ）に対応した自動組版・印刷ソフトウェア

  • このスライドもHTML+CSSをFormatterでレイアウト

    • 過去ウェビナーではXSL製もある

Formatter Windows版のGUI

なぜ専用ソフトを使うのか？

なぜ専用ソフトを使うのか？

流し込んでみないとどうなるか分からないものを美しく処理できる

  • 「このページはm章だ（ヘッダ・フッタ）」

  • 「改ページの前（後）にこの部分は收めたい」

  • 「……についてはnページを参照」

  • 「左右のページで余白を変える」

V7.4

V7.4

V7.4が2023-12にリリース

  • 02/08に改訂１版（MR1）
  • CSS機能が大幅強化
  • 数年来カスタマー要望のあった機能が実装
💪🏽

CSS機能が強化されると……

CSS機能が強化されると……

素朴で、でも難しかった要望のレイアウトが簡単に！

  • 並べた図版がいい感じに自動的に並んでほしい

  • 特定位置に配置したい

  • 目的のHTML要素を指定するのが大変

  • CSS自体は慣れている → 慣れた最近の書き方ができる
  • CSS自体もあまり経験がない → 簡単になった最近の方法だけ学べばよい

アジェンダ

アジェンダ

  1. Formatter
  2. FlexibleBoxとCSS Gridのレイアウト例
  3. セレクタ指定を柔軟に
  4. その他
  5. まとめ

FlexibleBoxとCSS Gridのレイアウト例

コンテナとアイテム

配置を揃えるコンテナとアイテム

コンテンツをコンテナとアイテムという構造に対応させて扱う

コンテナ
アイテムを配置する箱
display:flex, display: grid
（inline-flex, inline-gridは行内用）
アイテム
コンテナ内に配置される箱
（display: flex-item, display: grid-item）
コンテナとアイテム

Flexible Box

Flexible Box

アイテムの要素が順に並んでいく。アイテムの並べ・揃え・余白の取り方を外側（コンテナ）で制御できる

並べ方

flex-direction: row;
flex-wrap:wrap
flex-direction: column

揃え方

justify-content
align-items

余白の取り方

  • 揃え方と関連
  • flex-basis・flex-grow・flex-shrink
  • レスポンシブでないCSS組版では、揃え方がバッチリ一度決まれば出番は低め

フレックスのポイント

  • コンテンツの横並べがinline-blockなどより格段に簡単

  • 並べたアイテムの縦配置も変更し易い

  • 縦に並べ変えるのが簡単

  • Webページと違ってスクロールできないため、flex-wrap: wrapが重要

  • 隙間のある空間でピンポイントの配置はできない→グリッドの出番

CSS grid

table要素では……

CSS Grid以前からWebサイトでコンテンツを自在に配置する要求はあったが、tableやframesetといったHTML要素をいじることで実現していた

table

テーブル
A B
C 

  
    テーブル
  
  
      
         A
         B
      
      C
  
]]>

グリッドなら

HTML上は単純な構造のまま

grid
A
B
C

  
grid

  
A
B

  
C
]]]>

CSS Grid

トラックを設定し、行と列の格子線・テンプレートでアイテムを配置

グリッド
ブラウザの開発者モードでグリッドが確認できる

トラックを設定する

グリッドの縦横に用意する帯（または筋）。帯の幅の中にアイテムを配置する

.grid {display:grid;
    grid-template-rows: 1cm 1cm ...; 
/*inline-start-endの端から端まで引かれる帯の各幅*/
    grid-template-columns: 1cm 1cm ...;
 /*brock-start-endの端から端まで引かれる帯の各幅*/
 /*全長から固定幅でない幅サイズを等分した fr 単位指定も可能*/
    row-gap:  0pt;/*inline-start-endのトラック間の余白*/
    column-gap: 0pt; /*brock-start-endのトラック間の余白*/
}
トラック

格子線（グリッドライン）

アイテムの開始・終了位置をトラックの端の 数 すう で示す

.item {
  /*先頭のrowトラック*/
  grid-row-start: 1;
  grid-row-end: 2;
  /* 2番目のcolumnトラック開始位置から
  3番目のcolumnトラック終了位置 */   
  grid-column-start: 2;
  grid-column-end: 4; }

  • 12本のトラックを引いたら、線の番号は1-13

  • gapが設定されていると数え方が若干ややこしい

名前付きエリアを設定する

設定したトラック上で、矩形に区切った範囲を名前付けし、名前で位置を指定する

.grid {
 /*いわゆるgrail型のコンテンツ配置例*/
    grid-template-areas:
  "header header header" 
  "nav main ."
  "footer footer footer";
}
header {grid-area: header;}
footer {grid-area:footer;}

  • 使用しない領域は「.」を記述

  • 矩形の形状のみ（Ｌ字などは不可）

自動配置について

  • grid-auto-rows・grid-auto-columnsで未指定の箇所に来た場合の追加トラックを設定

  • ページレイアウト（スクロール・画面伸縮できないもの）と折り合いが悪く、ページの端を越えていくこともある

  • グリッド位置を指定しないアイテムは格子線の順に配置されていく。これも伸縮しないページメディアと折り合いが悪い

inline-grid

行内でどのようなときにグリッドがあると便利か？

  • ex. 漢文配置

    • template-areaで返り点や送り仮名位置の要素を配置

    • 返り点位置は他では結構難しい

グリッドのポイント

  • トラックの設定と、格子線またはテンプレート領域配置の2段階

  • レスポンシブではないページメディアでは、自動配置は慎重に

  • 長さが分からないコンテンツには向かない（矩形のサイズ予想ができるものがよい）

    • Formatterのoverflow処理拡張である程度対応可能

  • （線名など、更に複雑な話は今回省いている）

セレクタ指定を柔軟に

セレクタが充実する利点

セレクタが充実する利点

レイアウトが簡潔に

p {/* p要素すべて */}
#fig1 {/* idがfig1の要素 */}
:last-child, 
:last-child > :last-child {
    /* 最後の要素とその子の最後の要素 */
}

  • セレクタで当てる対象を指定する

  • ID指定など、構造と見た目が離れたセレクタ指定は読みにくい

  • 単純なセレクタのみでは記述が複雑に

:is(),:where()

:is(),:where()

複数の指定をまとめる


section h1 span,
section h2 span {sectionの子孫のh1の子孫のspanと
    sectionの子孫のh2の子孫のspan
}

/*詳細度の違いがある。
慣れるまではwhereをまず使うのがおすすめ*/
section :where(h1,h2) span {
...}

:has()

:has()

○○:has(～)で「～を持つ○○要素」を対象にできる

section > h2 {
  background-color: cadetblue;
}
section:has(>h2) {
  /*h2レベルのsectionだけを指定*/
  border: solid 1pt black;
  padding: 0.5rem;
}
section:has(>h3) {
  background-color: lightpink;
}
h2レベル

    
h3レベル

        ...
]]>

:not()

:not()

○:not(~)で「～でない○要素」を指定。CSS4の:not()では複数を指定可能に

li:not(.special, .veryspecial ) {
    /*複数のセレクタを同時指定など*/
    ...
}
p:not(:first-child)) {
/*2つめ以降のp*/
}

::before(n), ::after(n)拡張

::before(n),::after(n)

要素の前後に複数のコンテンツを追加する

::before,::after

要素の前後にコンテンツを表示する疑似要素

  • 1つの要素に各1つずつ指定可能

  • 装飾を変えたい場合、HTMLタグを増やすことになる

::before(n),::after(n)拡張

h2::before(1) {
  content: '第' counter(sect) '節';
text-decoration: underline;
font-size: x-large }
  h2::before(2) {
content: '第' counter(chap) '章';
font-size: xx-large;
}

その他の強化機能

(-ah-)border-radius: diagnonal;

(-ah-)border-radius: diagonal

角を丸めではなく対角線を引いた形状に。このスライドでも多用

.card {
  /*右下の角にだけ作用させる */
  border-bottom-right-radius: 30pt 30pt diagonal;
}

OSDC連携

Office Server Document Converter

MS OfficeがなくてもWord,Excel,PowerPointをPDFにできる

  • 怪しいOffice文書のマクロを排除して閲覧

  • PDFで最終文書管理
  • MS Ofiiceのサーバ運用はライセンスが……
Office Server Document Converter 

axf:image-preproc

Office文書を外部グラフィック参照に指定すると、OSDCでPDF化した結果を埋め込める

  • 特定ページのみも指定可能
  • FormatterのためにPDFと元のOffice文書を二重管理しなくともよい
  • Formatterの他の機能と組み合わせることも可能！

まとめ

まとめ

Formatter V7.4はCSS機能を中心に大強化

  • フレックス・グリッドで今まで面倒だったレイアウトも簡単に
    • コンテナ内にアイテムを配置
    • フレックスはフローに沿った配置
    • グリッドは格子線で配置を指定
  • セレクタが拡充され、指定の見通しがよくなる
  • border-radiusに角の切り取り指定追加
  • OSDC連携でOffice文書を画像のように参照

  • おまけ:未紹介機能の一部

    • XML CatalogでFormatterからパス書き換えが可能に
    • CSSデバグツリーでレイアウト指定箇所のデバッグ
    • 行分割のハイフネーションを行頭側にも表示可能に
    • URLの行分割ルールをシカゴマニュアルのように変更可能に
    • ファイル添付注釈にdataスキーム指定可能に
    • トンボを画像など（ページ内容）の上に描画可能に
    • ほか