files/ca/web/html/element/bdi/index.html


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/Element/bdi
tags:
  - BiDi
  - Element
  - HTML
  - HTML text-level semantics
  - Referencia
  - Web
translation_of: Web/HTML/Element/bdi
---
<h2 id="Sumari">Sumari</h2>

<p><span id="result_box" lang="ca"><span>El element 'HTML</span> <span>&lt;</span><span>BDI</span><span>&gt;</span> <span>(o Element d'</span></span><span lang="ca"><span>aïllament</span> <span>bidireccional</span> <span>)</span> <span>Aïlla </span><span>un</span> <span>fragment</span> <span>de text que</span> <span>podrie ser</span> <span>formatat</span> <span>en una direcció</span> <span>diferent d'un altre</span> <span>text</span> <span>fora d'aquest.</span></span></p>

<p>Aquest element és útil quan s'incrusta text amb una direccionalidad desconeguda, d'una base de dades per exemple, en un text amb una direccionalidad fixa.</p>

<p class="note"><span id="result_box" lang="ca"><span>Tot i que el</span> <span>mateix</span> <span>efecte visual</span> <span>es</span> <span>pot</span> <span>aconseguir utilitzant</span> <span>la regla</span> <span>CSS</span></span> {{cssxref("unicode-bidi")}}<code>: aïllar</code> en un {{HTMLElement("span")}} <span id="result_box" lang="ca"><span>o un altre</span> <span>element</span> <span>de</span> <span>formatat</span> <span>de text, el</span> <span>significat</span> <span>semàntic</span> <span>és</span> <span>només</span> <span>transmès</span> <span>per l'element</span> </span><code>&lt;bdi&gt;</code>. <span id="result_box" lang="ca"><span>Especialment</span><span>, els</span> <span>navegadors</span> <span>se'ls permet</span> <span>fer cas</span> <span>omís</span> <span>d'estil</span> <span>CSS</span></span>. <span id="result_box" lang="ca"><span>En aquest cas,</span> <span>el text</span> <span>encara</span> <span>es</span> <span>mostra</span> <span>correctament</span> <span>usant</span> <span>l'element</span> <span>HTML, però</span> <span>arribarà a</span> <span>ser escombraries</span> <span>quan s'utilitza</span> <span>l'estil</span> <span>CSS per</span> <span>transmetre</span> <span>semàntica.</span></span></p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categories de contingut</a></th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contingut de Flux</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>, contingut palpable.</td>
  </tr>
  <tr>
   <th scope="row">Contingut permès</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">Omissió de l'etiqueta</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Elements pares permesos</th>
   <td>Qualsevol element que accepti <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">Interfície DOM</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributs">Atributs</h2>

<p><span id="result_box" lang="ca"><span>Igual</span> <span>que tots els altres</span> <span>elements</span> <span>HTML</span><span>, aquest element</span> <span>té els</span><span> </span></span><a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">atributs global</a>, <span id="result_box" lang="ca"><span>amb una</span> <span>lleugera</span> <span>diferència</span> <span>semàntica</span></span>: <span id="result_box" lang="ca"> <span>l'atribut <strong>dir</strong></span> <span>no s'hereta</span></span>. <span id="result_box" lang="ca"> <span>Si</span> <span>no s'estableix</span> <span>el seu valor, per</span> <span>defecte és el</span> <span>d'</span></span><code>auto,</code><span id="result_box" lang="ca"><span class="alt-edited"> deixar el navegador decidir la direcció basat en el contingut de l'element.</span></span></p>

<h2 id="Exemple">Exemple</h2>

<pre class="brush: html">&lt;p dir="ltr"&gt;This arabic word &lt;bdi&gt;ARABIC_PLACEHOLDER&lt;/bdi&gt; is automatically displayed right-to-left.&lt;/p&gt;
</pre>

<h3 id="Resultat">Resultat</h3>

<p dir="ltr"><span id="result_box" lang="ca"><span>Aquesta</span> <span>paraula àrab</span> <span>REDLOHECALP_CIBARA</span> <span>es</span> <span>visualitza</span> <span>automàticament</span> <span>de dreta a</span> <span>esquerra</span><span>.</span></span></p>

<h2 id="Specifications" name="Specifications">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdi-element', '&lt;bdi&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'the-bdi-element.html#the-bdi-element', '&lt;bdi&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Producte</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</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>Producte</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</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="Veure">Veure</h2>

<ul>
 <li><span id="result_box" lang="ca"><span>Element</span> <span>HTML</span> relacionat</span>: {{HTMLElement("bdo")}}</li>
 <li><span id="result_box" lang="ca"><span>Propietats</span> <span>HTML</span> <span>relacionades</span></span>: {{cssxref("direction")}}, {{cssxref("unicode-bidi")}}</li>
</ul>

<p>{{HTMLRef}}</p>