模板討論: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)