読書アシストの実装方法について考えてみるはじめに まず、読書アシストについては、こちらを参照してください。 この読書アシストの「4. 冒頭文字を階段状に字下げする表示方式」をどのように実装するのかについて考えてみました。 画像は読書アシストより レギュレーション こちらのサンプルを確認するとわかるように、 段落 (HTML でいうと p タグ) ごとに字下げはクリアされ 1行ずつ字下げが増えていき 7行ぐらい (作品によっては9行のものもある) で字下げが2文字ぐらいに戻り 以降5行ごとぐらいに字下げが2文字ぐらいに戻る。 図にすると以下のような感じ。 実装 現時点で以下の値が設定できると良さそうな気がします。 最大字下げ 最初の字下げ行数 続きの字下げ行数 これらを CSS カスタムプロパティとして以下のように設定しておきます。 :root { --assist-indent-max: 7em; /* 最大字下げ */ --a
