Template talk:LyricsKai/colors

特殊格式的歌词会受渐变色代码的影响变成乱码。

在参数colors中指定使用CSS3的background-clip属性与渐变色函数实现的样式时，特殊格式的文本，比如说使用了{{Ruby}}的文本会出现乱码。

示例
本段落中所使用的歌词，其著作权属于原著作权人，仅以介绍为目的引用。 闇（やみ）を裂（さ）き燈（とも）った激昂（げきこう）が 少女（しょうじょ）たちの渇望（かつぼう）を照（て）らす ——摘自直到将世界化作灰烬。

似乎并不是{{LyricsKai/colors}}这个模版本身的问题，而是更底层的代码……--サンムル（讨论） 2018年11月4日 (日) 00:55 (CST)

---

追加：

示例2
本段落中所使用的歌词，其著作权属于原著作权人，仅以介绍为目的引用。 あの星（ほし）を掴（つか）むのはだあれ？ 塔（とう）の頂上（ちょうじょう）で ——摘自繁星的对白。

这次是无法显示内容（在网页上框选时能看到文字。）--サンムル（讨论） 2018年11月4日 (日) 01:12 (CST)

---

目前找到的唯一解决方法：

创建一堆变色文字样式，把{{Ruby}}的两个参数分别用@n和@套起来。（工作量浩大啊！！！）
见繁星的对白#歌词
↑用这个解决方法排完上面的歌词，手指快断了。--サンムル（讨论） 2018年11月4日 (日) 02:40 (CST)

要知道前些日子大家还都在各种套{{color}}做这种效果，相比来说这已经轻松很多了...--東東君（讨论） 2018年11月4日 (日) 13:00 (CST)

---

使用Google Chrome浏览器会出现乱码情况，但使用OPPO的系统自带浏览器OPPOOSBrowser能正常显示。这样看来是不同浏览器对此的支持不同。--サンムル（讨论） 2018年11月4日 (日) 11:28 (CST)

这个是我刚才改模块了，ruby渐变色的问题已经修复，ruby交替色的问题还在调试，你看的效果不一样应该是网站缓存更新导致的--東東君（讨论） 2018年11月4日 (日) 13:00 (CST)

现在lg和co都已经正常显示。（昨天出现的与其说是乱码，倒不如说是一堆html标签。）--サンムル（讨论） 2018年11月4日 (日) 16:59 (CST)

全部修复完毕，刚才ruby的交替色显示是乱的--東東君（讨论） 2018年11月4日 (日) 17:21 (CST)

嗯，刚才的ruby交替色的顺序是“主体1→主体1标注→主体2→主体2标注→…→主体n”这样的逐字变色，现在是把ruby视为一个整体变色了。good job!--サンムル（讨论） 2018年11月4日 (日) 17:25 (CST)

可以使用模板{{rubya}}来做文字的注音，这个模板会生成一个一个单独的ruby，就不会出现ruby两个字颜色相同的情况了。--東東君（讨论） 2018年11月4日 (日) 18:08 (CST)

---

补充一下，在使用含有<span>的模板（如{{Lang}}）时，使用渐变色可能出现部分字符无法显示（颜色为透明）,如：

渐变色示例
@1{{lang|en|english}}{{ruby|无法显示的内容|无法显示的内容}}←少了一段 效果： 本段落中所使用的歌词，其著作权属于原著作权人，仅以介绍为目的引用。 english无法显示的内容（无法显示的内容）←少了一段

使用交替色甚至还能出现html标签，如：

交替色示例
@1{{lang|en|english}}啦啦啦 效果 本段落中所使用的歌词，其著作权属于原著作权人，仅以介绍为目的引用。 english啦啦啦

虽然几乎不会有人这么写就是了。一个测试工程师走进一家酒吧，要了-1杯啤酒--Nzh21(讨论) 2018年11月4日 (日) 18:32 (CST)

