Template talk:歌词
这是一个讨论关于Template:歌词相关更改的讨论页。
请在您发表的意见末加上四条半角波浪号( |
新模板
目前的模板在移动端等小屏幕上的效果不是很好,而且在使用注音(Ruby)或文字折行时会出现两侧不对齐的问题。在下制作了一个新的歌词模板,以下是一些简单的说明。
- 概念上参考了萌娘百科Lyrics模块的实现方式:
- 将歌词按行打断
- 在容器中重新排列
- 通过JavaScript和CSS实现,作为小工具提供给用户
- 改为双列,左列不变,2、3、4列合并至右列并通过Toggle切换
- 在小屏幕上右列将会与左列合并,也就是一行日文一行中文
- 若用户不开启小工具,仍然能够保持视觉上的大致正常
- 但是无法保持每行对齐
- 在小屏幕上右列会整个移至左列下方
- 模板代码在用户:卢卡/实验室/模板7,使用示例在用户:卢卡/实验室/效果测试
- 进行测试需要在浏览器控制台中运行脚本及注入CSS,也可将代码放入
User:<您的用户名>/common.js
和User:<您的用户名>/common.css
- JavaScript脚本在User:卢卡/common.js
- CSS在User:卢卡/common.css
- 代码分别在
/* Gadget-Lyrics */
下方
目前存在的问题:
- 仅进行了有限的测试
可能必须在Toggle小工具之前运行(更新:可以不需要,但最好这样)- 不能在列中自行使用Toggle,因此类似Type:Wild汉字-假名的Toggle需要合并
- 小工具关闭的时候,使用Toggle会移除flexbox布局,目前使用
row
样式来顶替,建议在全站CSS里加入单独的flexbox样式
--卢卡|留言 2020年12月13日 (日) 08:49 (UTC)
- 我理解您的心情。但是,当看到第一条“将歌词按行打断”,就会想到这个工程量相当大。比如,假设某个页面已经有了3种歌词译法,现在要添加第4种。想想会发生什么事?
- 但总之,如果真做出来了,更新和维护尝试可以先试试,试点再说--Great designer(讨论) 2020年12月13日 (日) 10:38 (UTC)