CSS3中的注音对齐属性ruby-align用法指南


Posted in HTML / CSS onJuly 01, 2016

语法:
 
ruby-align : auto | left | center | right | distribute-letter | distribute-space | line-edge
 
参数:
 
auto :  由浏览器确定对齐方式。对于ideographic(东亚文本)以distribute-space值对齐。对于Latin文本以center值对齐
left :  根据基本宽度左对齐
center :  根据基本宽度居中对齐。如果基本宽度小于ruby文本的宽度,那么在ruby文本的宽度中居中基本宽度
right :  根据基本宽度右对齐
distribute-letter :  如果ruby文本的宽度小于基本宽度,则ruby文本在基本宽度中均匀分布。如果ruby文本的宽度大于或等于基本宽度,居中对齐
distribute-space :  如果ruby文本的宽度小于基本宽度,则ruby文本在基本宽度中均匀分布。在ruby文本中,在第一个字符的前面后最后字符的后面有半个字距的空白区域。如果ruby文本的宽度大于或等于基本宽度,居中对齐
line-edge :  如果ruby文本不相邻行边缘,则其被居中。否则ruby文本行在基本文本边的上方

实例代码:

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5. <title> ruby-align </title>   
  6. <style>   
  7. ruby.sample1 {ruby-align:auto;}   
  8. ruby.sample2 {ruby-align:start;}   
  9. ruby.sample3 {ruby-align:left;}   
  10. ruby.sample4 {ruby-align:center;}   
  11. ruby.sample5 {ruby-align:end;}   
  12. ruby.sample6 {ruby-align:rightright;}   
  13. ruby.sample7 {ruby-align:distribute-letter;}   
  14. ruby.sample8 {ruby-align:distribute-space;}   
  15. ruby.sample9 {ruby-align:line-edge;}   
  16. ruby {background-color:pink;}   
  17. rt {background-color:yellow;}    
  18. </style>   
  19.     
  20. </head>   
  21.     
  22. <body>   
  23. <p><ruby class="sample1">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:auto;)</p>   
  24. <p><ruby class="sample2">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:start;)</p>   
  25. <p><ruby class="sample3">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:left;)</p>   
  26. <p><ruby class="sample4">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:center;)</p>   
  27. <p><ruby class="sample5">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:end;)</p>   
  28. <p><ruby class="sample6">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:rightright;)</p>   
  29. <p><ruby class="sample7">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:distribute-letter;)</p>   
  30. <p><ruby class="sample8">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:distribute-space;)</p>   
  31. <p><ruby class="sample9">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:line-edge;)</p>   
  32. </body>   
  33. </html>  

实例图
CSS3中的注音对齐属性ruby-align用法指南

HTML / CSS 相关文章推荐
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
CSS3中Transform动画属性用法详解
Jul 04 #HTML / CSS
CSS3 渐变(Gradients)之CSS3 线性渐变
Jul 08 #HTML / CSS
CSS3 渐变(Gradients)之CSS3 径向渐变
Jul 08 #HTML / CSS
CSS3弹性伸缩布局之box布局
Jul 12 #HTML / CSS
使用CSS3代码绘制可爱的Hello Kitty猫
Aug 03 #HTML / CSS
使用css3绘制出各种几何图形
Aug 17 #HTML / CSS
利用CSS3实现自定义滚动条代码分享
Aug 18 #HTML / CSS
You might like
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
php实现微信扫码支付
2017/03/26 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
python 调用win32pai 操作cmd的方法
2017/05/28 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
python中的colorlog库使用详解
2019/07/05 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
金融专业应届生求职信
2013/11/02 职场文书
社区科普工作方案
2014/06/03 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
二审答辩状格式
2015/05/22 职场文书
学校远程教育工作总结
2015/08/11 职场文书
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
MySQL读取JSON转换的方式
2022/03/18 MySQL
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js