ObsidianのCSSスニペットを触ってみた

PR （16時間前）

Obsidianをアウトラインエディタとして使ってると、h5やh6まで深くなることがある。
で、h5とh6の見出しが勝手にUPPERCASEになってることに気づいた。
テーマはMinimalを使ってるんだけど、これはMinimalの仕様なのか、Obsidian本体の仕様なのか。
とにかく、入力したまま表示されてないのが気持ち悪い。

SPONSORED BY

Developer Toolで調査

⌘ + ⌥ + iでDeveloper Toolを開いて、該当箇所を確認してみる。

<span class="cm-header cm-header-5">Heading 5</span>

に、font-variant-caps: small-caps; が適用されてた。
text-transform: uppercase かと予想してたけど違った。
font-variant-caps は小文字を小型の大文字（スモールキャップス）に変換するプロパティで、完全な大文字変換とは微妙に違うらしい。
タイポグラフィ的な配慮なんだと思うけど、日本語混じりの文書でアルファベット部分だけ変換されると違和感。

普段、Reading Viewを全然使わないけど、⌘ + eで切り替えてみた。
（このショートカットすら今日知った）
Reading Viewでも同じようにスモールキャップスになってたので、こっちも直す必要がありそう。

解決策

CSSスニペットで上書きすればいい。
vault/.obsidian/snippets/customize.css というファイルを作って、以下を追加。


/* Heading levels 5 and 6 use normal font-variant-caps */
.cm-header-5,
.cm-header-6
{
  font-variant-caps: normal;
}

/* For Reading View */
.markdown-rendered h5,
.markdown-rendered h6 {
  font-variant-caps: normal;
}

.cm-header-5/6 aがエディタモード用。
.markdown-rendered h5/h6がReading View 用。

最初は .cm-header 全体に当てようかと思ったけど、不用意にスコープを大きくするのは怖いのでh5/h6 だけに絞った。

ついでに約物も調整

せっかく CSSスニペットを触ったので、約物（句読点や括弧）も調整してみた。


.cm-content,
.markdown-rendered {
  font-feature-settings: "palt" 1;
}

実際に当たっているフォントをDeveloper ToolのRendered Fontsを確認してみたら、.Hiragino Kaku Gothic Interface だった。
ドット始まりのフォントはmacOSのシステム UI用に最適化されたバリアントだけど、ちゃんと約物も詰まって表示された。

所感

ちょっと調べた感じ、Obsidianでは欧文タイポグラフィの文脈で設計されてるテーマしかなくて、日本人向けのテーマは自作するかforkするか調整するしかなさそう。
いったんfont-variant-capsとpaltの調整だけにしたけど、フォント（Noto Sans系が良いなぁ）、行間、段落余白とか、もっと調整できそう。

ただ、調整しないと使えないってなると困る（CSSスニペットはデバイス変わっても効くのかしら？）し、自作やforkするほどの情熱もない。
しばらくはこれで使ってみる。

SPONSORED BY