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

<!-- 在本行下編輯模板說明 -->
{{copytl|source=中文维基百科|link=https://zh.wikipedia.org/wiki/Template:Ruby}}
{{Color|red|<big>'''注意：请勿滥用该模板！'''</big>}}

本模板可产生{{Ruby|注|zhù}}{{Ruby|音|yīn}}的效果。

==用法==
<pre>{{Ruby|文字|注音|文字语言|注音语言}}</pre>

文字语言与注音语言为可选参数，不填注音语言是，注音语言与文字语言相同

本模板不可以重复嵌套，会出错

== 范例 ==
{| class="wikitable"
|-
! 代码 !! 效果
|-
|<code><nowiki>{{Ruby|注|zhù}}{{Ruby|音|yīn}}</nowiki></code> || {{Ruby|注|zhù}}{{Ruby|音|yīn}}
|}

==问题==
目前仅部分浏览器支持本模板的样式，使用前请注意您的浏览器的兼容性。如果您看到注音排在文字上面，那就说明您的浏览器兼容该样式。

参阅：
* [http://caniuse.com/#feat=ruby ''Can I use...'' 上面的浏览器兼容性列表]
* [https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ruby Mozilla 开发者网站上面有关 <nowiki><ruby></nowiki> 的说明]

Firefox 34～37 版可以打开 <code>about:config</code> 页面，把 <code>layout.css.ruby.enabled</code> 这个参数改成 <code>true</code> 来开启注音效果。

现象描述：

该模板在table、li等元素中使用会可能导致部分对齐方式上的问题，这是由于渲染方式上的问题。在列内元素数量不统一时不同的宽度分配方式会导致的高度分配不一（webkit会给块元素一个合理的空间）。这个问题只在宽度是自动分配的时候出现，如果宽度是被指定好的则不会出现这个问题。

{| class="wikitable" 
|-
! 标题文字 !! 标题文字 !! 标题文字
|-
| width=100px|100px宽度，换行时触发异常 || width=150px|150px宽度|| {{ruby|示例|test}}：ruby标签，自动调节宽度，显示异常，单元格会向上浮动若干像素
|-
| 100px宽度 || {{ruby|示例|test}}：150px宽度，宽度被写死的情况下不会触发异常 || <div>套上了div标签之后，{{ruby|示例|test}}：ruby标签，自动调节宽度，显示正常</div>
|}
解决方法：

在ruby外面套一个div标签。
<pre>
{| class="wikitable" 
|-
! 标题文字 !! 标题文字 !! 标题文字
|-
| width=100px|100px宽度，换行时触发异常 || width=150px|150px宽度|| {{ruby|示例|test}}：ruby标签，自动调节宽度，显示异常，单元格会向上浮动若干像素
|-
| 100px宽度 || {{ruby|示例|test}}：150px宽度，宽度被写死的情况下不会触发异常 || <div>套上了div标签之后，{{ruby|示例|test}}：ruby标签，自动调节宽度，显示正常</div>
|}
</pre>

== 参见 ==
*{{Tl|Lang}}
*{{Tl|Rubyh}}——带有黑幕

<!-- 本行下加入模板的分類 -->
<includeonly></includeonly>