CSS文字竖写

之前写过一篇博文：CSS汉字竖写，使用的是手动断开大块文字，然后设置宽度1em使竖直排版，虽然很有效，不过实际应用得结合javascript来，这里使用了css3的属性columns（css3果然带来巨大的力量阿～～）：这里推荐几篇文章：

http://www.zhangxinxu.com/css3/css3-column-rule.php http://www.quirksmode.org/css/multicolumn.html w3的草案：http://www.w3.org/TR/2001/WD-css3-multicol-20010118/

css3的column是针对文本块进行分列（栏）显示，根据草案，与colum相关有以下属性：

columns: 列
column-count: 列的数量
column-width: 每列的宽度
column-fill: 列充满（高度是否统一）
column-gap: 列间的间隙
column-rule: 列间间隙的规则
column-rule-color: 列间间隙的颜色
column-rule-width: 列间间隙的宽度
column-rule-style: 列间间隙的样式
column-span: 列中文字横跨
column-break-before: 元素前断行
column-break-after: 元素后断行

注：中文只是我稍微翻译一下，可能会有所偏差。这里简单做一个例子：

Google 的使命是整合全球信息，使人人皆可访问并从中受益。完成该使命的第一步始于 Google 创始人拉里·佩奇和赛吉·布林在斯坦福大学的学生宿舍内共同开发了全新的在线搜索引擎，然后迅速传播给全球的信息搜索者。Google 目前被公认为全球规模最大的搜索引擎，它提供了简单易用的免费服务，用户可以在瞬间得到相关的搜索结果。当您访问 www.google.com 或其他众多 Google 域中的一个时，您可以使用多种语言查找信息，查看股价、地图和新闻标题，查找美国境内所有城市的电话簿名单，搜索数十亿计的图片并详读全球最大的 Usenet 信息存档 – 拥有十亿多个帖子，最早可追溯到 1981 年。用户不必特意访问 Google 主页，也可以访问所有这些信息。使用 Google 工具栏，您可以从网上的任意位置执行 Google 搜索。即使身边没有 PC 机，您也可以通过 WAP 和 i-mode 手机等无线平台使用 Google。Google 的实用性及便利性赢得了众多用户的青睐，它几乎完全是在用户的交口称颂下成为全球最知名的品牌之一的。作为一个企业，Google 通过提供广告服务来获取收入，使广告客户能够刊登与特定网页内容相关、重要而又经济实效的在线广告。这不仅为您提供了实用的广告信息，同时也给刊登广告的广告客户带来了好处。我们认为，您应该知晓在您面前展示的讯息是付费信息，因此我们始终在搜索结果或网页上将广告与其他内容区分开来。我们不出售搜索结果中的排名，也不允许有人通过付费来提高在搜索结果中的排名。成千上万的广告客户加入了我们的 Google AdWords 计划，利用定位广告在网上推广他们的产品和服务，我们相信 AdWords 是同类计划中规模最大的一个。此外，数千名网站管理人员利用我们的 Google AdSense 计划刊登与其网站内容相关的广告，增加收入并改善用户体验。Google 的含义“Googol”是一个数学术语，表示 1 后面带有 100 个零。它是由美国数学家爱德华·卡斯纳的侄子米尔顿·西洛塔所创造，因出现在凯斯纳和詹姆士·纽曼合著的“数学与想象力”一书中而得到普及。Google 公司对这个词作了微小改变，借以反映公司的使命，意在组织网上无边无际的信息资源。

可见使用起来非常简单，而且效果非常好。不过会发现虽然column-width:1em,但英文如google的gl不挤成一块了，解决办法可以减增大单个字间字间距letter-spacing，letter-spacing可以参考：http://www.w3school.com.cn/css/pr_text_letter-spacing.asp是兼容所有浏览器；但，有时候这样会导致中文文字被遮挡，可以使用javascript将半角转为圆角，这里有个JavaScript string对象方法扩充：

String.prototype.sbc2dbc = function (){
     return this.replace(/[\u21-\u7e]/g,
         function(a){
             return String.fromCharCode(a.charCodeAt(0)+65248);
         }).replace(/\u3000/g," ");
}
document.write("ＡＢaabcs1234456Ｃ　１２３".sbc2dbc());

