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
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).
dirattribute doesn’t inherit from its parent.
- Default value for
4.5.27 The bdo element
bdo element represents explicit text directionality formatting control for its children.”
- Essentially allows you to override the algorithm mentioned in the
- Obviously, you need to supply the element with directionality information. The
dirattribute can be set to
rtlonly. You can’t use auto because…that wouldn’t be an override.
4.5.28 The span element
span element doesn’t mean anything on its own…”
4.5.29 The br element
“The br element represents a line break.”
- Self-closing tag (
- 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
ptags would be more appropriate.
4.5.30 The wbr element
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.
4.5.31 Usage summary
I think it is nice that this section exists, as the “Text-level semantics” chapter is a long one.