Zenn
組版・ドキュメンテーション勉強会Publicationへの投稿
🖼️

[CSS]HTML以外のXMLでも画像を画像として表示したい

hidaruma
2024/12/06に公開
CSS
tech

CSS組版アドベントカレンダー2024の6日目の記事です。

https://adventar.org/

題の通り組版としてはあまり関係無いかもしれませんが、Prince XMLやAntenna House CSS FormatterはXML+CSSで組版できるので、まあいいんじゃないでしょうか。

XML + CSSという界隈

XML編集の機能補助というと、一般的には開始タグを書いたら閉じタグを補完してくれたり、属性のユニークネス判定や互い違いタグの警告など、XML整形式（well-formed）に類する判定が思い浮かぶでしょう。実際その辺りはXMLが複雑化する程大切になりますが、汎用のエディタにも付属しているくらいの機能ですから、XMLの専用エディタのValueにはなりません。

商用のXMLエディタには様々に機能がありますが、代表的なものに[1]XMLにCSSを当てた状態でグラフィカルにXML編集ができる機能があります。<?xml-stylesheet?>はXSLT専用では無いってことです。

私が今適当に書いた独自のXMLには、当然ながら「どう表示されるべきか」というスタイル指定はありません。

独自のXML
<doc>
    <title>これがタイトル</title>
    <p>aaaa</p>
    <fig>
        <image href="label.jpg"></image>
    </fig>
</doc>

スタイル指定の無い状態でOxygen[2]の作者モードを開いてみるとこんな感じ。

スタイルが無いなりに頑張っていい感じにしようとしてくれています。まあ正直この状態だとテキストモードで普通に全部テキストとして見えていた方が編集し易いです[3]。

ではこれにスタイルをあてるとどうなるのか。

oxy.css
doc {
    display: block;
}

title {
    display:block;
    font-size: 80pt;
    font-weight: bold;
    text-align: center;;
}

p {
    display: block;
    margin: 1em 0;
}
p::before {
    content: "¶";
    color: red;
    margin-right: 0.5em;
}
独自のXML
<?xml-stylesheet type="text/css" href="oxy.css"?>
<doc>...</doc>

デーン！

こんな感じでHTMLみたいに要素ごとにスタイルが適用された状態で編集が可能になります。

とまあ、ここで今日の本題です。HTMLには<img>があり、Webブラウザはユーザやサイト製作者がCSSの適用などしなくてもsrc属性に指定された画像を表示してくれます。乱暴にはHTMLがそういう風に決まっているからとも言えますし、CSSがそれに合うように決まっているからとも言えます。ではHTML以外では？

独自のXML
<image href="label.jpg"></image>

で、contentプロパティにurl()で画像を表示可能、という話になります。画像を表示可能な他の方策ではbackground-imageもありますが、画像を画像として扱える方がセマンティクス的にも嬉しいですよね。このcontent: url()のやり方だと表示画像のサイズ制御などは結構アクロバティックになってしまうので、その辺りの制御が必要な場合は逆にbackground-imageの方が手厚いです。

oxy.css
image {
    display: inline;
    content: url(attr(href url));
}

終わりに

明日の担当はhidarumaさんです。重めの記事を書き始めることはできるのでしょうか。

参考資料

脚注

  1. まあOxygenとXMetaLに載っていれば代表的といっていいと思う ↩︎

  2. このOxygenはプライベートで買ったやつです ↩︎

  3. 誤り。何故ならhidarumaはスタイルがちゃんと当ててあってもテキストモードの方が編集し易いと思っているから ↩︎

組版・ドキュメンテーション勉強会
組版・ドキュメンテーション勉強会Publication

組版・ドキュメントに関連する記事を投稿するコミュニティ、を予定しています。 文章表現よりはマークアップ・文章構造・自動組版に焦点を絞れると他コミュニティと差別化できると思っていますが如何。

Discussion