竖版文字排列实现《金刚般若波罗蜜心经》

在网上找到一篇竖版金刚般若波罗蜜经,尝试通过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;
        }

  

posted @ 2020-11-18 17:13  请叫我二狗哥  阅读(1218)  评论(0编辑  收藏  举报