Day 76 of 100DaysOfSpec, bdi, bdo, span, br, wbr elements

I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. Read the initial intent/backstory. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.

Currently reading in 4.5 Text-level semantics.

4.5.26 The bdi element

“The bdi element represents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting.”

• Essentially to prevent confusing the algorithm that handles direction of text when you have right-to-left text inside left-to-right text (or vice-versa).
• The dir attribute doesn’t inherit from its parent.
• Default value for dir is auto.

4.5.27 The bdo element

“The bdo element represents explicit text directionality formatting control for its children.”

• Essentially allows you to override the algorithm mentioned in the bid notes.
• Obviously, you need to supply the element with directionality information. The dir attribute can be set to ltr or rtl only. You can’t use auto because…that wouldn’t be an override.

4.5.28 The span element

“The span element doesn't mean anything on its own…”

Basically just a hook for styling or global attributes. Probably of greatest interest to web devs is how this element relates to others, e.g. what you can put inside it. That would be [](https://www.w3.org/TR/html5/dom.html#phrasing-content-1“phrasing content”) elements.

4.5.29 The br element

“The br element represents a line break.”

• Self-closing tag (<br>).
• Can’t have children: elements or text.
• Could style fancily if you wanted to.
• Should only be used for semantically-necessary breaks in text (poetry, new lines in a physical address), as opposed to what a lot of people use them for: a hack for vertical spacing or for “thematic” breaks in text where two p tags would be more appropriate.

4.5.30 The wbr element

“The wbr element represents a line break opportunity.”

Never heard of this one before! You use it to tell the user agent that it’s okay to wrap a really long chunk of text that would otherwise be parsed as a single word and possibly overflow its container. You could use CSS to achieve something similar, but this would give you greater control and make the distinction on a semantic level, vs. just visual.

Self-closing tag.

4.5.31 Usage summary

I think it is nice that this section exists, as the “Text-level semantics” chapter is a long one.