mPDF Manual – Fonts & Languages

Bidirectional (RTL) text v6.x

Document Directionality - RTL versus LTR

The document has a baseline direction which is LTR or RTL; this determines:

  • text alignment in blocks for which text-align has not been specifically set
  • layout of mirrored page-margins, columns, ToC and Indexes, headers / footers

This base/document directionality is LTR by default, and can be set by any of the following:

<?php
$mpdf->SetDirectionality('rtl');

<html dir="rtl"> or <html style="direction: rtl;">

<body dir="rtl"> or <body style="direction: rtl;">

Base direction is an inherited CSS property, so will affect all content, unless direction is specified elswhere.

Block-level Directionality

Direction can be set for any HTML block elements e.g. <div><p><table><ul> etc using HTML or CSS:

<div style="direction: rtl;">

or

div.right { direction: rtl; }

Block-level direction may affect text alignment, and will also influence text reversal in RTL text.

Note that margin/padding are NOT reversed by direction i.e. left-margin will still be left-margin in RTL state.

Text alignment

The default value for text-align is “a nameless value which is dependent on direction”. However, once text-align is specified, it is respected and inherited by all descendants.

Text Bidirectionality

Bi-directional text is supported in mPDF.

  1. The following Unicode characters are supported, and can be inserted directly in the text as HTML entities:

    LRE U+202A LEFT-TO-RIGHT EMBEDDING &#x202A;
    RLE U+202B RIGHT-TO-LEFT EMBEDDING &#x202B;
    LRO U+202D LEFT-TO-RIGHT OVERRIDE &#x202D;
    RLO U+202E RIGHT-TO-LEFT OVERRIDE &#x202E;
    PDF U+202C POP DIRECTIONAL FORMATTING &#x202C;
    LRI U+2066 LEFT-TO-RIGHT ISOLATE &#x2066;
    RLI U+2067 RIGHT-TO-LEFT ISOLATE &#x2067;
    FSI U+2068 FIRST STRONG ISOLATE &#x2068;
    PDI U+2069 POP DIRECTIONAL ISOLATE &#x2069;
    LRM U+200E LEFT-TO-RIGHT MARK &#x200E;
    RLM U+200F RIGHT-TO-LEFT MARK &#x200F;
  2. The following HTML tags are supported:
    • <bdo> (NB the “dir” attribute is mandatory on )
    • <bdi> (HTML5)

  3. The CSS property unicode-bidi is supported with the following (CSS3) values:
    normal | embed | isolate | bidi-override | isolate-override | plaintext.

    See http://www.w3.org/TR/css3-writing-modes/#unicode-bidi for more details.

    unicode-bidi is supported on block level elements as well as in-line elements, but note that:

    • the value is not inherited to child blocks
    • using embed or isolate has no effect on block level boxes
    • isolate-override is equivalent to bidi-override on block level boxes

    NB dir="auto" is not supported generally, but it is supported for <bdi> (has the same effect as if omitted) to use First Strong Isolate (FSI).

    Directionality can now be set on individual table cells
    <td style="direction:rtl;unicode-bidi:embed;"> or <td dir="rtl">

Equivalent methods

The following are equivalent methods:

EMBED

Example

<span dir="rtl">...</span>
  
&amp;#x202B;...&amp;#x202C;
  
<span style="direction: rtl; unicode-bidi: embed">...</span>
OVERRIDE

Example

<bdo dir="rtl">...</bdo>
  
&amp;#x202E;...&amp;#x202C;
  
<span dir="rtl" style="unicode-bidi: bidi-override">...</span>
  
<span style="direction: rtl; unicode-bidi: bidi-override">...</span>
ISOLATE

Example

<bdi dir="ltr">...</bdi>
  
&amp;#x2067;...&amp;#x2069;
  
<span dir="rtl" style="unicode-bidi: isolate">...</span>
  
<span style="direction: rtl; unicode-bidi: isolate">...</span>
First Strong Isolate (FSI)

Example

<bdi>...</bdi>
  
<bdi dir="auto">...</bdi>
  
&amp;#x2068;...&amp;#x2069;
  
<span dir="rtl" style="unicode-bidi: plaintext">...</span>
  
<span style="direction: rtl; unicode-bidi: plaintext">...</span>

First strong isolate (FSI)

FSI is useful when including text within a paragraph where the directionality of the text is unknown. For example, if you are printing out a catalogue from a database of book titles and the number of readers, when some book titles are in right-to-left script, you may use this template:

<li>Title: {TITLE} - {READERS} readers</li>

This would result in the following:

  • Title: Alice in Wonderland - 12390 readers
  • Title: עליסה בארץ הפלאות, סיפור-ילדים מאת לואיס קרול - 17890 readers
<li>Title: <bdi>{TITLE}</bdi> - {READERS} readers</li>

Using BDI will result in the following:

  • Title: Alice in Wonderland - 12390 readers
  • Title: עליסה בארץ הפלאות, סיפור-ילדים מאת לואיס קרול ‭- 1790 readers‬

See Also

  • lang - Information on mPDF support for the HTML attribute lang
Fork me on GitHub