豎版文字排列實現《金剛般若波羅蜜心經》

在網上找到一篇豎版金剛般若波羅蜜經，嘗試通過CSS實現接近書籍圖片原文的排版效果。

網絡中找到的截圖：

采用CSS模擬實現的效果截圖：

實現難點：

1.豎版文字的排列；

2.等距離豎格線的實現：豎格線要在容器中上下滿屏分布，恰好滿足與文字的距離。

蓮花圖片在百度圖片中找到近似圖片。

  <div class='content'>
        <div>金剛般若波羅蜜經</div>
        <div>姚秦三藏法師鳩摩羅什譯</div>
        <div class='small'>法會因由分第一</div>
        <div class='paragraph'> 如是我聞：一時，佛在舍衛國祇樹給孤獨園，與大比丘眾千二百五十人俱。爾時，世尊食時，著衣持缽，入舍衛大城乞食。於其城中次第乞已，還至本處。飯食訖，收衣缽，洗足已，敷座而坐。
        </div>
        <div class='small'>善現啟請分第二</div>
        <div class='paragraph'>
            時，長老須菩提在大眾中，即從座起，偏袒右
            <span>
                <span class='picture'><img src='./蓮花.png' /></span>
                金剛經<span>心經</span><span>五</span>
            </span>
            肩，右膝著地，合掌恭敬而白佛言：“希有，世尊！如來善護念諸菩薩，善付囑諸菩薩。世尊，善男子、善女人發阿耨多羅三藐三菩提心，雲何應住？雲何降伏其心？”</div>
        <div class='small'>大乘正宗分第三</div>
        <div class='paragraph'>佛言：“善哉！善哉！須菩提，如汝所說，如來善護念諸菩薩，善付囑諸菩薩。汝今諦聽，當為汝說。善男子、善女人發阿耨多羅三藐三菩提心，應如是住，如是降伏其心。”</div>
    </div>

　　

       * {
            border-width: 0;
        }

        .content {
            margin: 0 auto;
            font-size: 20px;
            /* width: auto; */
            height: 440px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row-reverse;
            border: 2px solid #cebf96;
            border-left-width: 1px;
            background: #fcfae1;
            font-family: '楷體';
            line-height: 1.8em;
            float: left;

        }

        .content>div {
            writing-mode: vertical-rl;
            height: 100%;
            background-image: linear-gradient(90deg, #cebf96 1px, transparent 0);
            background-size: 36px 100%;
            /* 寬度等於字體行高 */
            vertical-align: center;
            padding: 10px 0;
            box-sizing: border-box;
        }


        /* 豎線分格線采用線性漸變實現試試 */
        /* 想要分割線間隔相等，且不切割文字，需要子元素每個寬度相等 */

        .content>div:nth-child(1) {
            color: #2e609f;
            font-size: 20px;
            align-self: flex-start;
        }

        .content>div:nth-child(2) {

            font-size: 18px;
            display: flex;
            justify-content: center;
        }



        .paragraph>span {
            display: inline-block;
            height:100%;
            height: calc(100% - 50px);
            padding-top: 50px;
            font-size: 18px;
        }


        .paragraph>span :nth-child(2) {
            padding-top: 20px;

        }

        .paragraph>span :nth-child(3) {
            padding-top: 150px;

        }

        .picture img {
            width: 36px;
        }

        .content div.small {

            color: #bc4f54;
            padding-top: 50px;
            font-size: 14px;
        }