3

'dir' が RTL として指定された複数のスパン テキスト要素 (2 つ以上) があるとします。

<div dir="rtl">
<span>First-Element</span>
<span>Second-Element</span>
<span>Third-Element</span>
</div>

右から左に順番に表示されるようにします。

Third-Element Second-Element First-Element

これは、テキスト要素に RTL 方向性 (アラビア語、ペルシア語、ヘブライ語などのテキスト) がある場合、または RTL 要素がインターリーブされている場合にうまく機能します。

<div dir="rtl">
<span>First-Element-RTL</span>
<span>Second-Element-RTL</span>
<span>Third Element-RTL</span>
</div>

また：

<div dir="rtl">
<span>First-Element-LTR</span>
<span>Second-Element-RTL</span>
<span>Third Element-LTR</span>
</div>

しかし、すべての要素が LTR 方向性である場合、言語の順序が使用され、望ましくない順序が得られます。

First-Element Second-Element Third-Element

要素内のテキストの方向性に関係なく、要素の固定順序をどのように達成できますか。つまり、技術 (html か css か) は、個々のテキスト要素の言語に無関心でなければなりません。

この問題は、span 要素のコンテンツが可変であり、ユーザーによって提供される場合に発生します。たとえば、ユーザー名が RTL 言語または英語である可能性があります。

編集

ここで強調しなければならないのは、ここで話しているのはテキスト スパンを相互に相対的に並べることであり、テキスト自体の流れを変えることではないため、'English Text' は 'txeT hsilgnE' としてではなく、そのまま表示する必要があるということです。

編集

これは、Jukka が提供する回答をテストするための単純な HTML セグメントです。これは、右揃えの 'bar foo' として表示されます。{ unicode-bidi: bidi-override; }コンテナレベルで目的の結果を得る必要がないことを（少なくとも私のブラウザでは）示しています。

<html>
<head>
    <style type="text/css">
        span { unicode-bidi: embed; }
    </style>
</head>
<body>
<div dir="rtl">
<span>foo</span>
<span>bar</span>
</div>
</body>
</html>
4

4 に答える 4

4 
div { unicode-bidi: bidi-override; }
span { unicode-bidi: embed; }

最初のルールは、特定の方向（この場合はHTMLで設定されたRTL）を強制し、テキストの固有の方向性（文字の方向性プロパティに依存します）をオーバーライドします。

2番目のルールは、各span要素を方向性の「自律的な島」にします。つまり、要素内のテキストの方向は、要素を囲むことによって影響を受けるのではなく、要素自体に設定されたプロパティと文字の方向性プロパティにのみ影響されます。たとえば、ラテン文字は左から右に、ヘブライ語とアラビア文字は右から左に実行されます。

ただし、問題があります。たとえば、「foo（2）」が含まれている場合、span「（foo（2」」としてレンダリングされます。理由は、要素が親から継承されたRTL方向を持っているためです。ただし、dir属性とdirectionプロパティは、弱い方向性のみを設定し（たとえば、LTR方向性が強いラテン文字のシーケンスには影響しません）、たとえば、括弧が含まれる状況に影響します。括弧はあいまいな方向性を持っているため、弱い方向性設定に従って処理されます。

使用のこの部分を回避する簡単な方法はないのではないかと思います。もちろん、テキストがほとんど英語であると予想する場合spanのように、最も一般的な状況であると予想されるものに応じて要素の方向性を設定できます。span { direction: ltr; }ただし、実際のソリューションでは、コンテンツの言語に応じて弱い方向設定を制御する必要があります。

于 2012-06-05T11:22:04.887 に答える
0

<span>LTRの順序で必要な要素だけの場合dir="rtl"は、親から宣言を削除する<div>か、より高い親レベルに設定されている場合は、<div>を含めてそれをオーバーライドしますdir="ltr"。

CSSを介して子に強制することもできます。

div {direction: ltr;}
div span {direction: ltr;}
于 2012-06-05T10:28:22.977 に答える
0

以下はあなたが探しているものを達成しませんか?
私があなたの質問を誤解した場合はご容赦ください。したがって、疑問符です。

[dir="rtl"] > span {
    display: inline-block;
}

Jsfiddle サンプル

于 2014-03-06T23:58:28.490 に答える
-1

span各文字列で引き続き LTR を使用する場合は、要素を atableおよび要素に置き換えますtd。はい、通常、このような単一の行にテーブルを使用することは避けるべきです (代わりにdivorを使用するように言われますspan) が、ブラウザー間で一貫してレンダリングされるものは他にないようですtable。連続する要素のセットが 一方、LTR に設定された連続する要素は、IE 以外のブラウザでレンダリングすると、要素の外側に左から右へのテキストが少しあると、1 つの要素としてまとめられているように見えます。dirRTLtdtrtddirLTRspan

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl"> <!--Direction marker in the HTML tag.-->
<head>
    <style type="text/css">
        table.ltrCells {
            border-collapse: collapse; /* Removes extra borders */
            display: inline-table; /* Keeps the table from appearing on its own line. */
            vertical-align: bottom; /* Lines up the table text with previous and next text. */
        }
            table.ltrCells tbody tr td {
                padding-bottom: 0px; /* If not 0, text before and after the table gets pushed down. */
            }
    </style>
    <title>Tester</title>
</head>
<body>
    <span dir="rtl">Here's some stuff before</span>
    <table class="ltrCells">
        <tr>
            <td dir="ltr">first</td>
            <td dir="ltr">(Two) Second.</td>
            <td dir="ltr">שלישי) שלוש)</td>
            <td dir="ltr">ארבעה</td>
            <td dir="ltr">5</td>
            <td dir="ltr">(שישית Six)</td>
        </tr>
    </table>
    <span dir="rtl">and some stuff after.</span>
</body>
</html>

IE9、Firefox 27、Chrome 33 でのレンダリング方法は次のとおりです。ここに画像を直接入れたいのですが、そうするだけの評判がありません。

何らかの理由で、 MUSTspanの前後の要素にが含まれているか、テーブルの間違った側にレンダリングされます。tabledir="rtl"

于 2014-03-03T18:46:26.093 に答える