HTML and CSS Reference
In-Depth Information
Yo u ' l l n o t i c e t h a t t h e e x a m p l e a b o v e h a s
bdi
around the name
Aroma too. Of course, you don't actually need that, but it won't
do any harm. On the other hand, it means you can write a script
in something like PHP that says:
foreach $restaurant echo “<bdi>”.$restaurant['name'].”
¬ </bdi> - %1 reviews”;
This way you can handle any name that comes out of the data-
base, whatever language it is in.
Using the dir attribute with bdi
The
dir
attribute can be used on the
<bdi>
element to set the
base direction. With simple strings of text like PURPLE PIZZA you
don't really need it, however if your
<bdi>
contains text that is
itself bidirectional you'll want to indicate the base direction.
Before HTML5, you could only set the
dir
attribute to
ltr
or
rtl
.
The problem is that in a situation like the one described above,
where you are pulling strings from a database or user, you may
not know which of these to use.
That's why HTML5 has provided a new auto value for the
dir
attribute, and
bdi
comes with that set by default. The auto value
tells the browser to look at the first strongly typed character in
the element and work out from that what the base direction of
the element should be. If it's a Hebrew (or Arabic, and so on)
character, the element will get a direction of
rtl
. If it's, say, a
Latin character, the direction will be
ltr
.
In rare instances this may not give the desired outcome, but in
the vast majority of cases it should produce the expected result.
Note that this isn't implemented anywhere yet, but as informa-
tion about it is so scarce, we've included it here.
<details>
I'm very fond of the
<details>
element. It's cool because it intro-
duces native support for a common behaviour—an expanding/
collapsing area—thereby removing the need for custom Java-
Script (or, something I've seen on far too many sites to be funny,
pulling in the full jQuery library).
