ブログ移転作業中です

Obsidainの全角スペースインデント(字下げできない)問題を何とかする

Obsidianで全角スペースを入れると、文章全体がインデントがかかってしまう問題があります。普段使う分には大して気にしないんですが、Obsidianで小説や電子書籍を執筆する人にとっては結構な死活問題だったりします。

いろいろ調べた結果、ソースモードで何とかする記事は見つかったのですが(下記サイト参照)、ライブビューの情報は載っておらず。

さすがにこれは困るよな~と、思い調べてみました。私もObsidianで小説を執筆・管理してた(過去形)ので気持ちがすごくわかるし、地味に需要ありそうだったしね(下心)

ちなみに小説+Obsidianの記事はこちらになります。暇なときに読んでいただけると幸いです。

目次

忙しい人のための結論

.cm-line:not(:has(.cm-list-1, .cm-list-2, .cm-list-3)) {
    text-indent: 0 !important;
    padding-inline-start: 0 !important;
}

Obsidianの文章class.cm-linetext-indentpadding-inline-startを0にします。こうすることで、Obsidianに全角スペースを入れてもインデントがかからなくなります。

こっから全部余談

どうしてこうなったの

.cm-lineに適応すると、リストのインデントも0になります。実はリストの文字列にも.cm-lineが適応されているのが原因。じゃあリストのclassに適応させればいいんじゃね?と思ってしまいますが、.cm-line!importを使っているんですよね……。ということで、めちゃくちゃ苦戦しました。

で、紆余曲折やった結果「リストのCSS.cm-list-1と子要素.cm-list-2.cm-list-3を使っていない.cm-lineだけにCSSを適応すればいいんじゃね?」って結論に至りました。:has().cm-list-1を探しだし、notで否定する形をとりました。ちなみに4階層目以降は「.cm-list-1」に戻るので、3まで大丈夫みたいです。

以下愚痴

そもそもですね、Obsidianのライブビューのliはこんな感じなんですよ。

  • ul/liで管理されていない
  • リスト前のバレットがbeforeで付け加えられている
  • htmlでインデントCSSを直書き

どうしてこうなった……(悲鳴)

とくにhtml直書きCSSが厄介。強力な権力を与えてるせいで、秘奥義「!important」を使うしかないんですよね……。そのせいで!importantデュエルを繰り広げないといけない羽目になるっていう。それだけは避けたかった。

で、!important乱舞を防ぐためにリスト表記のclassを調べたんですが、こっちはこっちでul/liを使ってない&text-indent封じのせいでliバレットと連動して動いてくれないんですよ。どーしてリスト1行目だけ動くのっと(涙目)

.cm-line {
    text-indent: 0 !important;
    padding-inline-start: 0 !important;
}
.mod-cm6 .HyperMD-list-line.cm-line {
    display: flex;
}

紆余曲折を経て「Flexを使ってバレットとリスト文章を並列に並ばせる」ことで解決……と思いきや。なんと、リスト内で文字装飾(強調・ハイライト・打消し線)やMarkdownリンクを使うとFlexが適応されるではないですか!!!実は文字装飾の部分が別個に.cm-lineを使ってたっていうオチ(一敗)

ここでFlexを解除すると元に戻るし、かといって文字装飾の部分だけうまく適応する方法もわからない。頭を抱えながら「特定の文字列や要素にだけ適応するおいしい話ない?」と思考放棄しかけたその時……ありました。hasnotセレクターがよぉ!!!

ということで、無事に設定(?)することができました。なんかあったらたたき起こしてください。

最後に

上記の問題で悩んでいた、小田やかた(@ottaka18)さん。私の確認ミスを毎度指摘していただき、ありがとうございました!!!というか私、しっかり動作確認しような……。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次