纯CSS方格稿纸

马黑黑

　　六国论——苏辙

 

尝读六国世家，窃怪天下之诸侯，以五倍之地，十倍之众，发愤西向，以攻山西千里之秦，而不免于死亡。常为之深思远虑，以为必有可以自安之计，盖未尝不咎其当时之士虑患之疏，而见利之浅，且不知天下之势也。

夫秦之所以与诸侯争天下者，不在齐楚燕赵也，而在韩魏之郊；诸侯之所与秦争天下者，不在齐楚燕赵也，而在韩魏之野。秦之有韩魏，譬如人之有腹心之疾也。韩魏塞秦之冲，而弊山东之诸侯，故夫天下之所重者，莫如韩魏也。昔者范雎用于秦而收韩，商鞅用于秦而收魏，昭王未得韩魏之心，而出兵以攻齐之刚寿，而范雎以为忧。然则秦之所忌者可以见矣。

秦之用兵于燕赵，秦之危事也。越韩过魏，而攻人之国都，燕赵拒之于前，而韩魏乘之于后，此危道也。而秦之攻燕赵，未尝有韩魏之忧，则韩魏之附秦故也。夫韩魏诸侯之障，而使秦人得出入于其间，此岂知天下之势邪！委区区之韩魏，以当强虎狼之秦，彼安得不折而入于秦哉？韩魏折而入于秦，然后秦人得通其兵于东诸侯，而使天下偏受其祸。

夫韩魏不能独当秦，而天下之诸侯，藉之以蔽其西，故莫如厚韩亲魏以摈秦。秦人不敢逾韩魏以窥齐楚燕赵之国，而齐楚燕赵之国，因得以自完于其间矣。以四无事之国，佐当寇之韩魏，使韩魏无东顾之忧，而为天下出身以当秦兵；以二国委秦，而四国休息于内，以阴助其急，若此，可以应夫无穷，彼秦者将何为哉！不知出此，而乃贪疆埸尺寸之利，背盟败约，以自相屠灭，秦兵未出，而天下诸侯已自困矣。至于秦人得伺其隙以取其国，可不悲哉！

马黑黑

代码：

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

复制代码

红影

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

马黑黑

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
黑黑想做什么总能做出来，真棒

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

加林森

来学习

马黑黑

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

加林森

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

谢茶

马黑黑

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

不客气，慢喝

加林森

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

好的好的。

红影

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

黑黑的脑筋动得很好

马黑黑

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

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

红影

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

至少130级别的

马黑黑

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

去掉前面的数字