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

此模板允许您为特定文本添加一段小字标注，常用于中文拼音标注、日文汉字标注假名、韩文标注汉字成语等，也可以用于{{ruby|反转|玩笑}}说话。

== 使用方法 ==
<code><nowiki>{{Ruby|文字|上方小字|</nowiki><del><nowiki>文本语言标签|音标语言标签</nowiki></del><nowiki>}}</nowiki></code>

== 使用示例 ==
{| class="wikitable"
|-
! 代码 !! 效果 !! 说明
|-
|<code><nowiki>{{Ruby|注|zhù}}{{Ruby|音|yīn}}</nowiki></code> || {{Ruby|注|zhù}}{{Ruby|音|yīn}} || 为中文添加拼音标注。
|-
|<code><nowiki>{{Ruby|運命|さだめ}}</nowiki></code> || {{Ruby|運命|さだめ}} || 为日文汉字标注假名。
|-
|<code><nowiki>{{Ruby|超电磁炮|レールガン}}</nowiki></code> || {{Ruby|超电磁炮|レールガン}} || 将单词翻译为另一种语言。
|-
|<code><nowiki>{{Ruby|충|忠}}！{{Ruby|성|誠}}！</nowiki></code> || {{Ruby|충|忠}}！{{Ruby|성|誠}}！ || 韩文标注汉字。
|-
|<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}}. || 玩一个小笑话。
|}

== 注意事项 ==
=== 模板本身 ===
* 此模板不能自身嵌套多层，否则会导致错误。
* 请尽量避免使用此模板排版长句内容和翻译，标注单词时请使用最短单位（如单词或音节）进行排版。过长的排版可能导致窄屏设备换行异常；此模板并非专为翻译内容设计。如需原文与翻译同时出现，请考虑直接使用括号标明。
<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;">请{{ruby|不要不要不要不要不要不要不要不要|不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要不要}}这样排版。</div></div>

=== 浏览器支持 ===
目前仅部分浏览器支持此模板的样式。使用前请注意浏览器兼容性。
* 如果您看到文字上方有较小的标注文本，说明您的浏览器支持此样式。
* Firefox 34~37 可通过打开<code>about:config</code>页面，设置<code>layout.css.ruby.enabled</code>参数为<code>true</code>以启用标注效果。
;参考：
* [http://caniuse.com/#feat=ruby ''Can I use...'' 浏览器兼容性列表]
* [https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ruby Mozilla 开发者网站上关于<nowiki><ruby></nowiki>的说明]

=== 表格样式 ===
;问题描述：
在表格、li等元素中使用此模板可能导致某些对齐问题，这是由于渲染方式引起的。当列中元素数量不一致时，不同的宽度分配方式会导致不同的高度分配（webkit 会为块元素提供合理的空间）。此问题仅在宽度自动分配时发生。如果指定宽度，则不会出现此问题。

在如{{tl|LyricsKai}}等模板中也会出现类似问题，尤其是依赖表格的模板。例如左列和右列的对应行未同时使用 ruby 时会出现此问题。
{| class="wikitable" 
|-
! 标题文字 !! 标题文字 !! 标题文字
|-
| width=100px|100px 宽度，换行时触发异常 || width=150px|150px 宽度|| {{ruby|示例|测试}}：Ruby 标记，自动调整宽度，显示异常，单元格会向上浮动几个像素。
|-
| 100px 宽度 || {{ruby|示例|测试}}：150px 宽度。如果指定宽度则不会触发异常 || <div>附加 div 标签后 {{ruby|示例|测试}}：Ruby 标记自动调整宽度，正常显示。</div>
|}

;解决方法：

在 Ruby 外加一个 div 标签。
<pre>
{| class="wikitable" 
|-
! 标题文字 !! 标题文字 !! 标题文字
|-
| width=100px|100px 宽度，换行时触发异常 || width=150px|150px 宽度 || {{ruby|示例|测试}}：Ruby 标记，自动调整宽度，显示异常，单元格会向上浮动几个像素。
|-
| 100px 宽度 || {{ruby|示例|测试}}：150px 宽度。如果指定宽度则不会触发异常 || <div>附加 div 标签后 {{ruby|示例|测试}}：Ruby 标记自动调整宽度，正常显示。</div>
|}
</pre><noinclude>[[en:Template:Ruby/doc]][[Category:模板文档]]</noinclude>