也可以使用text-autospace css属性，ie对不同国家的文字排版还是很给力的，哈哈，参考：

http://msdn.microsoft.com/en-us/library/ms531164(v=vs.85).aspx http://hi.baidu.com/ccjjcc/blog/item/8df9c7887197d6bb0e244461.html

支持浏览器：ie8 6和7未测试中文传统是从右向左写的，所以还可以使用direction属性使文字自右向左，directiion属性参考：http://www.w3school.com.cn/css/pr_text_direction.asp是兼容所有浏览器的。当然对还可以将小写字母转为大写字母等。示例如：

各浏览器对column的兼容可以查看：

http://www.findmebyip.com/litmus#target-selector

opera对column的支持如下：

http://www.opera.com/docs/specs/presto28/css/multicolumnlayout/

可见opera和ie系列不支持column, 对于ie而言有私有的属性layout-flow和writing-mode兼容起来也比较容易～比如：

以上代码ie6|chrome 9|firefox 3.6|opera 11.50测试通过 webkit新版本支持了cjk文字模式，即ie里一直都有的writing-mode,见http://blog.imagedrive.jp/web/research/2011/01/14/css3-chgov-writing-mode，和ie上表现几乎一致，只是属性值写法不同。firefox和opera似乎还没有支持已经写入css3草案的writing-mode。在中国有ie和webkit的支持，浏览器支持几乎占了绝大部分，根据cnzz的统计：http://brow.data.cnzz.com/，ie和webkit引擎的占用了几乎88%，在移动设备上webkit几乎占了主导，所以可以考虑使用writing-mode作为解决文字竖排的主要模式了。即推荐方案是ie和webkit中使用writing-mode,firefox和opera中使用multi-column. 示例如下：

【Google】] 的使命是整合全球信息，使人人皆可访问并从中受益。完成该使命的第一步始于 Google 创始人拉里·佩奇和赛吉·布林在斯坦福大学的学生宿舍内共同开发了全新的在线搜索引擎，然后迅速传播给全球的信息搜索者。Google 目前被公认为全球规模最大的搜索引擎，它提供了简单易用的免费服务，用户可以在瞬间得到相关的搜索结果。当您访问 www.google.com 或其他众多 Google 域中的一个时，您可以使用多种语言查找信息，查看股价、地图和新闻标题，查找美国境内所有城市的电话簿名单，搜索数十亿计的图片并详读全球最大的 Usenet 信息存档 – 拥有十亿多个帖子，最早可追溯到 1981 年。用户不必特意访问 Google 主页，也可以访问所有这些信息。使用 Google 工具栏，您可以从网上的任意位置执行 Google 搜索。即使身边没有 PC 机，您也可以通过 WAP 和 i-mode 手机等无线平台使用 Google。Google 的实用性及便利性赢得了众多用户的青睐，它几乎完全是在用户的交口称颂下成为全球最知名的品牌之一的。作为一个企业，Google 通过提供广告服务来获取收入，使广告客户能够刊登与特定网页内容相关、重要而又经济实效的在线广告。这不仅为您提供了实用的广告信息，同时也给刊登广告的广告客户带来了好处。我们认为，您应该知晓在您面前展示的讯息是付费信息，因此我们始终在搜索结果或网页上将广告与其他内容区分开来。我们不出售搜索结果中的排名，也不允许有人通过付费来提高在搜索结果中的排名。成千上万的广告客户加入了我们的 Google AdWords 计划，利用定位广告在网上推广他们的产品和服务，我们相信 AdWords 是同类计划中规模最大的一个。此外，数千名网站管理人员利用我们的 Google AdSense 计划刊登与其网站内容相关的广告，增加收入并改善用户体验。Google 的含义“Googol”是一个数学术语，表示 1 后面带有 100 个零。它是由美国数学家爱德华·卡斯纳的侄子米尔顿·西洛塔所创造，因出现在凯斯纳和詹姆士·纽曼合著的“数学与想象力”一书中而得到普及。Google 公司对这个词作了微小改变，借以反映公司的使命，意在组织网上无边无际的信息资源。

posted @ 2010-12-29 01:17 Defims 阅读(747) 评论(0) 收藏举报

刷新页面返回顶部

Defims

CSS文字竖写

公告