adbird(広告鳥) 備忘録

Vivaldiブラウザを縦書エディタにする方法

以前も、Vivaldi メモ機能のビジュアルモードを簡易縦書きエディタにする - adbird(広告鳥) 備忘録を書いたのだが、開発者ツール(デベロッパーツール)を使えばできることに気がついたので、LinuxWindows関係なく同じ方法でできるこちらの方法をオススメする。

開発者ツール(デベロッパーツール)でメモを縦書に

  • ツール>メモ でメモを表示。
  • 既存のメモ、または新規作成したメモ上で右クリック>開発者ツール>検証
  • 「ソース」タブ>ページ>md.cssを選択

1行目以降にある.MarkdownRenderの設定を以下のようにする。フォントなどはお好みで適宜、変更を。

.MarkdownRender {
  margin: 1rem 2rem 0rem 2rem; /*デフォルトは0 0 6px 12px*/
  padding-right: 6px;
  overflow: auto;
  scrollbar-gutter: stable;
  user-select: text;
  color: var(--colorFg);
  writing-mode: vertical-rl !important; /*縦書*/
  line-height: 2rem !important; /*行間*/
  font-family: "原ノ味明朝" !important; /*フォント*/ 
}

  • デベロッパーツールでは<指定したフォルダ>へのフルアクセスがリクエストされます。機密情報の漏えいにご注意ください。」で「許可」。

  • Ctrl + S で md.css を保存。

これ以降、メモを開いて、右クリック>開発者ツール>検証 をすると、上記で保存したmd.cssを読み込むので、すぐに縦書エディタとして使える。

問題点

段落行頭にスペースで1字下げをしても、一旦、ビジュアルモードを閉じると、1字下げが消えてしまう(しかし、テキストモードのほうではちゃんと1字下げされている)。

csstext-indent:1rem;を追加すれば、スペースを入れなくても1字下げされるからいいのだけど…。