Template:Bdi

From MozillaWiki
Jump to: navigation, search

{{{1}}}

Documentation icon Template documentation[view] [edit] [history] [purge]

Usage

{{bdi}} is a front-end for the HTML element <bdi>, which is used to delimit a span of text that has a text direction which is either unknown, or opposite to that of the main text. It enables the use of, e.g. Arabic script as inline text in an English article (and vice versa).

Mixed text directions often causes text flow problems. Words will become jumbled at line-breaks, and punctuation marks may be displayed on the wrong side of the string, since they get interpreted as part of the inserted text.

Parameters

There is only 1 parameter, which is unnamed and required.

Syntax

The template's syntax is

  • {{bdi|custom text}}

Required parameter

1

Custom text

The text that should be enclosed in <bdi> tags.

Usage
  • {{bdi|1}}


Examples

Correct use

Case What you type What you see
Basic use موزيلا فيرفكس}} موزيلا فيرفكس
In inline text موزيلا فيرفكس}}, is a popular web-browser. Mozilla Firefox, in Arabic موزيلا فيرفكس, is a popular web-browser.

Comparison between <bdi> and <bdo>

The <bdi> tag derives the direction of the text it encloses from the text itself. You don't include any directional information. The <bdo> tag, however, forces the text it encloses to flow in a certain direction, specified through the attribute dir=.

Because of that, {{bdo}} shouldn't be used in cases where the direction of the inserted text is unknown, but it is a good alternative if {{bdi}} should fail to derive the direction.

<bdi>

The <bdi> tag is used in the same way, regardless of the text direction of the inserted string.

Case What you type What you see Comments
<bdi> adapts to
the text direction of
the enclosed string
من اليمين إلى اليسار}} من اليمين إلى اليسار Works for both rtl and ltr input
From left to right}} From left to right

<bdo>

The <bdo> tag may make the text virtually unreadable, if used incorrectly. Mind the dir=.

Correct
Case What you type What you see Comments
<bdo> has a preset
directional output
من اليمين إلى اليسار}} من اليمين إلى اليسار The default direction is rtl
dir=ltr|From left to right}} From left to right ltr must be explicitly specified
Incorrect
Case What you type What you see Comments
Wrong value for
the dir attribute
dir=ltr|من اليمين إلى اليسار}} من اليمين إلى اليسار The text is displayed backwards (<bdo> forces the direction)
From left to right}} From left to right

See also

  • {{bdo}}: inserts <bdo> tags, forcing inline changes in text direction.
  • {{abbr}}: inserts <abbr> tags to include a tooltip explanation of an abbreviation.
  • {{code}}: inserts <code> tags.
  • {{mark}}: inserts <mark> tags, highlighting the enclosed text.
  • {{samp}}: inserts <samp> tags.
  • {{var}}: inserts <var> tags.
  • {{varserif}}: inserts <var> tags with serif font styling.