1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
---
title: <bdi>
slug: Web/HTML/Elemento/bdi
tags:
- BiDi
- Elemento
- HTML
- Referencia
- Semántica HTML a nivel de texto
- Web
translation_of: Web/HTML/Element/bdi
---
<h2 id="Resumen">Resumen</h2>
<p>El elemento <em>HTML <code><bdi></code> </em>(o elemento de aislamiento Bi-Direccional) aisla un trozo de texto para que pueda ser formateado con una dirección diferente al texto que hay fuera de él.</p>
<p>Es útil al embeber o incrustart texto del que se desconoce la direccionalidad, por ejemplo proveniente de una base de datos, dentro de un texto con una direccionalidad fija.</p>
<p class="note">Aunque el mismo efecto visual se puede conseguir usando la regla CSS {{cssxref("unicode-bidi")}}<code>: isolate</code> en un elemento {{HTMLElement("span")}} u otro elemento de formateado de texto, el significado semántico sólo se consigue usando el elemento<code> <bdi></code>. En especial los navegadores permiten ignorar los estilos CSS. En tal caso el texto se mostrará correctamente usando el elemento HTML pero será basura usando CSS para fijar la semántica.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th>
<td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>, contenido palpable.</td>
</tr>
<tr>
<th scope="row">Contenido permitido</th>
<td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Flow_content">Phrasing content</a>.</td>
</tr>
<tr>
<th scope="row">Omisión de etiqueta</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">Elementos padre permitidos</th>
<td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Flow_content">phrasing content</a>.</td>
</tr>
<tr>
<th scope="row">Interfaz DOM</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Atributos">Atributos</h2>
<p>Como los demás elementos HTML , este elemento tiene los <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>, pero con una pequeña diferencia semántica: el atributo <strong>dir </strong>no se hereda. Si no está definidio, su valor por defecto es <code>auto</code> y permitirá a los navegadores decidir la dirección basándose en el contexto del elemento.</p>
<h2 id="Ejemplo">Ejemplo</h2>
<pre class="brush: html"><p dir="ltr">Esta palabara arábica<bdi>ARABIC_PLACEHOLDER</bdi> se muestra automáticamente de derecha a izquierda.</p>
</pre>
<h3 id="Resultado">Resultado</h3>
<p dir="ltr">Esta palabra arábica REDLOHECALP_CIBARA se muestra automáticamente de derecha a izquierda.</p>
<h2 id="Specifications" name="Specifications">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdi-element', '<bdi>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'the-bdi-element.html#the-bdi-element', '<bdi>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>16</td>
<td>{{CompatGeckoDesktop("10.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte Básico</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile("10.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<h2 dir="ltr" id="Ver_además">Ver además</h2>
<ul>
<li>Elementos HTML relacionados: {{HTMLElement("bdo")}}</li>
<li>Propiedades HTML relacionadas: {{cssxref("direction")}}, {{cssxref("unicode-bidi")}}</li>
</ul>
<p>{{HTMLRef}}</p>
|
