z'Log » 古风，竖排文字的实现

七

15

2011

古风，竖排文字的实现

Filed under:
未分类 by z

<html>
<head>
<style>
<!--
div{
	float:right;
	width:0;
}
p{
	writing-mode:tb-rl;
	font-family:'@楷体';
	font-size:16px;
	-o-transform:matrix(0,1,-1,0,0,0);
	-webkit-transform:matrix(0,1,-1,0,0,0);
	-moz-transform:matrix(0,1,-1,0,0,0);
	transform:matrix(0,1,-1,0,0,0);
	-o-transform-origin:0 0;
	-webkit-transform-origin:0 0;
	-moz-transform-origin:0 0;
	transform-origin:0 0;
	_height:400px;
width:400px;
border:1px solid red;
}
-->
</style>
</head>
<body>
<div><p>
我希望庆国的人民都能成为不羁之民<br>
受到他人虐待时有不屈服之心<br>
受到灾恶侵袭时有不受挫折之心<br>
若有不正之事时<br>
不恐惧修正之心<br>
不向豺虎献媚<br>
我希望庆国的国民<br>
每一位都能成为王<br>
都能成为统治被称为"自己"这块领土的<br>
独一无二的王
</p>
</div>
</body>
</html>

优点：windows下兼容性好
缺点：非windows系统没看到有旋转九十度的字体，基本不能用
使用transform 转置后的字体有点模糊
对于自适应的内容需定位麻烦
东亚文字排列方向

Leave a Reply