Template talk:歌词

来自神奇宝贝百科
433Chingling.png 这是一个讨论关于Template:歌词相关更改的讨论页。

请在您发表的意见末加上四条半角波浪号(~~~~)以添上附有时间的签名
添加新议题请使用上方的“添加话题”按钮。
新的发言置于旧的下方(于同一段落中),而新议题置于页面底部。
请勿随意更改或删除他人的留言,除非留言不符讨论礼仪或造成人身攻击。

新模板

目前的模板在移动端等小屏幕上的效果不是很好,而且在使用注音(Ruby)或文字折行时会出现两侧不对齐的问题。在下制作了一个新的歌词模板,以下是一些简单的说明。

  • 概念上参考了萌娘百科Lyrics模块的实现方式:
    1. 将歌词按行打断
    2. 在容器中重新排列
  • 通过JavaScript和CSS实现,作为小工具提供给用户
  • 改为双列,左列不变,2、3、4列合并至右列并通过Toggle切换
  • 在小屏幕上右列将会与左列合并,也就是一行日文一行中文
  • 若用户不开启小工具,仍然能够保持视觉上的大致正常
    • 但是无法保持每行对齐
    • 在小屏幕上右列会整个移至左列下方

目前存在的问题:

  • 仅进行了有限的测试
  • 可能必须在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)
打断和重新排列是通过JavaScript在用户浏览器中自动处理的,不需要修改歌词。迁移到新模板只需要合并上述类似Type:Wild汉字-假名的Toggle以及最多替换几个非关键参数(s12换成coloroutlineborder等,纯粹是个人习惯)。--卢卡|留言 2020年12月13日 (日) 10:49 (UTC)
已增加在运行结束时根据需要重新运行Toggle的功能,会造成一个嵌套的anchor元素,暂未发现其它影响。 --卢卡|留言 2020年12月14日 (一) 16:24 (UTC)
已修正,重新运行Toggle前会还原Toggler。 --卢卡|留言 2020年12月15日 (二) 11:28 (UTC)
已修正行数不一致时无法显示歌词的问题。 --卢卡|留言 2020年12月22日 (二) 09:18 (UTC)