这不就是昨天我遇到的情况么hhh。--サンムル（讨论） 2018年11月4日 (日) 19:14 (CST)

已修复，不过歌词本身一行内要是同时有<和>还是会出问题，用html转义字符应该就能解决。话说阁下是做测试的吗？我之前去实习跟过一整个项目的黑盒测试，结果一个礼拜也找不出一个bug，最后业绩倒数第二...--東東君（讨论） 2018年11月4日 (日) 20:49 (CST)

不，我只是一个学生而已，觉得正常人可能永远也不会像上面这个例子这样写出的代码，就把测试工程的笑话师放了上来而已

另，原先在与{{Lang}}一同使用时，会出现多余的-{和}-，已修复。希望不要引入新的bug，我的水平也很菜--Nzh21(讨论) 2018年11月4日 (日) 21:52 (CST)

在变色歌词中间使用@终止样式时，会把这个@显示出来

在变色歌词中间使用@终止样式时，会把这个@显示出来。但单色歌词没有这种情况，所以判断为代码有bug。

示例

{{LyricsKai/colors |colors= co(red, gray); lg(red, gray); red; gray; |original= @1{{rubya|白、しら|樺、かば}}　{{rubya|青、あお|空、ぞら}}@　{{rubya|南、みなみ|風、かぜ}} @2{{rubya|白、しら|樺、かば}}　{{rubya|青、あお|空、ぞら}}@　{{rubya|南、みなみ|風、かぜ}} @3{{rubya|白、しら|樺、かば}}　{{rubya|青、あお|空、ぞら}}@　{{rubya|南、みなみ|風、かぜ}} @4{{rubya|白、しら|樺、かば}}　{{rubya|青、あお|空、ぞら}}@　{{rubya|南、みなみ|風、かぜ}} }} 本段落中所使用的歌词，其著作权属于原著作权人，仅以介绍为目的引用。 白（しら）樺（かば）　青（あお）空（ぞら）　南（みなみ）風（かぜ） 白（しら）樺（かば）　青（あお）空（ぞら）　南（みなみ）風（かぜ） 白（しら）樺（かば）　青（あお）空（ぞら）　南（みなみ）風（かぜ） 白（しら）樺（かば）　青（あお）空（ぞら）　南（みなみ）風（かぜ）

——以上未签名^{(注)本条留言未签名，留言后请记得用--~~~~签名！}的留言由サンムル（讨论·贡献）于2018年11月6日 (二) 14:23添加。

已修复--東東君（讨论） 2018年11月6日 (二) 14:47 (CST)

请协助检查两处歌词的错误原因

对爱情罗曼史也太早了#歌词和至今为止的概要#歌词各出现了一处错误，但是我没用过这个模板不清楚哪里有问题，请协助检查，感激不尽！——From AnnAngela the sysop (Talk) 2019年1月2日 (三) 12:04 (CST)

看了一下，在12月24日对模块:Lyrics/colors进行的更改^{(注)添加“移动端点触歌词时将在演唱者所属歌词的开始处显示用于提示演唱者的信息框”的功能}后，才出现的问题。

可能是{{LyricsKai}}对长歌词的效率比较低，以至今为止的概要#歌词为例，其大量使用了交替色，这会导致一句短的歌词会变成一段很长的html代码，12月24日的更改后，这段代码有又长了不少，这应该就是这个问题的直接原因。（12月24日之前的版本好像没有问题）

例子

