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

纯CSS方格稿纸

<style>
.wrap {
        --fz: 16px; /* 文本大小 */
        --grid: 26px; /* 方格高宽 */
        --bg: #efeee1; /* 背景色 */
        --line: #5d6146; /* 格子线条颜色 */
        margin: auto;
        width: calc(var(--grid) * 24 - (var(--grid) - var(--fz)) / 2); /* 宽度 20格 */
        border-style: solid;
        border-color: var(--bg);
        border-width: 40px calc(40px + calc((var(--grid) - var(--fz)) / 2)) 40px 40px;
}
.fge {
        width: calc(100% + calc((var(--grid) - var(--fz)) / 2));
        min-height: calc(var(--grid) * 10); /* 最少高度 10格*/
        background: var(--bg);
        background-image: linear-gradient(transparent calc(var(--grid) - 1px), var(--line) var(--grid)), linear-gradient(90deg, transparent calc(var(--grid) - 1px), var(--line) var(--grid));
        background-size: var(--grid) var(--grid);
        border-style: solid;
        border-width: 1px 0 0 1px;
        border-color: var(--line);
        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 p, .fge div { position: relative; margin: 0; padding: 0; left: calc((var(--grid) - var(--fz)) / 2);}
</style>
<div class="wrap">
        <div class="fge">
<p>　　六国论——苏辙</p>
<p>&nbsp;</p>
<p>尝读六国世家，窃怪天下之诸侯，以五倍之地，十倍之众，发愤西向，以攻山西千里之秦，而不免于死亡。常为之深思远虑，以为必有可以自安之计，盖未尝不咎其当时之士虑患之疏，而见利之浅，且不知天下之势也。</p>
<p>夫秦之所以与诸侯争天下者，不在齐楚燕赵也，而在韩魏之郊；诸侯之所与秦争天下者，不在齐楚燕赵也，而在韩魏之野。秦之有韩魏，譬如人之有腹心之疾也。韩魏塞秦之冲，而弊山东之诸侯，故夫天下之所重者，莫如韩魏也。昔者范雎用于秦而收韩，商鞅用于秦而收魏，昭王未得韩魏之心，而出兵以攻齐之刚寿，而范雎以为忧。然则秦之所忌者可以见矣。</p>
<p>秦之用兵于燕赵，秦之危事也。越韩过魏，而攻人之国都，燕赵拒之于前，而韩魏乘之于后，此危道也。而秦之攻燕赵，未尝有韩魏之忧，则韩魏之附秦故也。夫韩魏诸侯之障，而使秦人得出入于其间，此岂知天下之势邪！委区区之韩魏，以当强虎狼之秦，彼安得不折而入于秦哉？韩魏折而入于秦，然后秦人得通其兵于东诸侯，而使天下偏受其祸。</p>
<p>夫韩魏不能独当秦，而天下之诸侯，藉之以蔽其西，故莫如厚韩亲魏以摈秦。秦人不敢逾韩魏以窥齐楚燕赵之国，而齐楚燕赵之国，因得以自完于其间矣。以四无事之国，佐当寇之韩魏，使韩魏无东顾之忧，而为天下出身以当秦兵；以二国委秦，而四国休息于内，以阴助其急，若此，可以应夫无穷，彼秦者将何为哉！不知出此，而乃贪疆埸尺寸之利，背盟败约，以自相屠灭，秦兵未出，而天下诸侯已自困矣。至于秦人得伺其隙以取其国，可不悲哉！</p>
        </div>
</div>

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

代码：
<style>
.wrap {
        --fz: 16px; /* 文本大小 */
        --grid: 26px; /* 方格高宽 */
        --bg: #efeee1; /* 背景色 */
        --line: #5d6146; /* 格子线条颜色 */
        margin: auto;
        width: calc(var(--grid) * 24 - (var(--grid) - var(--fz)) / 2); /* 宽度 20格 */
        border-style: solid;
        border-color: var(--bg);
        border-width: 40px calc(40px + calc((var(--grid) - var(--fz)) / 2)) 40px 40px;
}
.fge {
        width: calc(100% + calc((var(--grid) - var(--fz)) / 2));
        min-height: calc(var(--grid) * 10); /* 最少高度 10格*/
        background: var(--bg);
        background-image: linear-gradient(transparent calc(var(--grid) - 1px), var(--line) var(--grid)), linear-gradient(90deg, transparent calc(var(--grid) - 1px), var(--line) var(--grid));
        background-size: var(--grid) var(--grid);
        border-style: solid;
        border-width: 1px 0 0 1px;
        border-color: var(--line);
        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 p, .fge div { position: relative; margin: 0; padding: 0; left: calc((var(--grid) - var(--fz)) / 2);}
</style>
<div class="wrap">
        <div class="fge">
<p>　　六国论——苏辙</p>
<p> </p>
<p>尝读六国世家，窃怪天下之诸侯，以五倍之地，十倍之众，发愤西向，以攻山西千里之秦，而不免于死亡。常为之深思远虑，以为必有可以自安之计，盖未尝不咎其当时之士虑患之疏，而见利之浅，且不知天下之势也。</p>
<p>夫秦之所以与诸侯争天下者，不在齐楚燕赵也，而在韩魏之郊；诸侯之所与秦争天下者，不在齐楚燕赵也，而在韩魏之野。秦之有韩魏，譬如人之有腹心之疾也。韩魏塞秦之冲，而弊山东之诸侯，故夫天下之所重者，莫如韩魏也。昔者范雎用于秦而收韩，商鞅用于秦而收魏，昭王未得韩魏之心，而出兵以攻齐之刚寿，而范雎以为忧。然则秦之所忌者可以见矣。</p>
<p>秦之用兵于燕赵，秦之危事也。越韩过魏，而攻人之国都，燕赵拒之于前，而韩魏乘之于后，此危道也。而秦之攻燕赵，未尝有韩魏之忧，则韩魏之附秦故也。夫韩魏诸侯之障，而使秦人得出入于其间，此岂知天下之势邪！委区区之韩魏，以当强虎狼之秦，彼安得不折而入于秦哉？韩魏折而入于秦，然后秦人得通其兵于东诸侯，而使天下偏受其祸。</p>
<p>夫韩魏不能独当秦，而天下之诸侯，藉之以蔽其西，故莫如厚韩亲魏以摈秦。秦人不敢逾韩魏以窥齐楚燕赵之国，而齐楚燕赵之国，因得以自完于其间矣。以四无事之国，佐当寇之韩魏，使韩魏无东顾之忧，而为天下出身以当秦兵；以二国委秦，而四国休息于内，以阴助其急，若此，可以应夫无穷，彼秦者将何为哉！不知出此，而乃贪疆埸尺寸之利，背盟败约，以自相屠灭，秦兵未出，而天下诸侯已自困矣。至于秦人得伺其隙以取其国，可不悲哉！</p>
        </div>
</div>

红影 发表于 2022-4-18 23:24

这个色彩设计得漂亮，非常柔和的色调。文字的排布设计也很合适，真棒{:4_199:}

马黑黑 发表于 2022-4-18 23:25

本帖最后由 马黑黑 于 2022-4-18 23:30 编辑

30行左右的CSS代码，内含玄机：

一、方格是用线性渐变背景模拟出来的：

      background-image: linear-gradient(transparent calc(var(--grid) - 1px), var(--line) var(--grid)), linear-gradient(90deg, transparent calc(var(--grid) - 1px), var(--line) var(--grid));
      background-size: var(--grid) var(--grid);

这里面充满着变量，具体化之后或许好理解一点：

      background-image: linear-gradient(transparent 25px, red 26px), linear-gradient(90deg, transparent 25px, red 26px);
      background-size: 26px 26px;

注意红色和紫红色的值，它们是构造方格的关键。当然，如果你尝试了，这样的方格是不闭合的，所以后续通过border属性补了上边线和左边线。

二、文字在格子中居中的原理：

一是行高，行高设为与格子高度一致；

二是标签<p>和<div>相对定位并通过严格计算右移一定距离（首先每行的第一个格子字要居中——火车跑得快全靠车头带的原理）。计算方法是，行高（或格子宽高尺寸）减去字体大小再除以2；

三是字间距，算法是，行高减去字体大小。字体的大小（font-size）与它所占的实际宽度几乎没有误差，这是如此计算的依据；

方格稿纸对纯全角的字符支持没有问题，但对半角字符无能为力，另外，任意一行的最后一个字如果紧接着是标点符号，该字会自动下移一行，这意味着会有一个格子空着。这与排版设定有关，在web里不能像word那样去挤压或松开行内空间以达到两端对齐的目的。

三、稿纸的尺寸是动态的

稿纸的最终尺寸依赖于每行多少个格子和格子大小的设定，高度有最低高度，文字流多出来后稿子的高度会自动增加。

四、其它相关算法都很精密，丝丝入扣，这些都存在于对变量的使用中。

缺漏、错误在所难免，从简单测试情况看，暂且可以一用。

红影 发表于 2022-4-18 23:25

黑黑想做什么总能做出来，真棒{:4_187:}

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

红影 发表于 2022-4-18 23:25
黑黑想做什么总能做出来，真棒

原理在那里，动动脑子，能做就做，做不了就放弃

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

来学习

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

加林森 发表于 2022-4-19 12:15
来学习

{:4_190:}

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

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


谢茶

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

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

不客气，慢喝

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

马黑黑 发表于 2022-4-19 12:38
不客气，慢喝

好的好的。

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

马黑黑 发表于 2022-4-19 07:55
原理在那里，动动脑子，能做就做，做不了就放弃

黑黑的脑筋动得很好{:4_199:}

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

红影 发表于 2022-4-20 17:22
黑黑的脑筋动得很好

过得去，智商不是太低的吧

红影 发表于 2022-4-20 20:09

马黑黑 发表于 2022-4-20 18:20
过得去，智商不是太低的吧

至少130级别的{:4_173:}

马黑黑 发表于 2022-4-20 20:11

红影 发表于 2022-4-20 20:09
至少130级别的

去掉前面的数字
页: [1]
查看完整版本: 纯CSS方格稿纸