阿拉伯斜体字体 [英] arabic italic font
问题描述
font-style:italic;将字体向右倾斜，如下所示:我的字体
font-style:italic; tilts the font to the right just like this: my font
在阿拉伯语中，书写是从右至左完成的，而不是从左至右完成的.我试图实现的是将字体斜体化，以使它向左倾斜而不是向右倾斜.有什么建议?您不必在答案中包含阿拉伯字母.我想要某种在任何语言中都与font-style:italic;相反的东西.
In Arabic, the writing is done from right-to-left, not left-to-right. What I am trying to achieve is italicizing the font so that it is tilted to the left instead of to the right. Any suggestions? You do not have to include Arabic letters in your answer. I want something that does the opposite of font-style:italic; in any language.
推荐答案
您可以在CSS转换声明中使用称为skew的东西:
You can use something called skew in the CSS transformation declaration:
.fontToTransform {
font-size: 40px;
transform: skewX(15deg);
-webkit-transform: skewX(15deg);
-moz-transform: skewX(15deg);
-o-transform: skewX(15deg);
-ms-transform: skewX(15deg);
}
这将使您摆脱实际操作字体本身的麻烦.这将转换整个文本框.您可能需要某种验证来检查每个换行符，并将它们分别分隔为新标签.因此，由于这可能不是真正的解决方案，因此，如果要剪切较短的(单行)文本，可以考虑使用它.
This will get you out of the hassle of actually manipulating the font itself. This will transform the whole block your text is in tho. You might need some kind of validation to check each line-break and separate them to be new tags each time. So as this might not be a real solution, you might take it into consideration if you want to shear shorter (single-line) text.
编辑
Edit
这是一个遥不可及的例子，但这是一个肮脏的示例，该示例找出文本块中的各个行并将它们放入新的span中，这将导致各行分别使用skewX样式进行样式设置.在这里，您去了:
This is veeeery far fetched but here's a dirty example that finds out the individual lines in your text block and puts each of them in a new span, what will cause each line to be separately styled with the skewX styling. Here you go:
CSS
#fontTransform {
font-size: 40px;
margin-right: 30px;
text-align: right;
}
#fontTransform span {
display: block;
transform: skewX(15deg);
-webkit-transform: skewX(15deg);
-moz-transform: skewX(15deg);
-o-transform: skewX(15deg);
-ms-transform: skewX(15deg);
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<p id="fontTransform">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</body>
</html>
main.js
'use strict';
$(document).ready(function(){
var d = document.getElementById('fontTransform');
var t = d.innerHTML;
var w = t.split(' ');
var lines = [];
d.innerHTML = w[0];
var height = d.clientHeight;
var tmp_line = [];
for (var i = 0; i < w.length; i++) {
d.innerHTML = d.innerHTML + ' ' + w[i];
tmp_line[tmp_line.length] = w[i];
if (d.clientHeight > height) {
height = d.clientHeight;
console.log(w[i-1]);
delete tmp_line[tmp_line.length-1];
lines[lines.length] = tmp_line;
tmp_line = [];
}
}
// Destroy d.innerHTML
d.innerHTML = '';
var tmp_html = '';
// Refill the lines within spans
for (var i = 0; i < lines.length-1; i++) {
tmp_html = '<span>';
for (var x = 0; x < lines[i].length-1; x++) {
tmp_html = tmp_html + lines[i][x] + ' ';
}
tmp_html = tmp_html.trim();
tmp_html = tmp_html + '</span>';
d.innerHTML = d.innerHTML + tmp_html;
}
});
您可能会考虑使用jQuery的resize()绑定来更新具有百分位数宽度的文本块.我也不知道长行单词不能排成一行会发生什么情况.并不是说这实际上可能发生，但是请记住，它未经测试，可能会使单词迷路.确实需要对实际发布进行更多测试.
You might consider using jQuery's resize() binding to update the blocks of text that have percentile widths. Also I'm not sure what happens with very long words that won't fit in one line. Not that this might actually happen, but keep in mind it's not tested and might cause words to get lost. Really need to do more testing for actual publishing.
这篇关于阿拉伯斜体字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
