css-doodle排版各行字数不同的诗词演示

马黑黑

南无月童鞋在使用css-doodle排版各行字数不同的诗词时，找到了几个非打印字符的占位符空格，用它来补齐字数。以下代码中的单元格伪元素选择器 :after {} 里content的文本，使用了非打印字符 ‍ 补齐不足八个字（含标点）的词行，缺多少个补多少个，补在标点符号的后面，有特殊排版需求的计算好后可以加在其他地方（比如下例中词的一二行）。

<css-doodle grid="8x10">
	:doodle {
		@size: 480px 600px;
		border: 1px solid tan;
		gap: 1px;
	}
	background: gray;
	color: rgb(@m3(@r(255)));
	font: bold 2em sans-serif;
	text-shadow: 1px 1px 2px #000;
	:after {
		content: @pn([&zwj;武陵春·春晚&zwj;&zwj;&zwj;[宋]李清照风住尘香花已尽，日晚倦梳头。&zwj;&zwj;物是人非事事休，欲语泪先流。&zwj;&zwj;闻说双溪春尚好，也拟泛轻舟。&zwj;&zwj;只恐双溪舴艋舟，载不动许多愁。&zwj;]);
	}
</css-doodle>

运行代码

【注意】content里的文本处理好后要写成一行，因为自然换行存在不可见的占位符，会直接影响最终排版效果。

梦缘

谢谢老师的教程分享，感谢！

马黑黑

梦缘 发表于 2023-5-21 07:15
谢谢老师的教程分享，感谢！

早

马黑黑

醉美水芙蓉 发表于 2023-5-21 06:20
黑黑老师这么晚还在做教程，老师辛苦了！

早上好

红影

嗯嗯，月儿发现的这个特别好，终于可以输入宋词了

马黑黑

红影 发表于 2023-5-21 07:43
嗯嗯，月儿发现的这个特别好，终于可以输入宋词了

现在终于理解绝句的重要：方便排版

红影

黑黑还特地把格子显示出来，这样看起来就更清楚了呢

马黑黑

红影 发表于 2023-5-21 07:46
黑黑还特地把格子显示出来，这样看起来就更清楚了呢

这是为了直观比较。不过，如果需要方格稿子样式，可以考虑一下

南无月

这个加格子的特别好，规定范围，整整齐齐

马黑黑

南无月 发表于 2023-5-21 08:09
这个加格子的特别好，规定范围，整整齐齐

早啊

小文

问好！辛苦了！

马黑黑

小文 发表于 2023-5-21 08:42
问好！辛苦了！

上午好

红影

马黑黑 发表于 2023-5-21 07:46
现在终于理解绝句的重要：方便排版

诗都是整齐的，词和曲大都是长短句

红影

马黑黑 发表于 2023-5-21 07:47
这是为了直观比较。不过，如果需要方格稿子样式，可以考虑一下

帖子里一般用不到的，有格子倒是怪了呢

南无月

马黑黑 发表于 2023-5-21 08:36
早啊

不早了。。碗上好

马黑黑

南无月 发表于 2023-5-21 18:16
不早了。。碗上好

盆里也好

马黑黑

红影 发表于 2023-5-21 13:17
诗都是整齐的，词和曲大都是长短句

感谢教导，有空我也修炼修炼词曲

红影

马黑黑 发表于 2023-5-22 07:41
感谢教导，有空我也修炼修炼词曲

玩玩就好，修炼两字用得严重了

马黑黑

红影 发表于 2023-5-22 18:34
玩玩就好，修炼两字用得严重了

按你的逻辑，一切皆修炼的