リンクを吹き出し化:flexbox版(未実装)

https://gyazo.com/8dc2723b1e8ff3b099562e7482863e1e

これの改良版を作りたい

色々やってようやく理想のcssを作れた

が、行単位で適用しないと様々な部分を巻き込むことがわかった

詰まってる部分

通常の行はdisplay: blockのまま、

吹き出し記法を使った行はdisplay: flexしたい

子要素が何なのか把握した上で、適当な行のspanにflexを適用しなくてはいけない

scrapbox、とにかくspanで色々なものが囲まれている

このまま実装すると折り返しが必要な通常の行にスクロールバーが現れて死ぬ

かすかな希望

jQueryの:hasフィルター使うと子要素監視できるっぽい

UserScript上でjQuery動かしたいけど、やり方わからん………

誰かがjQuery使ったuserscripts公開したら、そのタイミングで真似しようと考えている

Tampermonkeyとかを使ってマシン側で実装する？

モバイルで見れないのはつらい

共有ページを見る人にスクリプトのインストールを強要させるのもつらい

CSSのメモ

吹き出し行のindentのspan

code:style.css

display: flex;

アイコン含むspan

code:style.css

min-width: max-content;

吹き出し含むspan

code:style.css

flex: 1;

margin-left: 17px;

min-width: 0;