查看“Template:Ruby/doc”的源代码

This template allows you to mark a paragraph of small characters on a specific text, which is often used for Chinese phonetic transcription, Japanese Kanji to mark hiragana, Korean characters to mark Chinese proverbs, and so on, and can also be used to speak in {{ruby|reverse|joke}}.

== Usage ==
<code><nowiki>{{Ruby|characters|small characters above|</nowiki><del><nowiki>Language label of text|Phonetic Language Label</nowiki></del><nowiki>}}</nowiki></code>

== Usage Examples ==
{| class="wikitable"
|-
! Code !! Effect !! Explain
|-
|<code><nowiki>{{Ruby|注|zhù}}{{Ruby|音|yīn}}</nowiki></code> || {{Ruby|注|zhù}}{{Ruby|音|yīn}} || Add phonetic transcription to Chinese.
|-
|<code><nowiki>{{Ruby|運命|さだめ}}</nowiki></code> || {{Ruby|運命|さだめ}} || Japanese Kanji to mark hiragana.
|-
|<code><nowiki>{{Ruby|超电磁炮|レールガン}}</nowiki></code> || {{Ruby|超电磁炮|レールガン}} || Translate words from another language.
|-
|<code><nowiki>{{Ruby|충|忠}}！{{Ruby|성|誠}}！</nowiki></code> || {{Ruby|충|忠}}！{{Ruby|성|誠}}！|| Korean mark 한언.
|-
|<code><nowiki>A bicycle can't stand on it's own because it is {{Ruby|two-tyredmeet|too tired}}.</nowiki></code> || A bicycle can't stand on it's own because it is {{Ruby|two-tyredmeet|too tired}}. || Play a little joke.
|}

== Be careful ==
=== Template itself ===
* This template cannot be nested repeatedly for itself, which will cause errors.
* Please try to avoid using this template to typeset long sentence content and translation, and use the shortest unit (such as word or syllable) for typesetting when annotating words. Too long typesetting may lead to accidents such as the narrow screen device cannot change lines; This template is not specially designed for translation content. Where the original text and translation need to appear together, please consider directly using brackets to indicate.
<div style="overflow-x:auto;"><div style="min-height:20px; padding:19px; border:1px solid #e3e3e3; border-radius:4px; -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05); background-color:#f2dede; border-color:#ebccd1; color:#a94442;">Please{{ruby|don't don't don't don't don't don't don't don't|don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't don't}} compose type like this.</div></div>

=== Browser ===
At present, only some browsers support the style of this template. Please pay attention to the compatibility of your browser before use.
* If you see smaller text above the text, your browser is compatible with the style.
* Firefox 34~37 can open the<code>about:config</code>page, and change the<code>layout.css.ruby.enabled</code>parameter to<code>true</code>to enable the phonetic effect.
;See：
* [http://caniuse.com/#feat=ruby ''Can I use...'' The browser compatibility list here]
* [https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ruby Instructions about<nowiki><ruby></nowiki>on the Mozilla developer website]

=== Table class ===
;Phenomenon description:
The use of this template in table, li and other elements may cause some alignment problems, which is due to the rendering method. When the number of elements in the column is not uniform, different width allocation methods will lead to different height allocation (webkit will give a reasonable space to block elements). This problem only occurs when the width is automatically allocated. If the width is specified, this problem will not occur.

This kind of problem can also occur in templates such as {{tl|LyricsKai}}, especially various templates that depend on table. LyricsKai: If the corresponding rows in the left and right columns do not use ruby at the same time, this problem will occur.
{| class="wikitable" 
|-
! Title Text !! Title Text !! Title Text
|-
| width=100px|100px width, an exception is triggered when the line breaks || width=150px|150px width|| {{ruby|示例|test}}：Ruby tag, automatically adjust the width, display exceptions, and the cell will float up several pixels
|-
| 100px width || {{ruby|示例|test}}：150px width. If the width is written to dead, no exception will be triggered || <div>After the div tag is attached, {{ruby|示例|test}}: ruby tag automatically adjusts the width and displays normally</div>
|}

;Resolvent:

Put a div tag on Ruby.
<pre>
{| class="wikitable" 
|-
! Title Text !! Title Text !! Title Text
|-
| width=100px|100px width, an exception is triggered when the line breaks || width=150px|150px width || {{ruby|示例|test}}：Ruby tag, automatically adjust the width, display exceptions, and the cell will float up several pixels
|-
| 100px width || {{ruby|示例|test}}：150px width. If the width is written to dead, no exception will be triggered || <div>After the div tag is attached, {{ruby|example|test}}： ruby tag automatically adjusts the width and displays normally</div>
|}
</pre><noinclude>[[Category:模板文档]]</noinclude>