jquery - アラビア語のイタリックフォント

Question

font-style:italic;次のようにフォントを右に傾けます：my font

アラビア語では、書き込みは左から右ではなく、右から左に行われます。私が達成しようとしているのは、フォントをイタリック体にして、右ではなく左に傾けることです。助言がありますか？回答にアラビア文字を含める必要はありません。font-style:italic;どの言語でも逆のことをする何かが欲しいです。

ここに画像の説明を入力してください

score 7 · Accepted Answer

skewCSS 変換宣言で呼び出されるものを使用できます。

.fontToTransform {
    font-size: 40px;
    transform: skewX(15deg);
    -webkit-transform: skewX(15deg);
    -moz-transform: skewX(15deg);
    -o-transform: skewX(15deg);
    -ms-transform: skewX(15deg);
}

これにより、フォント自体を実際に操作する煩わしさから解放されます。これにより、テキストが含まれているブロック全体が変換されます。各改行をチェックし、毎回新しいタグになるように区切るには、何らかの検証が必要になる場合があります。したがって、これは実際の解決策ではない可能性があるため、短い (1 行の) テキストをせん断する場合は考慮してください。

編集

これはかなり大げさですが、テキストブロック内の個々の行を見つけてそれぞれを new に配置する汚い例を次に示します。これにより、span各行がスタイリングで個別にスタイル設定されますskewX。どうぞ：

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()バインディングを使用して、パーセンタイル幅のテキストブロックを更新することを検討してください。また、1 行に収まらない非常に長い単語の場合はどうなるかわかりません。これが実際に発生する可能性はありませんが、テストされていないため、単語が失われる可能性があることに注意してください. 実際に公開するには、さらにテストを行う必要があります。

score 4 · Accepted Answer

仲間のRTL言語ユーザーとして、私はあなたの痛みを感じます:)

アラビア語の Web フォントを使用して CSS にインポートするのはどうですか? Amiriはオープン Web フォントで、アラビア語のナスフスクリプトに適したタイポグラフィの傾斜があります。Google CDN でもホストされています。

次に、次のようにします。

@import url(http://fonts.googleapis.com/earlyaccess/amiri.css);
.myItalic{
   font-family: 'Amiri', serif;   
   font-style: italic; 
 }

JSFiddle の実際の例を次に示します。

このフォントが気に入らない場合は、他の Web フォントを使用できます。ここでテストするものをいくつか示します。これらのいずれもうまくいかない場合は、好みに合ったフォントを見つけて、その斜体バージョンを変更し、同じ方法でページに埋め込むことができると思います。

score 3 · Accepted Answer

アレンダーに同意（上から）

CSS3で簡単にできます。JavaScriptは必要ありません...まったく。

これがあなたの答えです：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <style type="text/css">    
      .skewTheFont {
        transform: skewX(10deg);
        -webkit-transform: skewX(10deg);
        -moz-transform: skewX(10deg);
        font-size: 60px;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

      }
    </style>
    <!-- Style ends here -->  
</head>  

<body>
    <p class="skewTheFont">Arabic Font</p>


</body>

</html>

ただし、これは FF、IE10、および Chrome でサポートされています (IE10 未満ではサポートされていません)。

score 0 · Accepted Answer

残念ながら、font-styleプロパティでこれを行う方法はありません。こちらのページを参照してください：http ：//www.w3schools.com/cssref/pr_font_font-style.asp 。反対方向にイタリック体になる可能性のあるアラビア語フォントがあるかどうかはわかりません。ある場合、それらはおそらく広くサポートされていません。

score -1 · Accepted Answer

親愛なる私がwajbahプロジェクトをスライスするために使用した2つのものがあります。コードで方向rtlを次のように使用します。

dir="rtl"

その後、右側に表示したいコンテンツを使用しますfloat right。

それはあなたの問題を実行します。

試して返信してください。

jquery - アラビア語のイタリックフォント

5 に答える 5

Related

Reference