theme に含めるべきスタイルシートについて

[yamasy1549]

背景

現状、theme の package には用途別に複数のスタイルシートを含めている。

• theme_print.css
  • PDF の出力に使うスタイルシート
  • トンボなどを含めている
• theme_screen.css
  • ブラウザで出版物を確認する際に使うスタイルシート
  • ブラウザの横幅いっぱいにテキストが表示されることを防ぐため、max-width を設定したりしている
• theme_common.css
  • 共通のスタイルシート
  • theme_print.css と theme_screen.css では @import 'theme_common.css' している

議論すべき内容

• theme_print.css と theme_screen.css を分ける必要はあるのか？
  • theme_common.css 内で @media print {} を使えば、theme_print.css ファイルを別途作らなくて済む

参考

• theme_print.css と theme_screen.css の他に、将来的には EPUB 用のスタイルシートも作成する想定だった
  • しかし、まだそのようなスタイルシートは作られていない
  • theme package に複数のスタイルシートを含める #25

[yamasy1549]

@MurakamiShinyu @spring-raining
12月MTGで話題に上がっていた、theme_print.css と theme_screen.css を分けるかどうかについての議論用 issue を作成しました。抜けている点や間違っている点があれば教えてください 🙏

[MurakamiShinyu]

• theme_common.css 内で @media print {} を使えば、theme_print.css ファイルを別途作らなくて済む

→「theme_common.css 内で @media print {} や @media screen {} を使えば、theme_print.css と theme_screen.css を別途作らなくて済む」

ちなみに、非標準ですが @media vivliostyle {} というのも @media print {} と同様に Vivliostyle で有効になります。これは通常のブラウザからの印刷では無視されるけど Vivliostyle だけでは有効にしたいというスタイルを使うという用途のためです。また、特定のCSS機能がサポートされているかどうかでスタイルを分けるのに @supports を使うこともできます（例 @supports (float: footnote) {} で脚注が有効な場合のスタイル）。