Difference between revisions of "User:LiaMinina/Template:LyricsKai/colors/doc"

From Moegirlpedia
Jump to: navigation, search
(Created page with "This template is a derivative of the {{tl|LyricsKai}} template, mainly used for easy operation of using multiple colors to distinguish different singers in lyrics. '''Note:''...")
 
(Added more info)
 
Line 4: Line 4:
  
 
== Parameters ==
 
== Parameters ==
−
* colors: Colors for all characters, separated by the use of an intermediate <code>;</code>, supports up to 99. It supports setting an alias for a color, Automatically removes leading and trading spaces and line feeds between colors.
+
* colors: Colors for all characters, separated by the use of an intermediate <code>;</code>, supports up to 99. It supports setting an alias for a color. Automatically removes leading and trailing spaces and line feeds between colors.
−
:In addition to normal color values, there is also support for utilizing the CSS3 background-clip property and gradient color function to generate gradient colored text.
+
:In addition to normal color values, there is also support for utilizing the [https://developer.mozilla.org/en/docs/Web/CSS/background-clip/ CSS3 background-clip property] and [https://www.css88.com/book/css/vlues/image/gradient/ gradient color function] to generate gradient colored text.
−
**lg: Linear gradient. The most commonly-used gradient mode, it is written as <code>lg(parameter)</code>, this is true for all the following, in a similar fashion, for specific parameter writing, please refer to [https://developer.mozilla.org/en/docs/web/CSS/gradient/linear-gradient()/ this page], you can also refer to the gradient color write up in {{tl|Gradient Text}}.
+
**lg: Linear gradient. The most commonly-used gradient mode, it is written as <code>lg(parameter)</code>, this is true for all the following, in a similar fashion, for specific parameter writing, please refer to [https://developer.mozilla.org/en/docs/web/CSS/gradient/linear-gradient()/ this page], you can also refer to the gradient color write-up in {{tl|Gradient Text}}.
 
**rg: Radial gradient. For specific parameter usage, please refer to [https://developer.mozilla.org/en/docs/web/CSS/gradient/radial-gradient()/ this page].
 
**rg: Radial gradient. For specific parameter usage, please refer to [https://developer.mozilla.org/en/docs/web/CSS/gradient/radial-gradient()/ this page].
−
**
+
**rlg: Repeat linear gradient, for specific parameter usage, please refer to this page.
 +
**rrg: Repeated radial gradient, for specific parameter usage, lease refer to this page.
 +
**co: Alternate color, it is written as <code>co(parameter)</code>, separated by the use of an intermediate <code>,</code>, supports an unlimited number of colors.
 +
**rb: Arranges the colors vertically, written as above, supports an unlimited numebr of colors.
 +
*charas: The names of the characters, separated by the use of an intermediate <code>;</code>, these characters will be associated in the colors in the colors parameter, when the mouse hovers over the lyrics of that color, the character name will be displayed.
 +
More than one name can be added to the total number of colors, displayed text as a global color (the color is defined by the parameters lstyle as well as rstyle, or the default black color)/
 +
**This parameter is not required.
 +
 
 +
Switching:
 +
*traColors: For "on", enable token parsing in the "translate" parameter,
 +
*charaBlock: When "on", it generates a set of character color cues like {{tl|charaBlock}} on the lyrics bar.
 +
:Please read carefully the following rules for charaBlock generation and their effect on other parameters when turned on:
 +
#The generated charaBlock style is fixed, the dfault style has links.
 +
#The generated content is captured from a single color in the colors parameter, the text next to each color block corresponds to the character name in charas.
 +
#The "chorus" color block is automatically generated at the end,  the color is taken from the color attribute of the "lstyle" aprameter. The text defaults to "chorus", if additional "charas" global color display is added, then use the text of that, if the parameter groupName is set, then the text of that parameter takes precedence.
 +
#charas parameter followed by the character's name <code>@nolink)</code>, it is possible to prevent charaBlock from making automatic link additions.
 +
#charas parameter followed by the character's name <code>(@link:)</code>, you can set the link to point to.
 +
#If turning on this parameter has any effect on the use of this template, or generates incorrect information, or unnecessary disambiguation, etc., please disable this parameter and use {{tl|charaBlock}} or other templates that manually list color cues for character's lyrics.
 +
 
 +
Other parameters are the same as {{tl|LyricsKai}}.
 +
 
 +
=== About "chorus" and display of the charaBlock "chorus" color block ===
 +
 
 +
'''Chorus cue bar''': The default text is "chorus", when additional charas global colors are set to display text, then the value of that text is used, if there is a chorusName parameter, then the value of that parameter must be used.
 +
'''Chorus color block''': The chorus color block in charaBlock is only displayed when the color attribute is defined in lstyle.
 +
 
 +
The default value of the displayed text next to the chorus color block in charaBlock is "chorus", if there is an "extra charas global color display text", then the value of that text is used, if there is a groupName parameter, then the value of that parameter must be used.
 +
 
 +
The groupName parameter allows you to add styles, however, links cannot be used.
 +
 
 +
'''The short answer is: If an additional name is used in charas, then that name is the text that appears in the chorus prompt bar. If groupName is set, then charaBlock auto-generated chorus color blocks must display the text of the groupName parameter.
 +
 
 +
== Usage ==
 +
Marked with <code>@n</code>, n is the nth code in colors, if you set it to <code>colors=red; blue; #666;</code>, <code>@1</code> is red, <code>@2</code> is blue, and <code>@3</code> is <nowiki>#666</nowiki>.
 +
 
 +
Marked with <code>@[...]</code>, "..." is the alias set for the color, or the corresponding character name set in charas (bracketed text, if any), if you set:
 +
<code>
 +
colors= red = cocoa; blue = chino
 +
</code>
 +
This time, <code>@1</code> and <code>@[cocoa]</code> are both red, and <code>@2</code> and <code>[@[chino]</code> are both blue. '''This is especially effective when modifying lyrics that have too many colors, saves time looking up the color and the character it corresponds to.'''
 +
 
 +
The marker backward includes, until the end of a line, if another marker is encountered midway, abort.
 +
 
 +
If there is an <nowiki>@</nowiki> or an <nowiki>$</nowiki> in the lyrics, numbers 1-9 linked to <code>@n</code> and the "[" linked to <code>@</code>, all need to be overwritten with "<nowiki>$</nowiki>".
 +
 
 +
=== On the use of alternate colors for phonetic text ===
 +
To ensure that individual text and notes can alternate colors correctly, please use the template {{tl|rubya}} separately.
 +
 
 +
If the pronunciation cannot be reconciled with the text--Correspondence, please take care of it yourself.
 +
<pre>
 +
{{LyricsKai/colors
 +
colors= co(red, gray)
 +
|original=
 +
@1{{rubya|白、しら|樺、かば}} {{rubya|青、あお|空、ぞら}} {{rubya|南、みなみ|風、かぜ}}
 +
}}
 +
</pre>
 +
{{LyricsKai/colors
 +
|colors=co(red, gray)
 +
|original=
 +
@1{{rubya|白、しら|樺、かば}} {{rubya|青、あお|空、ぞら}} {{rubya|南、みなみ|風、かぜ}}
 +
}}
 +
 
 +
== Usage ==
 +
=== Example 1 ===
 +
<pre>
 +
{{LyricsKai/colors
 +
|colors= green; orange; #ccc; lg(left, red, blue); co(red, blue, pink); rb(red, blue)
 +
|charas= Cocoa Hotto, Chino Kafuu, Rize Tedeza, Sharo Kirima, Mocha Hotto
 +
|traColors= on
 +
|original=
 +
@1I'm the first verse              <!-- Default is included directly to the end of the line -->
 +
@2I am the @3second verse            <!-- Writing in multiple colors on a sentence -->
 +
@1I am@the @2third verse          <!-- Use a "@" symbol followed by no digits to avoid backwards inclusion -->
 +
@2I am the @10fourth verse            <!-- Use of undeclared color markers is invalid -->
 +
@1$2I am$@the fifth$$verse          <!-- Usage of abort -->
 +
 
 +
@4Here is the sixth verse~ (linear gradient)
 +
@5Here is the seventh verse with alternate colors~
 +
@6Here's the vertically-arranged eight verse~
 +
 
 +
<!-- The following is an example of writing a mix of markup and html tags for templates -->
 +
 
 +
 
 +
I really {{ruby|hate|@1like@}} you
 +
 
 +
<span style="text-shadow:2px 2px 3px #666">@2Find the @shaded area@1of this text@</span>
 +
 
 +
@3<span style="background:#eee">こんなに</span>{{ruby|好|す}}きなことは　{{ruby|内緒|ないしょ}}@なの
 +
 
 +
|translated=
 +
@2Translation is also available
 +
}}
 +
</pre>
 +
{{LyricsKai/colors
 +
 
 +
|colors= green; orange; #ccc; lg(left, red, blue); co(red, blue, pink); rb(red, blue)
 +
|charas= Cocoa Hotto; Chino Kafuu; Rize Tedeza; Syaro Kirima; Mocha Hotto
 +
|traColors= on
 +
|original=
 +
@1I am the first verse              <!-- Default is included directly to the end of the line -->
 +
@2I am the @3second verse            <!-- Writing in multipel colors on a sentence -->
 +
@1I am @the @2third verse            <!-- Use a "@" symbol followed by no digits to avoid backwards inclusion -->
 +
@2I am the @10fourth verse            <!-- Use of undeclared color markers is invalid -->
 +
 
 +
@1$2I am $@the fifth $$verse            <!-- Aborted usage -->
 +
 
 +
@4Here is the fourth verse~ (linear gradient)
 +
 
 +
@5Here is the fifth verse~
 +
 
 +
@6Here is the sixth verse with alternate colors~
 +
 
 +
<!-- The following is an example of writing a mix of markup and html tags for templates -->
 +
 
 +
I really {{ruby|hate|@1like@}} you
 +
 
 +
<span style="text-shadow:2px 2px 3px #666">@2Find the @shaded area @1of this text@</span>
 +
 
 +
@3<span style="background:#eee">こんなに</span>{{ruby|好|す}}きなことは　{{ruby|内緒|ないしょ}}@なの
 +
|translated=
 +
@2Translation is also available
 +
}}
 +
 
 +
=== Example 2 ===
 +
<pre>
 +
{{LyricsKai/colors
 +
|lstyle=color:orange
 +
|colors= red = cocoa; blue; co(red, blue); green; #A0F781;
 +
|charas= Cocoa Hotto; Chino Kafuu(@nolink); Cocoa & Chino; Noelle; Cocoa's sister(@link:Mocha Hotto); All <!-- Additional global display text added does not generate links by default -->
 +
|traColors= on
 +
|charaBlock= on
 +
|groupName= I am the chorus color block display text          <!-- If the parameter is not set, then [additional global display text added] will be displayed (that is "All" set up as above) -->
 +
|chorusName= I am the chorus cue box display text      <!-- If this parameter is not set, then [Additional global display text added] will be displayed (that is "All" set up as above") -->
 +
|original=
 +
@[cocoa]I am the first verse
 +
@[Chino Kafuu]I am the second verse
 +
@3I am the third verse
 +
I show the global colors
 +
|translated=
 +
}}
 +
</pre>
 +
 
 +
{{LyricsKai/colors
 +
|lstyle=color:orange
 +
|colors= red = cocoa; blue; co(red, blue); green; #A0F781;
 +
|charas= Cocoa Hotto; Chino Kafuu(@nolink); Cocoa & Chino; Noelle; Cocoa's sister(@link:Mocha Hotto); All  <!-- Additional global display text added does not generate links by default -->
 +
|traColors= on
 +
|charaBlock= on
 +
|groupName= I am the chorus color block display text          <!-- If this parameter is not set, then [additional global display text added] will be displayed (that is "All" set up as above) -->
 +
|chorusName= I am the chorus cue box display text      <!-- If this parameter is not set, then [Additional global display text added] will be displayed (that is "All" set up as above") -->
 +
|original=
 +
@[cocoa]I am the first verse
 +
@[Chino Kafuu]I am the second verse
 +
@3I am the third verse
 +
I show the global colors
 +
|translated=
 +
}}

Latest revision as of 22:37, 17 November 2023

This template is a derivative of the {{LyricsKai}} template, mainly used for easy operation of using multiple colors to distinguish different singers in lyrics.

Note: {{LyricsKai}} provides the text, as well as the lyrics and translation coloring, when the lyrics don't require a lot of complex variations in coloring, please use {{LyricsKai}}, to prevent special symbols in lyrics to be parsed as tokens, or cause unnecessary loss of performance.

Parameters

  • colors: Colors for all characters, separated by the use of an intermediate ;, supports up to 99. It supports setting an alias for a color. Automatically removes leading and trailing spaces and line feeds between colors.
In addition to normal color values, there is also support for utilizing the CSS3 background-clip property and gradient color function to generate gradient colored text.
    • lg: Linear gradient. The most commonly-used gradient mode, it is written as lg(parameter), this is true for all the following, in a similar fashion, for specific parameter writing, please refer to this page, you can also refer to the gradient color write-up in {{Gradient Text}}.
    • rg: Radial gradient. For specific parameter usage, please refer to this page.
    • rlg: Repeat linear gradient, for specific parameter usage, please refer to this page.
    • rrg: Repeated radial gradient, for specific parameter usage, lease refer to this page.
    • co: Alternate color, it is written as co(parameter), separated by the use of an intermediate ,, supports an unlimited number of colors.
    • rb: Arranges the colors vertically, written as above, supports an unlimited numebr of colors.
  • charas: The names of the characters, separated by the use of an intermediate ;, these characters will be associated in the colors in the colors parameter, when the mouse hovers over the lyrics of that color, the character name will be displayed.

More than one name can be added to the total number of colors, displayed text as a global color (the color is defined by the parameters lstyle as well as rstyle, or the default black color)/

    • This parameter is not required.

Switching:

  • traColors: For "on", enable token parsing in the "translate" parameter,
  • charaBlock: When "on", it generates a set of character color cues like {{charaBlock}} on the lyrics bar.
Please read carefully the following rules for charaBlock generation and their effect on other parameters when turned on:
  1. The generated charaBlock style is fixed, the dfault style has links.
  2. The generated content is captured from a single color in the colors parameter, the text next to each color block corresponds to the character name in charas.
  3. The "chorus" color block is automatically generated at the end, the color is taken from the color attribute of the "lstyle" aprameter. The text defaults to "chorus", if additional "charas" global color display is added, then use the text of that, if the parameter groupName is set, then the text of that parameter takes precedence.
  4. charas parameter followed by the character's name @nolink), it is possible to prevent charaBlock from making automatic link additions.
  5. charas parameter followed by the character's name (@link:), you can set the link to point to.
  6. If turning on this parameter has any effect on the use of this template, or generates incorrect information, or unnecessary disambiguation, etc., please disable this parameter and use {{charaBlock}} or other templates that manually list color cues for character's lyrics.

Other parameters are the same as {{LyricsKai}}.

About "chorus" and display of the charaBlock "chorus" color block

Chorus cue bar: The default text is "chorus", when additional charas global colors are set to display text, then the value of that text is used, if there is a chorusName parameter, then the value of that parameter must be used. Chorus color block: The chorus color block in charaBlock is only displayed when the color attribute is defined in lstyle.

The default value of the displayed text next to the chorus color block in charaBlock is "chorus", if there is an "extra charas global color display text", then the value of that text is used, if there is a groupName parameter, then the value of that parameter must be used.

The groupName parameter allows you to add styles, however, links cannot be used.

The short answer is: If an additional name is used in charas, then that name is the text that appears in the chorus prompt bar. If groupName is set, then charaBlock auto-generated chorus color blocks must display the text of the groupName parameter.

Usage

Marked with @n, n is the nth code in colors, if you set it to colors=red; blue; #666;, @1 is red, @2 is blue, and @3 is #666.

Marked with @[...], "..." is the alias set for the color, or the corresponding character name set in charas (bracketed text, if any), if you set: colors= red = cocoa; blue = chino This time, @1 and @[cocoa] are both red, and @2 and [@[chino] are both blue. This is especially effective when modifying lyrics that have too many colors, saves time looking up the color and the character it corresponds to.

The marker backward includes, until the end of a line, if another marker is encountered midway, abort.

If there is an @ or an $ in the lyrics, numbers 1-9 linked to @n and the "[" linked to @, all need to be overwritten with "$".

On the use of alternate colors for phonetic text

To ensure that individual text and notes can alternate colors correctly, please use the template {{rubya}} separately.

If the pronunciation cannot be reconciled with the text--Correspondence, please take care of it yourself. 

{{LyricsKai/colors
colors= co(red, gray)
|original=
@1{{rubya|白、しら|樺、かば}} {{rubya|青、あお|空、ぞら}} {{rubya|南、みなみ|風、かぜ}}
}}

Usage

Example 1

{{LyricsKai/colors
|colors= green; orange; #ccc; lg(left, red, blue); co(red, blue, pink); rb(red, blue)
|charas= Cocoa Hotto, Chino Kafuu, Rize Tedeza, Sharo Kirima, Mocha Hotto
|traColors= on
|original=
@1I'm the first verse               <!-- Default is included directly to the end of the line -->
@2I am the @3second verse            <!-- Writing in multiple colors on a sentence -->
@1I am@the @2third verse          <!-- Use a "@" symbol followed by no digits to avoid backwards inclusion -->
@2I am the @10fourth verse             <!-- Use of undeclared color markers is invalid -->
@1$2I am$@the fifth$$verse           <!-- Usage of abort -->

@4Here is the sixth verse~ (linear gradient)
@5Here is the seventh verse with alternate colors~
@6Here's the vertically-arranged eight verse~

<!-- The following is an example of writing a mix of markup and html tags for templates -->


I really {{ruby|hate|@1like@}} you

<span style="text-shadow:2px 2px 3px #666">@2Find the @shaded area@1of this text@</span>

@3<span style="background:#eee">こんなに</span>{{ruby|好|す}}きなことは　{{ruby|内緒|ないしょ}}@なの

|translated=
@2Translation is also available
}}
@1I am the first verse
@2Translation is also available
@2I am the @3second verse

@1I am @the @2third verse

@2I am the @10fourth verse



@1$2I am $@the fifth $$verse



@4Here is the fourth verse~ (linear gradient)



@5Here is the fifth verse~



@6Here is the sixth verse with alternate colors~





I really hate（@1like@） you



@2Find the @shaded area @1of this text@



@3こんなに好（す）きなことは　内緒（ないしょ）@なの

Example 2

{{LyricsKai/colors
|lstyle=color:orange
|colors= red = cocoa; blue; co(red, blue); green; #A0F781;
|charas= Cocoa Hotto; Chino Kafuu(@nolink); Cocoa & Chino; Noelle; Cocoa's sister(@link:Mocha Hotto); All <!-- Additional global display text added does not generate links by default -->
|traColors= on
|charaBlock= on
|groupName= I am the chorus color block display text          <!-- If the parameter is not set, then [additional global display text added] will be displayed (that is "All" set up as above) -->
|chorusName= I am the chorus cue box display text       <!-- If this parameter is not set, then [Additional global display text added] will be displayed (that is "All" set up as above") -->
|original=
@[cocoa]I am the first verse
@[Chino Kafuu]I am the second verse
@3I am the third verse
I show the global colors
|translated=
}}
@[cocoa]I am the first verse

@[Chino Kafuu]I am the second verse

@3I am the third verse

I show the global colors

Retrieved from "https://en.moegirl.org.cn/index.php?title=User:LiaMinina/Template:LyricsKai/colors/doc&oldid=39961"