如何用帖子电饭煲制作竖排歌词

马黑黑

帖子电饭煲不直接支持竖排LRC歌词设置，要轻松实现歌词竖排，需要两个知识储备：

1️⃣CSS如何实现文本竖排

核心是 writing-mode 属性，值设为 vertical-rl 或 vertical-lr 就可以实现文本竖排，其中的 vertical 意为“垂直”，r 为“right 右”、l 为“left 左”之意，rl 表示自右向左、lr 是自左向右排列多行文本。另有 text-orientation 属性可以用了精确设置字符方向，值有 upright （直立）、 mixed （默认，西文平躺）和 sideways （字符侧向排列）可选。

如此，仅需设法设置 writing-mode 属性，需要时，辅以 text-orientation 属性控制字符方向即可实现歌词竖排。

2️⃣了解配套CSS文档LRC歌词标签的相关变量

这里所讨论的 .lrc {} 选择器都基于与歌词排版相关的内容。

第一个是 --rect: 0 100% 0 0; ，它用来设定歌词同步的走向，四个值分别指向“上右下左”分量，歌词同步默认走向是从左到右，所有右边分量值设为 100%，那么，竖排歌词应从上到下的同步走向，下分量值即第三个值设为100%、其余的设置为 0 就好。 第二个是 --border: 0 0 1px 0; ，这是边框设置，不想要同步边框设为 --border: 0; 即可，想要的话，也是按照“上右下左”的次序设置 1px 的位置，想要粗一点的1改为2或3都行。

如果启用歌词淡入效果，那么，不用去管上面的两个CSS变量，不需要，只需简单设置歌词竖排就可以了。

❓在哪儿加入上述设置

以下方法任选其一（不要重复操作）：

第一种：在电饭煲的LRC歌词子页面。在“定位+其它设置”小文本框添加如下代码（可根据实际需要进行增删，原有的其它代码保留）：

writing-mode: vertical-rl; text-orientation: upright; --rect: 0 0 100% 0; --border: 0;

第二种：在“帖子容器”子页面添加 .lrc 选择器：

.lrc { writing-mode: vertical-rl; text-orientation: upright; --rect: 0 0 100% 0; --border: 0; }

第三种：在生成的帖子代码子页面将上述代码添加到合适的地方。这个操作需要一点阅读和操作代码的能力，零代码基础的朋友也可以尝试，试几次就会了，尝试的方法是先通过子页面设置完成相关功能，然后切换到代码页面观察、研究，看看子页面的设置被组织成什么代码、放在什么地方。

【说明】本文所介绍的竖排歌词设置方法，均适用于帖子电饭煲 ES 版、高能版。

马黑黑

演示帖：外滩十八号 - 音乐沙龙 - 花潮论坛 - Powered by Discuz!

梦江南

黑黑老师正是及时雨啊，我是想根据帖子画面把歌词制作竖排，这下有代码了。谢谢！

红影

“以下方法任选其一（不要重复操作）”
这个提醒非常重要，讲解十分细致，辛苦黑黑

霜染枫丹

百花齐放用在马老师的教程中恰如其分，我一上午没上来就是又一朵绽放的灿烂！！这个需要抱走的，谢谢马老师