Skip to content

Commit 4bbddb5

Browse files
xfqxfq
authored
Translate qa-bidi-space into zh-hans (#742)
1 parent 445d5bc commit 4bbddb5

File tree

6 files changed

+222
-26
lines changed

6 files changed

+222
-26
lines changed

‎questions/qa-bidi-space-data/eg-space-ok.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<!DOCTYPE html>
22
<html lang="ar" >
33
<head>
4-
<meta charset="utf-8" />
4+
<meta charset="utf-8">
55
<title>No space at end of span</title>
6-
<script type="text/javascript" src="../../javascript/demos/source.js"></script>
7-
<link rel="stylesheet" type="text/css" href="../../javascript/demos/source.css" />
6+
<script src="../../javascript/demos/source.js"></script>
7+
<link rel="stylesheet" type="text/css" href="../../javascript/demos/source.css">
88
<!-- cosmetic styling -->
99
<style>
1010
#htmlsrc { margin: 1em; font-size: 30px; color:#001697; font-family: serif; }

‎questions/qa-bidi-space-data/eg-space-problem.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<!DOCTYPE html>
22
<html lang="ar" >
33
<head>
4-
<meta charset="utf-8" />
4+
<meta charset="utf-8">
55
<title>Space at end of span</title>
6-
<script type="text/javascript" src="../../javascript/demos/source.js"></script>
7-
<link rel="stylesheet" type="text/css" href="../../javascript/demos/source.css" />
6+
<script src="../../javascript/demos/source.js"></script>
7+
<link rel="stylesheet" type="text/css" href="../../javascript/demos/source.css">
88
<!-- cosmetic styling -->
99
<style>
1010
#htmlsrc { margin: 1em; font-size: 30px; color:#001697; }

‎questions/qa-bidi-space-data/translations.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
var trans = { }
22

3-
trans.versions = ['en','sv'];
3+
trans.versions = ['en','sv','zh-hans'];
44

55
trans.outofdatetranslations = [];
66

‎questions/qa-bidi-space.en.html‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
4+
<meta charset="utf-8">
55
<title>Bidi space loss</title>
6-
<meta name="description" content="Why does my browser collapse spaces between Latin and Arabic/Hebrew text, and how can I fix it" />
6+
<meta name="description" content="Why does my browser collapse spaces between Latin and Arabic/Hebrew text, and how can I fix it">
77
<script>
88
var f = { }
99

@@ -20,7 +20,7 @@
2020
f.path = '../' // what you need to prepend to a URL to get to the /International directory
2121

2222
// AUTHORS AND TRANSLATORS should fill in these assignments:
23-
f.thisVersion = { date:'2016-02-22', time:'18:23'} // date and time of latest edits to this document/translation
23+
f.thisVersion = { date:'2025-07-31', time:'18:23'} // date and time of latest edits to this document/translation
2424
f.contributors = '' // people providing useful contributions or feedback during review or at other times
2525
// also make sure that the lang attribute on the html tag is correct!
2626
f.sources = '' // describes sources of information
@@ -38,8 +38,8 @@
3838
<!--TRANSLATORS must change -en in the line just above to the subtag for their language! -->
3939
<script src="../javascript/doc-structure/article-2022.js"> </script>
4040
<script src="../javascript/articletoc-2022.js"></script>
41-
<link rel="stylesheet" href="../style/article-2022.css" />
42-
<link rel="copyright" href="#copyright"/>
41+
<link rel="stylesheet" href="../style/article-2022.css">
42+
<link rel="copyright" href="#copyright">
4343
<script src="../javascript/prism.js"></script>
4444
<link rel="stylesheet" href="../style/prism.css">
4545
<style>
@@ -92,7 +92,7 @@ <h3>A likely cause</h3>
9292
</figure>
9393
<p>Code such as the above would produce the following result, if we substitute Arabic and English for the content.</p>
9494
<figure class="example" dir="rtl">
95-
<img src="qa-bidi-space-data/missing-space-1.png" alt="Picture of the result, showing no space to left of Latin text." />
95+
<img src="qa-bidi-space-data/missing-space-1.png" alt="Picture of the result, showing no space to left of Latin text.">
9696
<div class="demolink" dir="ltr"><a href="qa-bidi-space-data/eg-space-problem" target="text">See live demo.</a></div>
9797
</figure>
9898
<p>Note that this effect also occurs when right-to-left text is embedded in a left-to-right passage.</p>
@@ -108,7 +108,7 @@ <h3>How to fix it</h3>
108108
</figure>
109109
<p>For example, moving the space after <span class="qterm">W3C</span> outside the <code class="kw" translate="no">span</code> in the real example above would produce a result that looks as expected.</p>
110110
<figure class="example" dir="rtl">
111-
<img src="qa-bidi-space-data/missing-space-2.png" alt="Picture of the result, showing space on both sides of Latin text." />
111+
<img src="qa-bidi-space-data/missing-space-2.png" alt="Picture of the result, showing space on both sides of Latin text.">
112112
<div class="demolink" dir="ltr"><a href="qa-bidi-space-data/eg-space-ok" target="text">See live demo.</a></div>
113113
<!--<p dir="rtl"> العالمية (W3C) تخلق قواعد</p>-->
114114
</figure>
@@ -125,13 +125,9 @@ <h2>Additional information</h2>
125125
<h3>Why does this happen?</h3>
126126
<p>Only read this section if you want the technical details about why this happens.</p>
127127
<p>The expected behavior when the text is displayed is not described in detail in the HTML specifications, but <em>is</em> described
128-
in CSS specifications. Although the examples on this page do not use CSS, the same principles apply. The following is taken from the <a href="https://www.w3.org/TR/css-text-3/#white-space-phase-1">CSS Text Module Level 3 Working Draft</a>:</p>
128+
in CSS specifications. Although the examples on this page do not use CSS, the same principles apply. The following is taken from the <a href="https://www.w3.org/TR/css-text-3/#white-space-phase-1">CSS Text Module Level 3 Candidate Recommendation</a>:</p>
129129
<blockquote>
130-
<p>Any space immediately following another collapsible space—even one
131-
outside the boundary of the inline containing that space, provided they
132-
are both within the same inline formatting context—is collapsed to
133-
have zero advance width. (It is invisible, but retains its <i>soft wrap opportunity</i>, if
134-
any.)</p>
130+
<p>Any collapsible space immediately following another collapsible space—​even one outside the boundary of the inline containing that space, provided both spaces are within the same inline formatting context—​is collapsed to have zero advance width. (It is invisible, but retains its soft wrap opportunity, if any.)</p>
135131
</blockquote>
136132
<p> Given a scenario as follows, where the colors represent spaces (U+0020):</p>
137133
<blockquote>

‎questions/qa-bidi-space.sv.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!DOCTYPE html>
22
<html lang="sv">
33
<head>
4-
<meta charset="utf-8" />
4+
<meta charset="utf-8">
55
<title>Saknat mellanrum vid bidi-text</title>
6-
<meta name="description" content="Varför tar webbläsaren bort mellanslag mellan latinsk och arabisk/hebreisk text, och hur kan jag reparera detta?" />
6+
<meta name="description" content="Varför tar webbläsaren bort mellanslag mellan latinsk och arabisk/hebreisk text, och hur kan jag reparera detta?">
77
<script>
88
var f = { }
99
// OLLE 14:00 - 14:45 15:00 - 15:45 10:00 - 11:00
@@ -38,8 +38,8 @@
3838
<!--TRANSLATORS must change -en in the line just above to the subtag for their language! -->
3939
<script src="../javascript/doc-structure/article-2022.js"> </script>
4040
<script src="../javascript/articletoc-2022.js"></script>
41-
<link rel="stylesheet" href="../style/article-2022.css" />
42-
<link rel="copyright" href="#copyright"/>
41+
<link rel="stylesheet" href="../style/article-2022.css">
42+
<link rel="copyright" href="#copyright">
4343
<script src="../javascript/prism.js"></script>
4444
<link rel="stylesheet" href="../style/prism.css">
4545
<style>
@@ -123,7 +123,7 @@ <h3>En sannolik orsak</h3>
123123
lägger in arabisk och engelsk text som innehåll.
124124
</p>
125125
<figure class="example" dir="rtl">
126-
<p><img src="qa-bidi-space-data/missing-space-1.png" alt="Bild visande resultatet, vilket saknar mellanslag till vänster om latinsk text." /></p>
126+
<p><img src="qa-bidi-space-data/missing-space-1.png" alt="Bild visande resultatet, vilket saknar mellanslag till vänster om latinsk text."></p>
127127
<div class="demolink" dir="ltr" style="margin-top: 2em;"><a href="qa-bidi-space-data/eg-space-problem" target="text">Visa exemplet i webbläsaren.</a></div>
128128
</figure>
129129
<p>
@@ -153,7 +153,7 @@ <h3>Hur reparera detta</h3>
153153
till att placeras efter <code class="kw" translate="no">span</code>.
154154
</p>
155155
<figure class="example" dir="rtl">
156-
<p><img src="qa-bidi-space-data/missing-space-2.png" alt="Bild av resultatet, som uppvisar mellanslag på båda sidor om den latinska texten." /></p>
156+
<p><img src="qa-bidi-space-data/missing-space-2.png" alt="Bild av resultatet, som uppvisar mellanslag på båda sidor om den latinska texten."></p>
157157
<div class="demolink" dir="ltr"><a href="qa-bidi-space-data/eg-space-ok" target="text">Visa exemplet i webbläsaren.</a></div>
158158
</figure>
159159
<p>

‎questions/qa-bidi-space.zh-hans.html‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-hans">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>双向文本空格丢失</title>
6+
<meta name="description" content="为什么我的浏览器会折叠拉丁字母和阿拉伯字母/希伯来字母之间的空格，如何修复这个问题？">
7+
<script>
8+
var f = { }
9+
10+
// AUTHORS should fill in these assignments:
11+
f.directory = 'questions'+'/' // the path to this file, not including /International or the file name
12+
f.filename = 'qa-bidi-space' // the file name WITHOUT extensions
13+
f.authors = 'Richard Ishida, W3C' // author(s) and affiliations
14+
f.previousauthors = '' // as above
15+
f.modifiers = '' // people making substantive changes, and their affiliation
16+
f.searchString = 'qa-bidi-space' // blog search string - usually the filename without extensions
17+
f.firstPubDate = '2003-07-04' // date of the first publication of the document (after review)
18+
f.lastSubstUpdate = { date:'2016-02-07', time:'22:47'} // date and time of latest substantive changes to this document
19+
f.status = 'published' // should be one of draft, review, published, notreviewed or obsolete
20+
f.path = '../' // what you need to prepend to a URL to get to the /International directory
21+
22+
// AUTHORS AND TRANSLATORS should fill in these assignments:
23+
f.thisVersion = { date:'2025-07-31', time:'18:23'} // date and time of latest edits to this document/translation
24+
f.contributors = '' // people providing useful contributions or feedback during review or at other times
25+
// also make sure that the lang attribute on the html tag is correct!
26+
f.sources = '' // describes sources of information
27+
28+
// TRANSLATORS should fill in these assignments:
29+
f.translators = '薛富侨' // translator(s) and their affiliation - a elements allowed, but use double quotes for attributes
30+
31+
f.breadcrumb = 'characters'
32+
33+
f.additionalLinks = ''
34+
</script>
35+
<script src="qa-bidi-space-data/translations.js"> </script>
36+
<script src="../javascript/doc-structure/article-dt.js"> </script>
37+
<script src="../javascript/boilerplate-text/boilerplate-zh-hans.js"> </script>
38+
<!--TRANSLATORS must change -en in the line just above to the subtag for their language! -->
39+
<script src="../javascript/doc-structure/article-2022.js"> </script>
40+
<script src="../javascript/articletoc-2022.js"></script>
41+
<link rel="stylesheet" href="../style/article-2022.css">
42+
<link rel="copyright" href="#copyright">
43+
<script src="../javascript/prism.js"></script>
44+
<link rel="stylesheet" href="../style/prism.css">
45+
<style>
46+
.el { color: #D61B1B; font-size: 100%; font-weight: 300; margin: 0 2px; }
47+
</style>
48+
<script>
49+
function highlightCode () {
50+
var examples = document.querySelectorAll('figure.example, div.example')
51+
for (var i=0;i<examples.length;i++) {
52+
var re = /&lt;([^&]+)&gt;/
53+
var content = examples[i].innerHTML
54+
out = content.replace(/&lt;([^&]+)&gt;/g,'<span class="el">&lt;$1&gt;</span>')
55+
examples[i].innerHTML = out
56+
}
57+
}
58+
</script>
59+
</head>
60+
61+
<body>
62+
<header>
63+
<nav id="mainNavigation"></nav><script>document.getElementById('mainNavigation').innerHTML = mainNavigation</script>
64+
65+
<h1>双向文本空格丢失</h1>
66+
</header>
67+
68+
69+
<div id="audience">
70+
<div id="updateInfo"></div><script>document.getElementById('updateInfo').innerHTML = g.updated</script>
71+
</div>
72+
73+
<section id="question">
74+
<h2>问题</h2>
75+
<p class="question">为什么我的浏览器会折叠拉丁字母和阿拉伯字母/希伯来字母之间的空格，如何修复这个问题？</p>
76+
</section>
77+
78+
79+
<section id="answer">
80+
<h2>答案</h2>
81+
82+
<section id="cause">
83+
<h3>可能的原因</h3>
84+
<div class="insideinfonote">
85+
<p class="info">代码示例中从右向左的文本在这里用大写字母表示，从左向右的文本用小写字母表示。</p>
86+
</div>
87+
<p>如果文本后面跟着一个行内元素，带有<code class="kw" translate="no">dir</code>属性，并且含有空白字符，拉丁字母和阿拉伯字母/希伯来字母之间的空格可能会被折叠。</p>
88+
<p>在以下的代码模式中，彩色矩形表示有问题的空格。（大写字母表示RTL文本，小写内容表示LTR。）</p>
89+
<figure class="example">
90+
<p><code>&lt;p dir="rtl"&gt;RTL_TEXT &lt;span dir="ltr"&gt;ltr_text<span style="background-color: orange;">&nbsp;</span>&lt;/span&gt;RTL_TEXT&lt;/p&gt; </code></p>
91+
</figure>
92+
<p>如果我们用阿拉伯字母和英文替换内容，上述代码会产生以下结果。</p>
93+
<figure class="example" dir="rtl">
94+
<img src="qa-bidi-space-data/missing-space-1.png" alt="结果图片，显示拉丁字母本左侧没有空格。">
95+
<div class="demolink" dir="ltr"><a href="qa-bidi-space-data/eg-space-problem" target="text">查看实时演示</a></div>
96+
</figure>
97+
<p>请注意，当从右到左的文本嵌入到从左到右的段落中时，也会出现这种效果。</p>
98+
</section>
99+
100+
<section id="whattodo">
101+
<h3>如何修复</h3>
102+
<p>如果前面的部分描述了你代码的样子，解决方案是删除行内元素结束标签前的所有空格，或者删除<code class="kw" translate="no">dir</code>属性（如果合适的话）。</p>
103+
<p>新的代码模式：</p>
104+
<figure class="example">
105+
<p><code>&lt;p dir="rtl"&gt;RTL_TEXT &lt;span dir="ltr"&gt;ltr_text&lt;/span&gt;<span style="background-color: orange;">&nbsp;</span>RTL_TEXT&lt;/p&gt; </code></p>
106+
</figure>
107+
<p>例如，在上面的例子里，把<span class="qterm">W3C</span>后面的空格移到<code class="kw" translate="no">span</code>的外面，会产生预期的结果。</p>
108+
<figure class="example" dir="rtl">
109+
<img src="qa-bidi-space-data/missing-space-2.png" alt="结果图片，显示拉丁字母本两侧都有空格。">
110+
<div class="demolink" dir="ltr"><a href="qa-bidi-space-data/eg-space-ok" target="text">查看实时演示</a></div>
111+
<!--<p dir="rtl"> العالمية (W3C) تخلق قواعد</p>-->
112+
</figure>
113+
<p>在这种情况下，我们并不需要<span class="qterm">W3C</span>周围的<code class="kw" translate="no">span</code>元素来产生正确的显示顺序。省略属性或整个<code class="kw" translate="no">span</code>元素也可以解决问题（尽管我们通常建议标记所有相反方向的文本）。</p>
114+
</section>
115+
</section>
116+
117+
118+
<section id="additionalinfo">
119+
<h2>其他信息</h2>
120+
121+
<section id="why">
122+
<h3>为什么会发生这种情况？</h3>
123+
<p>如果你想了解为什么会发生这种情况的技术细节时，可以阅读本节。</p>
124+
<p>文本显示时的预期行为在HTML规范中没有详细描述，但在CSS规范中<strong>有</strong>描述。虽然本页面的示例没有用CSS，但同样的原则适用。以下内容摘自<a href="https://www.w3.org/TR/css-text-3/#white-space-phase-1">CSS文本模块第3版候选推荐标准</a>：</p>
125+
<blockquote>
126+
<p>任何紧跟在另一个可折叠空格之后的可折叠空格（即使该空格位于包含该空格的行内边界之外，只要这两个空格位于同一个行内格式化上下文中）都会被折叠，使其前进宽度为零。（它是不可见的，但保留了其软换行的机会，如果有的话。）</p>
127+
</blockquote>
128+
<p>给定如下场景，其中颜色表示空格（U+0020）：</p>
129+
<blockquote>
130+
<p>&lt;ltr&gt;a<span style="background-color: red;">&nbsp;</span>&lt;rtl&gt;<span style="background-color: orange;">&nbsp;</span>B<span style="background-color: blue;">&nbsp;</span>&lt;/rtl&gt;<span style="background-color:green;">&nbsp;</span>c&lt;/ltr&gt;</p>
131+
</blockquote>
132+
<p>规范说A后面的空格被保留，B前面的空格被删除，B后面的空格被保留，C前面的空格被删除，这给我们留下：</p>
133+
<blockquote>
134+
<p>&lt;ltr&gt;a<span style="background-color: red;">&nbsp;</span>&lt;rtl&gt;B<span style="background-color: blue;">&nbsp;</span>&lt;/rtl&gt;c&lt;/ltr&gt;</p>
135+
</blockquote>
136+
<p>然后根据Unicode双向算法进行渲染，最终结果是：</p>
137+
<blockquote>
138+
<p>a<span style="background-color: red;">&nbsp;</span><span style="background-color: blue;">&nbsp;</span>Bc</p>
139+
</blockquote>
140+
<p>请注意，A和B之间实际上有两个空格。嵌入级别可以表示如下：</p>
141+
<blockquote>
142+
<p>0<span style="background-color: red; color:white;">0</span><span style="background-color: blue; color: white;">1</span>10</p>
143+
</blockquote>
144+
</section>
145+
146+
<section id="test">
147+
<h3>在我的浏览器中会发生什么？</h3>
148+
<p>下面的框显示了代码示例，和代码在此页面上的实现。你可以测试你的浏览器的行为。所有例子的上下文都是从右到左的。垂直的橙色条表示空格字符的位置。</p>
149+
<figure>
150+
<div class="example" style="margin-left:0; margin-right: 0;">
151+
<p>ARABIC<span style="background-color:orange;">&nbsp;</span>&lt;span dir=&quot;ltr&quot;&gt;latin<span style="background-color:orange;">&nbsp;</span>&lt;/span&gt;ARABIC</p>
152+
<p dir="rtl">صفحة الترجمة لموقع <span dir="ltr">W3C </span>على الرابط</p>
153+
</div>
154+
</figure>
155+
<figure>
156+
<div class="example" style="margin-left:0; margin-right: 0;">
157+
<p>ARABIC<span style="background-color:orange;">&nbsp;</span>&lt;span dir=&quot;ltr&quot;&gt;latin<span style="background-color:orange;">&nbsp;</span>&lt;/span&gt;<span style="background-color:orange;">&nbsp;</span>ARABIC</p>
158+
<p dir="rtl">صفحة الترجمة لموقع <span dir="ltr">W3C </span> على الرابط</p>
159+
</div>
160+
</figure>
161+
<figure>
162+
<div class="example" style="margin-left:0; margin-right: 0;">
163+
<p>ARABIC<span style="background-color:orange;">&nbsp;</span>&lt;span dir=&quot;ltr&quot;&gt;latin&lt;/span&gt;<span style="background-color:orange;">&nbsp;</span>ARABIC</p>
164+
<p dir="rtl">صفحة الترجمة لموقع <span dir="ltr">W3C</span> على الرابط</p>
165+
</div>
166+
</figure>
167+
<figure>
168+
<div class="example" style="margin-left:0; margin-right: 0;">
169+
<p>ARABIC<span style="background-color:orange;">&nbsp;</span>&lt;span&gt;latin<span style="background-color:orange;">&nbsp;</span>&lt;/span&gt;ARABIC</p>
170+
<p dir="rtl">صفحة الترجمة لموقع <span>W3C </span>على الرابط</p>
171+
</div>
172+
</figure>
173+
<figure>
174+
<div class="example" style="margin-left:0; margin-right: 0;">
175+
<p>ARABIC&lt;span dir=&quot;ltr&quot;&gt;<span style="background-color:orange;">&nbsp;</span>latin&lt;/span&gt;<span style="background-color:orange;">&nbsp;</span>ARABIC</p>
176+
<p dir="rtl">صفحة الترجمة لموقع<span> W3C</span> على الرابط</p>
177+
</div>
178+
</figure>
179+
</section>
180+
</section>
181+
182+
183+
<section id="endlinks">
184+
<h2>延伸阅读</h2>
185+
<aside class="section" id="survey"> </aside><script>document.getElementById('survey').innerHTML = g.survey</script>
186+
<ul id="full-links">
187+
<li>
188+
<p>相关链接：<cite>编写网页</cite></p>
189+
<ul>
190+
<li><a href="https://www.w3.org/International/techniques/authoring-html?collapse&amp;open=direction">文本方向</a></li>
191+
<li><a href="https://www.w3.org/International/techniques/authoring-html#inline">行内混合文本方向</a></li>
192+
</ul>
193+
</li>
194+
</ul>
195+
</section>
196+
197+
<footer id="thefooter"></footer><script>document.getElementById('thefooter').innerHTML = g.bottomOfPage</script>
198+
<script>completePage(); highlightCode();</script>
199+
</body>
200+
</html>

0 commit comments

Comments
 (0)