原本的歌词： @6みゃーみゃーみゃんこlogyで人类みゃ？ とれびあーん！ 上色之后： <span class="LyricsColors-line-sentence" title="凉宫春日+长门有希+朝比奈实玖瑠" ><span style="color:red">み</span><span style="color:skyblue">ゃ</span><span style="color:orange">ー</span><span style="color:red">み</span><span style="color:skyblue">ゃ</span><span style="color:orange">ー</span><span style="color:red">み</span><span style="color:skyblue">ゃ</span><span style="color:orange">ん</span><span style="color:red">こ</span><span style="color:skyblue">l</span><span style="color:orange">o</span><span style="color:red">g</span><span style="color:skyblue">y</span><span style="color:orange">で</span><span style="color:red">人</span><span style="color:skyblue">类</span><span style="color:orange">み</span><span style="color:red">ゃ</span><span style="color:skyblue">？</span> <span style="color:orange">と</span><span style="color:red">れ</span><span style="color:skyblue">び</span><span style="color:orange">あ</span><span style="color:red">ー</span><span style="color:skyblue">ん</span><span style="color:orange">！</span><div class="LyricsColors-line-titlebox mobileonly" style="-webkit-text-fill-color:black !important;" data-isParsed="true"><span style="color:red">凉</span><span style="color:skyblue">宫</span><span style="color:orange">春</span><span style="color:red">日</span><span style="color:skyblue">+</span><span style="color:orange">长</span><span style="color:red">门</span><span style="color:skyblue">有</span><span style="color:orange">希</span><span style="color:red">+</span><span style="color:skyblue">朝</span><span style="color:orange">比</span><span style="color:red">奈</span><span style="color:skyblue">实</span><span style="color:orange">玖</span><span style="color:red">瑠</span></div></span>

但是我对着模块:Lyrics看了半天没觉得什么的地方效率低啊。--Nzh21（讨论） 2019年1月2日 (三) 13:35 (CST)

可能是处理渐变和交替色的时候，把新加的提示框代码也都给处理了一遍，我也没管直接写了个css给覆盖了--東東君（讨论） 2019年1月2日 (三) 13:44 (CST)

应该和这个没什么关系，我把提示框删了之后（特殊:固定链接/2277918），Lua使用时间依然将近6秒。--Nzh21（讨论） 2019年1月2日 (三) 13:52 (CST)

把渐变交替色的提示框多余样式去掉了，类名换成了单个字母，至今为止的概要这种极端例子（交替色+长歌词+两列使用）目前是6.3秒，应该没问题了（大概）。真正解决的话在模块:Lyrics里先分句再拿colors模块处理应该可以。--東東君（讨论） 2019年1月2日 (三) 15:33 (CST)

完成 使用模块:var-array中转，跳过了Lyrics中的分句--東東君（讨论） 2019年1月2日 (三) 19:21 (CST)

在手机端查看，某些情况下会出现一行歌词过长，而写在第二行的部分无法显示的情况

在编辑Jump up HIGH!!时，发现：在iOS手机端网页版查看，在使用渐变色的情况下，会出现“一行歌词过长，而写在第二行的部分显示为空白”的情况。

安卓端、Windows电脑端都不会出现这种情况。

本段落中所使用的歌词，其著作权属于原著作权人，仅以介绍为目的引用。

1 この歌詞は長すぎるでしょう？（こちらの歌詞はlstyleのスタイルを用いてます）

这歌词也太长了吧？（这行歌词使用的是lstyle）

2 この歌詞は長すぎるでしょう？（こちらの歌詞はグラデーションカラーを用いてます）

这歌词也太长了吧？（这行歌词使用的是渐变色）

3 この歌詞は長すぎるでしょう？（こちらの歌詞はlstyleとグラデーションカラーを用いてます）

这歌词也太长了吧？（这行歌词使用的是lstyle和渐变色）

4 この歌詞は長すぎるでしょう？（こちらの歌詞はグラデーションカラーとlstyleを用いてます）

这歌词也太长了吧？（这行歌词使用的是渐变色和lstyle）

上面的2、3都出现了这种情况，只显示一行，第二行开始留出了位置，但显示均为空白。第二行的字可以选中。— 葫芦又留言 2019年6月17日 (一) 00:52 (CST)

没有ios设备无法测试。——From AnnAngela the Temporary Bureaucrat (Talk) 2019年6月17日 (一) 23:07 (CST)

