bdi ... ⁄bdi
HTML5 bdi element
The bdi element allows you to isolate text from its surrounding content for bidirectional text formatting. »video
About bdi
- is an optional element
- multiple bdi elements allowed per HTML5 document
Parents, children bdi
- bdi nested within elements »bdi parents
- elements nested within bdi »bdi children
»examples
Attributes bdi
- required: none
- optional: global attributes, event attributes
Observation: the default value of the dir global attribute is always auto (let the user agent decide text's directionality based on BIDI algorithm) on this element; it does not inherit the value of dir attribute, if any, from its parent .
Syntax bdi
| 1 | <> ... </>» video |
Attributes and Values bdi (comma separated)
| < | attribute | = | "attribute_value(s)" | > | Video | Examples |
|---|---|---|---|---|---|---|
| 1. specific attributes | ||||||
| All Specific Attributes | ||||||
| 2. global attributes | ||||||
| 1. | accesskey | = | keyboard key | »img | < accesskey="h"> ... </> | |
| 2. | class | = | class name | »html »img | < class="class_name"> ... </> | |
| 3. | contenteditable | = | "", , true, false | »html | < contenteditable="true"> ... </> | |
| 4. | contextmenu | = | menu id value | »html | < contextmenu="menu_id_value"> ... </> | |
| 5. | data-* | = | value | - | < data-http-error="404"> ... </> | |
| 6. | dir | = | ltr, rtl, auto | »html | < dir="ltr"> ... </> | |
| 7. | draggable | = | true, , false | »img | < draggable="false"> ... </> | |
| 8. | dropzone | = | copy, move, link, string:, file: | - | < dropzone="copy"> ... </> | |
| 9. | hidden | = | "", , hidden | »html »img | < hidden="hidden"> ... </> | |
| 10. | id | = | id name | »html »img | < id="unique_id_name"> ... </> | |
| 11. | itemid | = | URL | - | - | |
| 12. | itemprop | = | string | »link »a | - | |
| 13. | itemref | = | string | - | - | |
| 14. | itemscope | = | "", , itemscope | - | - | |
| 15. | itemtype | = | absolute URL | - | - | |
| 16. | lang | = | language code | »html »head»title »img | < lang="en"> ... </> | |
| 17. | spellcheck | = | "", , true, false | »html | < spellcheck="true"> ... </> | |
| 18. | style | = | CSS property:value | »html »img | < style="color:red"> ... </> | |
| 19. | tabindex | = | integer | »img | < tabindex="3"> ... </> | |
| 20. | title | = | text | »html »link»style »abbr»dfn »img »meter | < title="html page"> ... </> | |
| 21. | translate | = | "", yes, no | »html »img | < translate="yes"> ... </> | |
| All Global Attributes | ||||||
| 3. global event attributes | ||||||
| 1. | onclick | = | script | » list | <element onclick="script" > ... | |
| 2. | ondblclick | = | script | » list | <element ondblclick="script" > ... | |
| All Event Attributes | ||||||
Video demonstration bdi element
HTML5 bdi element: bidirectional text isolation and formatting
| min | video details |
|---|---|
| 00:00 | video tutorial: bdi element |
| 00:05 | the bdi element allows you to isolate text from its surrounding content for bidirectional text formatting: the BIDI algorithm |
| 00:10 | bidirectional text = text in both text directionalities: LTR = left-to-right and RTL = right-to-left |
| 00:14 | just like in our paragraph below |
| 00:18 | the directionality of this text is left-to-right (LTR): e.g. specific to Latin alphabet |
| 00:22 | while the directionality of this text is right-to-left (RTL): e.g. specific to Arabic, Hebrew alphabet and has been isolated with bdi element (the Arabic name is between the start tag and the end tag of the bdi element) |
| 00:41 | the browser display is okay: first the code, followed by the name of the person and its phone number |
| 00:46 | BUT if we remove the bdi element, and the Arabic name is no longer isolated, the BIDI algorithm still applies taking into account besides the Arabic name the phone number too → the phone number will be RTL aligned, though is not the case, passing in front of the Arabic name ⁄ or after the Arabic name (from an RTL perspective), leading to confusion |
| 01:06 | repeating this operation 1 more time: just pay attention to what is happening with the phone number when we remove the bdi element |
| 01:25 | it is no longer obvious which one is the phone number → confusion |
| 01:45 | example 2: the whole text of the 2nd paragraph has 1 directionality: left-to-right → the Joe X. name is isolated though is not the case, the browser display is not affected; bdi can be removed |
| 02:01 | bdi utility: for user-generated content if, let's say, you import names from your database into your page and some names have a right-to-left directionality (like Arabic or Hebrew names), in order to avoid a confusion like the one previously illustrated in this video tutorial, you can use the bdi element to isolate all names |
| 02:14 | browser display okay, no confusion |
For more information about the element, please see the specs: W3C ⁄ WHATWG