马黑黑 发表于 2022-4-18 21:32

方格稿纸预览版

<style>
.wrap {
        --fz: 16px; /* 文本大小 */
        --grid: 26px; /* 方格高宽 */
        --bg: #d6ecf0;
        margin: auto;
        width: calc(var(--grid) * 21 - (var(--grid) - var(--fz)) / 2); /* 宽度 20格 */
        border-style: solid;
        border-color: var(--bg);
        border-width: 40px 20px 40px 40px;
}
.fge {
        width: 100%;
        min-height: calc(var(--grid) * 10); /* 最少高度 10格*/
        padding-left: calc((var(--grid) - var(--fz)) / 2);
        background: var(--bg);
        background-image: linear-gradient(transparent calc(var(--grid) - 1px), red var(--grid)), linear-gradient(90deg, transparent calc(var(--grid) - 1px), red var(--grid));
        background-size: var(--grid) var(--grid);
        border-style: solid;
        border-width: 1px 0 0 1px;
        border-color: red;
        font: normal var(--fz) / var(--grid) Sans-serif;
        letter-spacing: calc(var(--grid) - var(--fz));
        word-wrap: break-word;
        word-break: break-all;
        white-space: normal;
        position: relative;
}
.fge::before { /* 遮盖最右边方格 */
        content: '';
        position: absolute;
        width: var(--grid);
        height: calc(100% + 1px);
        right: 0;
        top: -1px;
        background: var(--bg);
}
.fge p, .fge div { margin: 0; padding: 0; }
</style>
<div class="wrap">
        <div class="fge">
                <p>悟空我徒：</p>
                <p>　　见信好。</p>
                <p>　　来信已阅，未料仙界是这番纷纷扰扰，幸亏我遁世已久，已能云淡风轻，许多事情越是年纪大了，越是看不明白，有时候我一个人的时候，也是会想这样那样的问题，可惜为师资质愚钝，无法如佛祖释迦牟尼那般六年顿悟，现如今的世道，无论仙界佛界还是妖界，都不是一个乱字了得的。</p>
                <p>　　好了，师傅我要做午课了，就此搁笔。</p>
                <p>……</p>
                <p>　　　　　　　　　　　　　　　　玄奘</p>
        </div>
</div>

马黑黑 发表于 2022-4-18 21:33

代码：
<style>
.wrap {
        --fz: 16px; /* 字体大小 */
        --grid: 26px; /* 方格高宽 */
        --bg: #d6ecf0;
        margin: auto;
        width: calc(var(--grid) * 21 - (var(--grid) - var(--fz)) / 2); /* 宽度 20格 */
        border-style: solid;
        border-color: var(--bg);
        border-width: 40px 20px 40px 40px;
}
.fge {
        width: 100%;
        min-height: calc(var(--grid) * 10); /* 最少高度 10格*/
        padding-left: calc((var(--grid) - var(--fz)) / 2);
        background: var(--bg);
        background-image: linear-gradient(transparent calc(var(--grid) - 1px), red var(--grid)), linear-gradient(90deg, transparent calc(var(--grid) - 1px), red var(--grid));
        background-size: var(--grid) var(--grid);
        border-style: solid;
        border-width: 1px 0 0 1px;
        border-color: red;
        font: normal var(--fz) / var(--grid) Sans-serif;
        letter-spacing: calc(var(--grid) - var(--fz));
        word-wrap: break-word;
        word-break: break-all;
        white-space: normal;
        position: relative;
}
.fge::before { /* 遮盖最右边方格 */
        content: '';
        position: absolute;
        width: var(--grid);
        height: calc(100% + 1px);
        right: 0;
        top: -1px;
        background: var(--bg);
}
.fge p, .fge div { margin: 0; padding: 0; }
</style>
<div class="wrap">
        <div class="fge">
                <p>悟空我徒：</p>
                <p>　　见信好。</p>
                <p>　　来信已阅，未料仙界是这番纷纷扰扰，幸亏我遁世已久，已能云淡风轻，许多事情越是年纪大了，越是看不明白，有时候我一个人的时候，也是会想这样那样的问题，可惜为师资质愚钝，无法如佛祖释迦牟尼那般六年顿悟，现如今的世道，无论仙界佛界还是妖界，都不是一个乱字了得的。</p>
                <p>　　好了，师傅我要做午课了，就此搁笔。</p>
                <p>……</p>
                <p>　　　　　　　　　　　　　　　　玄奘</p>
        </div>
</div>

马黑黑 发表于 2022-4-18 21:34

对纯中文支持不错。对半角字符支持度不行。对标点符号的支持度貌似也不够。

加林森 发表于 2022-4-18 22:12

挺好的，老黑这个制作真漂亮。{:4_199:}

马黑黑 发表于 2022-4-18 22:14

加林森 发表于 2022-4-18 22:12
挺好的，老黑这个制作真漂亮。

这是主要是算法，难点在字如何在格子中居中

加林森 发表于 2022-4-18 22:17

马黑黑 发表于 2022-4-18 22:14
这是主要是算法，难点在字如何在格子中居中

是的，这个有点考算术了。

马黑黑 发表于 2022-4-18 22:19

加林森 发表于 2022-4-18 22:17
是的，这个有点考算术了。

代数、几何都有来考的

东篱闲人 发表于 2022-4-18 22:21

写信，很久远的事情了。。。。{:5_103:}

加林森 发表于 2022-4-18 22:21

马黑黑 发表于 2022-4-18 22:19
代数、几何都有来考的

说得对。

朵拉 发表于 2022-4-18 22:31

代数 几何，马老师是理科生么{:4_190:}

红影 发表于 2022-4-18 22:50

黑黑终于设计出了方格信纸，文字占位居中不错，完美{:4_187:}

马黑黑 发表于 2022-4-19 07:56

红影 发表于 2022-4-18 22:50
黑黑终于设计出了方格信纸，文字占位居中不错，完美

这是时预览版，需要遮盖右列。新改版的无需遮盖了

马黑黑 发表于 2022-4-19 07:58

加林森 发表于 2022-4-18 22:21
说得对。

队长数学不错

加林森 发表于 2022-4-19 10:22

马黑黑 发表于 2022-4-19 07:58
队长数学不错

一般一般

马黑黑 发表于 2022-4-19 12:25

加林森 发表于 2022-4-19 10:22
一般一般

可以当教授的

加林森 发表于 2022-4-19 12:38

马黑黑 发表于 2022-4-19 12:25
可以当教授的

这个不行的。

红影 发表于 2022-4-20 17:23

马黑黑 发表于 2022-4-19 07:56
这是时预览版，需要遮盖右列。新改版的无需遮盖了

嗯嗯，黑黑厉害{:4_187:}

马黑黑 发表于 2022-4-20 18:19

红影 发表于 2022-4-20 17:23
嗯嗯，黑黑厉害

{:4_191:}
页: [1]
查看完整版本: 方格稿纸预览版