目前如果不给颜色的话，没颜色的翻译部分title会默认合唱

例子星之回响，所以能不能加上一个关闭的参数。—以上已签名^[注]的留言由 RabBIThole（讨论·贡献）添加于 2020年8月7日 (五) 20:54 (CST)

加是能加，但为什么不选择设置文字而是要去掉呢？--東東君（讨论） 2020年8月7日 (五) 23:06 (CST)

@東東君 麻烦，而且你要让我给星之回响的颜色再加一遍，我想死。 —以上已签名^[注]的留言由 RabBIThole（讨论·贡献）添加于 2020年8月9日 (日) 18:19 (CST)

我把星之回响条目里的|traColors= on移除了，现在把鼠标移动到右侧文本已不会显示“合唱”字样--Lyhic（讨论） 2020年8月9日 (日) 19:00 (CST)

才注意到说的是翻译部分...--東東君（讨论） 2020年8月9日 (日) 19:24 (CST)

@Lyhic原来如此 —以上已签名^[注]的留言由 RabBIThole（讨论·贡献）添加于 2020年8月9日 (日) 20:25 (CST)

请求协助：在charablock一栏实现Template:CharaBlock新增的功能

妈蛋撑不住了狗命要紧先睡了……需求结合歌曲条目：新增的图片默认链接到角色条目，插入图片大小可以指定但一定要统一，图片可以选择居中或者和后面的文字下方对齐这样（有条件的话也可以选择文字在图片正下方居中）。应该不难……Hamon002（讨论） 2021年2月15日 (一) 04:56 (CST)

这种使用图片的情况感觉不使用charaBlock参数，单独用{{CharaBlock}}比较好吧--東東君（讨论） 2021年2月16日 (二) 19:53 (CST)

歌词中对ruby使用径向渐变样式会使字重变大

示例
本段落中所使用的歌词，其著作权属于原著作权人，仅以介绍为目的引用。 この旅路（たびじ）のチケットには 期限（きげん）はないから 行（い）こう どこまでも 出会（であ）いの刻（とき） 手（て）に入（い）れたよ 君（きみ）と同（おな）じ地図（ちず）を ようこそ キラめきまで 降（お）り立（た）つ 君（きみ）に会（あ）えた カラフル 魔法（まほう）かけて 悲（かな）しい世界（せかい） 塗（ぬ）り替（か）えるね ——摘自青春Traveler。

很明显，仅当使用linear-gradient时，带ruby的文字显示的字重比其他的文字要大得多。经过HTML检查，发现 外侧span > ruby > rb 三层元素均被设置了径向渐变的样式，生成了三层文字的描边，使得字重变大。--サンムル（讨论） 2021年7月21日 (三) 11:58 (CST)

@サンムル，Func 这是部分浏览器上必要的牺牲，否则Safari上<rb>部分无填充颜色。——移动版用户 Bhsd 2021年7月22日 (四) 20:10 (CST)

找到了一个纯CSS的hack。——移动版用户 Bhsd 2021年7月23日 (五) 02:23 (CST)

@サンムル 大佬提完問題人就消失不合適吧？⋯⋯——移动版用户 Bhsd 2021年8月2日 (一) 09:51 (CST)

人没消失。这问题是偶发的设备特定问题，等我再一次使用该设备时模板模块已被更改数次了，问题也消失了。既然问题被解决了，那么就没有将讨论展开下去的必要了不是吗？--サンムル（讨论） 2021年8月2日 (一) 10:13 (CST)

@サンムル 普通用户在讨论版求助后至少也会回一下问题有没有得到解决（并表示感谢），难道这种事不该有个事后反馈吗？——移动版用户 Bhsd 2021年8月2日 (一) 11:13 (CST)

已解决 目前在产生问题的设备上测试已无显示字重差别的问题，感谢@Bhsd大佬的帮助。--サンムル（讨论） 2021年8月2日 (一) 11:24 (CST)