見出し画像

【Asciidoc】TIP拾い ー 文字の色を変える・・・ ー

今日もTIP拾いの一環。
余り需要はないと思うのだが「文字の色」を変える方法

まず、多くの記事に紹介されている今は非推奨の方法。

* [red]#赤くする#
* [blue]#青くする#

推奨されている方法。CSSクラスの指定名ではなくクラス定義名で、

* [.red]#赤くする#
* [.blue]#青くする#

まず、「HTML」で表示

フォントに色をつける

何方も思った通り表現されています。HTMLソースは

<!-- 以前略 -->

.blue{color:#0000bf}
.blue-background{background:#0000fa}
.red{color:#bf0000}
.red-background{background:#fa0000}

<!-- 途中略 -->

<ul>
<li>
<p><span class="red">赤くする</span></p>
</li>
<li>
<p><span class="blue">青くする</span></p>
</li>
<li>
<p><span class="red">赤くする</span></p>
</li>
<li>
<p><span class="blue">青くする</span></p>
</li>
</ul>

<!-- 以後略 -->

「PDF」だと

PDF変換した場合

何方も上手く色が変わっていません。
だから、「PDFを作るのは避けよう」という人がいるのも解ります。
 でも、諦めない!
以前書いた記事の「【Asciidoc】PDFに変換する ー テンプレートを作る(後半) ー」のテンプレートに「カスタム役割ロール」を追加します。

role:
  red:
    font-color: #FA0000
  blue:
    font-color: #0000BF

これを「my-theme.yml」に追記して

:scripts: cjk
:pdf-theme: ./themes/my-theme.yml
:pdf-fontsdir: ./fonts;GEM_FONTS_DIR

* [red]#赤くする#
* [blue]#青くする#


* [.red]#赤くする#
* [.blue]#青くする#

をPDF変換すると

ロールを追加したPDF

ちゃんと色付きになっています。

自分なりに考察すると、
「Asciidocter-PDF」の作者は

  • 「PDFは(白黒)印刷するための物」と考えている

  • 「色の変更」等の特殊表現は「カスタム役割ロール」で補えば良い

と考えているのでしょう。
で「Asciidocter」プロジェクトとしてはCSSクラスを割り当てる場合、CSSの(ドット付き)クラス定義名を利用したほうが混同しにくいし、また、其の方が編集者の表現が広がるし、自分たちの個別調整が少なくなると考えたのでしょう。
現在、後方互換性を保つため「ドットなし修飾クラス指定名」も利用できますが、今後、処理されなくなる可能性も在るので
 「ドット付き修飾クラス定義名」
を利用しましょう。また、自分のテーマファイルには必要な
 「カスタム役割ロール
を追加していきましょう。
・・・テーマファイルがカラー用とかA5版用とか色々増えそうですが・・・
(「extends」パラメータを駆使して階層化を上手くやれればいいのだけれど研究中。。。)

また、自分たちが作った修飾クラスは纏めて「チートシート」にしておきましょう。
書き手ユーザーは多分、其れがないと・・・。
「Asciidoc」を広める道は遠い。。。

如何でしょうか。…ではまた。

当Noteは下記の「AsciiDoc Language Documentation」の文法に従っています。


いいなと思ったら応援しよう!