劉 旭(SAP中國(guó)研究院 商務(wù)智能部, 上海 201203)

雙向文本元素在SVG中的顯示技術(shù)①

劉 旭
(SAP中國(guó)研究院 商務(wù)智能部, 上海 201203)

雙向文本在SVG中的顯示是使用Unicode雙向算法實(shí)現(xiàn)的, 然而在很多情況下雙向算法無法自動(dòng)生成符合語義的正確顯示結(jié)果, 需要進(jìn)行額外的設(shè)置. 通過分析雙向算法的基本原理, 深入探討了雙向文本顯示中容易出現(xiàn)問題的幾個(gè)方面, 包括文本方向的判定, 特殊字符顯示位置, 文本元素中跨越tspan元素的文字重排, 以及設(shè)置顯示方向之后位置的變化. 針對(duì)各個(gè)問題的具體情況和不同瀏覽器的差異, 使用SVG中的特定屬性給出了進(jìn)行正確設(shè)置的方式.

雙向算法; SVG; 從右到左; Unicode; 可視化

中文和英文都是橫向從左到右(Left-To-Right, 簡(jiǎn)稱LTR)排布的文字, 然而, 世界上還有大量的人使用橫向從右到左(Right-To-Left, 簡(jiǎn)稱RTL)排布的文字,阿拉伯語, 波斯語, 希伯來語,以及中國(guó)的維吾爾語都是這樣的語言[1]. 在國(guó)際化軟件的開發(fā)過程中, 不可避免地會(huì)涉及到對(duì)于從左到右與從右到左文本混排的顯示, 例如維吾爾語和漢語的混排, 或者英語和阿拉伯語的混排[2]. 不同于傳統(tǒng)的從左到右顯示的漢語或英語, 雙向文本中由于存在從右到左字符, 其顯示帶來可能一些特殊的問題, 如果不能正確處理, 就會(huì)造成顯示上的混亂, 讓文本閱讀者產(chǎn)生誤解.

在可視化軟件開發(fā)中, SVG是HTML5 中常用的矢量圖形技術(shù)[3], JavaScript語言兼具面向?qū)ο蠛秃瘮?shù)式編程風(fēng)格[4], 使用JavaScript結(jié)合SVG已經(jīng)在可視化軟件開發(fā)中得到廣泛應(yīng)用, 包括各類科學(xué)可視化[5]和信息可視化軟件[6], 而在開發(fā)中往往使用text元素(Text Element)為SVG中的圖形標(biāo)示文本標(biāo)簽[7]. 隨著國(guó)際化軟件的增多, 沒有使用正確的顯示技術(shù)而帶來的text元素中的雙向文字問題也越來越常見.

1 雙向文字方向的確定

如果使用“…”代表要顯示的文字, 在SVG中設(shè)置文字元素的代碼一般為

雙向文字在text元素中顯示首先要解決的問題,就是瀏覽器必須知道字符串中的哪些字符應(yīng)該從左到右顯示, 哪些字符應(yīng)該從右到左顯示. 有些情況下字符排布方向的判斷很容易, 但是有些情況下是難以判斷的. 例如英文與阿拉伯語混排的情況下, 阿拉伯語詞組中的阿拉伯字母必須從右到左排列, 而英文詞組中的字母必須從左到右排列, 各不同語種詞組之間的排列方向確定就更加復(fù)雜.

為了解決雙向文字排布的問題, 現(xiàn)代的瀏覽器都支持雙向文字算法[8], 各種雙向文字算法中最常用的是Unicode 雙向算法(Unicode Bidirectional Algorithm)[9]. Unicode雙向算法的基本思路是將字符串中的字符按照對(duì)于排布方向的要求分為強(qiáng)(Strong)類型, 弱(Weak)類型, 中立(Neutral)類型等幾類[10], 通過判斷字符之間的相對(duì)位置[11], 將字符串分為若干個(gè)稱為run的區(qū)段, 一個(gè)run包含一個(gè)或多個(gè)單詞, 每一個(gè)run內(nèi)部字符的方向是一致的, 各個(gè)run之間的方向則根據(jù)文本元素的基本方向來確定[12], 默認(rèn)的基本方向是從左到右. 不同的瀏覽器實(shí)現(xiàn)的雙向文字算法細(xì)節(jié)上可能不同, 若未經(jīng)聲明, 本文提到的瀏覽器是指Google Chrome瀏覽器Version 50.

圖1 阿拉伯語的默認(rèn)從右到左顯示

在不附加任何特殊屬性的情況下, 如果一句話完全由阿拉伯語字母構(gòu)成, 此時(shí)整個(gè)文本是一個(gè)run, 瀏覽器可以將其從右到左正常顯示. 圖1是一句阿拉伯語”學(xué)習(xí)音樂是有用的”的顯示.一個(gè)簡(jiǎn)單的阿拉伯語和英語混排的雙向字符串(含義為“學(xué)習(xí) SVG 1.2 是有用的”)在SVG的text元素中將顯示為圖2的樣子, 可以看到這句話被分成了三個(gè)run, (1)標(biāo)示的阿拉伯語含義是“學(xué)習(xí)”, 可見在run這個(gè)粒度上, 字符串的順序是從左到右的. (1)和(3)在run的內(nèi)部字符都是從右到左的, 而(2)的內(nèi)部字符還是從左到右的.

圖2 默認(rèn)情況下雙向文字的顯示

雖然從字符的角度來看圖2顯示的是混合語言文本, 但是從語義的角度來看, 圖1顯示的顯然是一句阿拉伯語, 只不過阿拉伯語中混入了英文詞組. 參照?qǐng)D1的顯示不難得知, 如圖2那樣的顯示方式不符合阿拉伯語使用習(xí)慣, 因?yàn)椤皩W(xué)習(xí)”這個(gè)詞明顯應(yīng)該顯示在最右邊. 要從根本上解決這個(gè)問題, 需要瀏覽器的雙向文字算法能夠根據(jù)語義確定出這是一句阿拉伯語.在文本量足夠大的情況下[13], 例如在一些翻譯軟件中,可以通過語法樹解析或是文本Unicode編碼統(tǒng)計(jì)的方法確定文本的語言[14], 從而判斷出文本的方向, 但SVG文本標(biāo)簽中的文本往往只有很少的幾個(gè)單詞, 難以進(jìn)行有效的語言檢測(cè).

SVG中的Unicode雙向算法引入的解決方案是讓開發(fā)人員在text元素中使用direction屬性設(shè)置文本方向, 從而提示Unicode雙向算法應(yīng)該使用什么樣的方向排布已經(jīng)劃分好的run, 設(shè)置方式形如

＜text direction="rtl"＞...＜/text＞圖3是將direction屬性設(shè)為rtl之后的圖2中的文字顯示情況, 可以看到(2)還在原來的位置, 而(1)和(3)互換了位置. 參照?qǐng)D1, 可以看到圖3完全符合阿拉伯語的顯示方式. 在SVG軟件開發(fā)中, 由于開發(fā)者事先往往不能確定從右到左語言的字符串中沒有任何從左到右字符, 為了正確顯示從右到左語言, direction=“rtl”的設(shè)置是必不可少的.

圖3 設(shè)置direction="rtl"后雙向文字的顯示

在一些非常特殊的情況下, 可能需要保證所有的字符都嚴(yán)格從右到左顯示, 這時(shí)候可以將文本元素的unicode-bidi 屬性設(shè)為bidi-override, 設(shè)置方式形如

這種設(shè)置方式其實(shí)就是將文本方向的判斷作了簡(jiǎn)單化處理. 圖4顯示了圖2中的文字在這種設(shè)置下的顯示情況, 可以直觀地看出這種顯示方式技術(shù)上的實(shí)現(xiàn)很簡(jiǎn)單, 然而“SVG 1.2”的顯示完全不符合英語的習(xí)慣, 難以讀懂其含義. 正因?yàn)槿绱? 實(shí)際的SVG程序開發(fā)中很少將unicode-bidi 屬性設(shè)為bidi-override, 這也從一個(gè)側(cè)面反映出雙向算法為字符串劃分run的必要性.

圖4 使用bidi-override之后的雙向字符串

2 特殊字符的方向控制

引入run的劃分和文字方向的設(shè)定之后, 雙向文本的顯示問題集中在如何正確劃分出文本的run, 而這往往涉及對(duì)于文本語義的分析, 特別是存在特殊字符的情況下.

在現(xiàn)代實(shí)際使用的各種語言中, 大量存在空格和標(biāo)點(diǎn)符號(hào), 正負(fù)號(hào), 百分號(hào)等特殊字符. 單個(gè)的特殊字符在從左到右和從右到左語言中的顯示都相同, 然而在不同的上下文中, 它們有時(shí)應(yīng)該從左到右顯示,有時(shí)應(yīng)該從右到左顯示. 在Unicode雙向算法中往往將這些特殊字符劃分為弱類型或中立類型, 如果不能正確判斷特殊字符的方向, 就無法正確顯示文本. 圖5顯示的字符串設(shè)置了direction=“rtl”, 然而(1)處的句號(hào)顯然應(yīng)該顯示在“The number is -12.3”的右邊, 而(2)處試圖顯示的數(shù)字為-12.3, 即使在阿拉伯語中, 負(fù)號(hào)也應(yīng)該顯示在12.3的左邊. 出現(xiàn)這種情況的原因是雙向算法沒能正確地判定某些特殊字符所屬于的run, 從而使符號(hào)的位置無法反映對(duì)應(yīng)的語義, 兩個(gè)同樣的-12.3, 在不同的位置顯示就不同. 文本中常見的正負(fù)號(hào), 句號(hào), 百分號(hào),省略號(hào)都可能有這種情況

圖5 特殊字符無法正確顯示的情況

為了解決這個(gè)問題, 最根本的解決方案是優(yōu)化現(xiàn)有的雙向算法, 使其可以正確判斷出特殊字符的方向.然而, 這在很多情況下無法簡(jiǎn)單地通過前后字符的編碼來判斷, 必須進(jìn)行語法解析, 例如圖5中的例子, 算法必須判斷出(1)處的句號(hào)是屬于英語句子. 即使這樣,不同的方言區(qū), 不同的特殊字符都有不同的使用習(xí)慣,例如對(duì)于負(fù)數(shù), 標(biāo)準(zhǔn)阿拉伯語中習(xí)慣跟英語中一樣將負(fù)號(hào)標(biāo)注在左邊, 如-10, 但是對(duì)于百分?jǐn)?shù), 標(biāo)準(zhǔn)阿拉伯語卻習(xí)慣將百分號(hào)也標(biāo)注在左邊, 如%10, 跟英語恰好相反, 然而有的阿拉伯語使用地區(qū), 如伊朗地區(qū)卻仍然習(xí)慣將百分號(hào)標(biāo)注在右邊, 如10%, 與英語相同. 如果雙向算法要實(shí)現(xiàn)全部特殊字符方向的自動(dòng)判斷, 其設(shè)計(jì)必然相當(dāng)復(fù)雜, 而且在文本很少的情況下判斷的準(zhǔn)確性仍然難以保證.

Unicode雙向算法使用的方法是允許算法的使用人員標(biāo)注特殊字符的方向. Unicode雙向算法將按照這些標(biāo)注結(jié)合上下文的字符進(jìn)行run 的劃分. SVG中提供的標(biāo)注方法有兩種, 一種是使用專門定義的不可見Unicode字符進(jìn)行方向標(biāo)注[15], 一種是使用內(nèi)聯(lián)元素tspan結(jié)合unicode-bidi 屬性設(shè)為embed來標(biāo)注, W3C組織推薦的方法是第二種. 對(duì)于圖5中的情況, 可以將圖5(1)處的句號(hào)和圖5(2)處的負(fù)號(hào)置入tspan元素中,方向標(biāo)記為ltr. 如果用…代替其他文本, 設(shè)置代碼形如:

圖6是這樣設(shè)置之后的顯示, 可以看到兩處負(fù)號(hào)都顯示在數(shù)字的左邊,符合數(shù)學(xué)上的要求, 而兩處句號(hào)分別根據(jù)每個(gè)句子中的文字方向來顯示, 英文的句子末尾句號(hào)顯示在整句話的最右邊, 而阿拉伯語的句子末尾句號(hào)顯示在文字的最左邊, 符合兩種語言的閱讀習(xí)慣.

圖6 使用tspan進(jìn)行設(shè)置后特殊字符的正確顯示

在雙向字符串中的括號(hào), 引號(hào)等符號(hào)也會(huì)出現(xiàn)類似問題. 括號(hào), 引號(hào)等字符是成對(duì)出現(xiàn)的(稱為Mirrored characters, 鏡像字符), 以括號(hào)為例, Unicode雙向算法有鏡像替換功能, 將一處括號(hào)的文字方向判斷之后, 會(huì)相應(yīng)地改變括號(hào)的方向[16], 有時(shí)候會(huì)造成相當(dāng)費(fèi)解的顯示錯(cuò)誤. 圖7上方的字符串是設(shè)置了direction=“rtl”之后的雙向文字, 可見字符串中出現(xiàn)了兩處左括號(hào), 而畫圈處的括號(hào)明顯應(yīng)該是一個(gè)顯示在Graphics之后的右括號(hào), 即結(jié)束括號(hào). 出現(xiàn)這種情況的原因是Unicode雙向算法將畫圈處的括號(hào)判斷為從右到左字符, 而在從右到左文本中, 結(jié)束括號(hào)應(yīng)該顯示為從左到右文本中左括號(hào)的樣子.

圖7 鏡像字符顯示的設(shè)置

為了解決這個(gè)問題, 需要像圖6那樣對(duì)結(jié)束的括號(hào)使用內(nèi)聯(lián)元素tspan, direction設(shè)為ltr, 并將unicode-bidi 屬性設(shè)為embed. 圖7下方的字符串即正確顯示的結(jié)果. SVG中完整的設(shè)置形如:

＜text direction="rtl"＞…SVG (Scalable Vector Graphics

＜tspan direction="ltr" unicode-bidi="embed"＞)

＜/tspan＞…＜/text＞

3 tspan元素的文字重排問題

雙向文本在SVG中的顯示還有一些與使用的元素相關(guān)的問題. 在前文的分析中多次提到的tspan元素是內(nèi)聯(lián)(inline)元素, 在SVG開發(fā)中, 經(jīng)常使用tspan對(duì)某些文本進(jìn)行格式的設(shè)置, 例如加粗體, 改變顏色,改變位置等[17]. 然而, 內(nèi)聯(lián)元素不像塊(block)元素一樣有自己占據(jù)的固定空間, 它是依附于塊元素存在的,特別地, 在雙向文本的情況下, 如果通過設(shè)置direction=“rtl”改變了文字方向, text元素中的文本可能跨越tspan元素進(jìn)行重排, 從而可能出現(xiàn)意料不到的結(jié)果. 以下是一段在text元素中放入兩個(gè)tspan元素, 通過設(shè)置適當(dāng)?shù)膁y屬性值顯示兩行文字的SVG示例,其中的省略號(hào)代表阿拉伯文字:

＜text＞

＜tspan dy="1em"＞Studying JavaScript 1.8 is helpful＜/tspan＞

＜tspan dy="1em"＞…JavaScript 1.8…＜/tspan＞

＜/text＞

圖8 使用tspan元素顯示為兩行的雙向文本

顯示效果如圖8所示, 文本確實(shí)已經(jīng)顯示為兩行,然而第二行的顯示存在圖2提到的問題, 不符合阿拉伯語的使用習(xí)慣. 如果按照前文所述, 在text元素上設(shè)置direction=“rtl”來解決第二行的這個(gè)問題, 將SVG代碼改為:

＜text direction="rtl"＞

＜tspan dy="1em"＞Studying JavaScript 1.8 is

helpful＜/tspan＞

＜tspan dy="1em"＞…JavaScript 1.8…＜/tspan＞

＜/text＞

那么會(huì)得到如圖9所示的顯示結(jié)果. 可以看到第一行和第二行的文本都發(fā)生了變化, 第一行原本英文顯示的內(nèi)容變成了阿拉伯語, 而原本在第一行的單詞“Studying”甚至被分成了兩個(gè)部分顯示, 這顯然不是我們期望的結(jié)果.

圖9 在text元素上設(shè)置direction=“rtl”之后的兩行雙向文本

出現(xiàn)圖9這種顯示結(jié)果的原因在于Unicode雙向算法在處理text元素中字符串方向時(shí), 可以跨tspan元素進(jìn)行. 這意味著雖然我們將text元素中的字符串拆分在了兩個(gè)tspan子元素里面, 在雙向算法判斷文本方向時(shí)并不考慮tspan的分割, 而是將所有文本當(dāng)成一句話處理. 由于“Studying JavaScript 1.8 is helpful” 先于阿拉伯語句子顯示, 在從右到左顯示的情況下, 就應(yīng)該從text元素內(nèi)部的“右邊”, 即第二個(gè)tspan開始顯示,而第二個(gè)tspan的位置被設(shè)置為第二行, 于是整個(gè)文本就成了從第二行開始顯示, 到第一行為止, 阿拉伯語句子顯示在了第一行. 需要注意的是, 每一行文本 的寬度仍然是按照默認(rèn)的從左到右情況下的文本長(zhǎng)度確定的, 參照?qǐng)D8可以直觀地看出. 由于第一行預(yù)留的寬度比阿拉伯語句子寬, 英文句子的一部分顯示在了第一行, 從而出現(xiàn)了一個(gè)單詞在上下兩行顯示的情況.

要正確顯示圖8的文本, 應(yīng)該把direction=“rtl”設(shè)置在tspan元素上, 同時(shí)需要告訴Unicode雙向算法在設(shè)置 tspan中的文本方向時(shí), 不要考慮全部的字符串.這可以通過設(shè)置unicode-bidi=“isolate”來做到[18]. 代碼可以修改為:

＜text＞

＜tspan dy="1em" unicode-bidi="isolate"

direction="rtl"＞Studying JavaScript 1.8 is helpful＜/tspan＞

＜tspan dy="1em" unicode-bidi="isolate"

direction="rtl"＞…JavaScript 1.8…＜/tspan＞

＜/text＞

圖10顯示了設(shè)置unicode-bidi=“isolate”之后的兩行雙向文本, 參照?qǐng)D3, 可以看到第二行的顯示符合阿拉伯語的使用習(xí)慣. 至于第一行的英文字符串, Unicode雙向算法能正確判斷出其屬于一個(gè)run, 不受direction=“rtl”的影響, 然而, 這里加上direction=“rtl”的設(shè)置可以影響文本顯示的位置, 使上下兩行文字右對(duì)齊.

圖10 設(shè)置unicode-bidi=“isolate”之后的兩行雙向文本

4 文字位置的控制

上文提到, 使用direction=“rtl”可能改變文字顯示的位置. 在實(shí)際使用中, 這是使用direction設(shè)置必須考慮的問題. 在未使用特殊設(shè)置的情況下, 文字都是從起始坐標(biāo)點(diǎn)向右延伸的, 設(shè)置direction=“rtl”之后文字將從當(dāng)前設(shè)定的位置向左邊延伸, 與原來的情況恰好相反, 這會(huì)影響已有的SVG文本布局. 如果要確保RTL方式文字占據(jù)的空間位置跟LTR一樣, 可以修改text元素的x值和y值, 一個(gè)更簡(jiǎn)單的方法是修改text-anchor的值, 使文本的起始點(diǎn)的相對(duì)位置發(fā)生變化, 代碼形如

＜text x="600" y="100" direction="ltr"＞…SVG 1.2…＜/text＞

＜text x="600" y="200" direction="rtl"＞…SVG 1.2…＜/text＞

＜text x="600" y="300" direction="rtl"

text-anchor="end"＞…SVG 1.2…＜/text＞

圖11 使用text-anchor對(duì)文本位置的控制

圖11 中的豎線標(biāo)示了x=“600”. 可以看到在從左到右的情況下, 文本以x=“600”為起始位置向右延伸,在從右到左的情況下, 文本以x=“600”為起始位置向左延伸. 如果在從右到左的情況下設(shè)置了text-anchor=“end”, 文本將以x=“600”為結(jié)束位置, 這樣整個(gè)文本仍然可以顯示在x=“600”豎線的右邊, 所占據(jù)的空間位置跟從左到右的情況下一樣, 這樣在開發(fā)某些應(yīng)用程序時(shí)比較方便.

如果希望文本不管被設(shè)置為從左到右還是從右到左, 占據(jù)的位置都相同, 那么可以將text-anchor設(shè)置為“middle”, 代碼形如

＜text x="600" y="100" direction="ltr" text-anchor= "middle"＞…SVG 1.2…＜/text＞

＜text x="600" y="200" direction="rtl" text-anchor= "middle"＞…SVG 1.2…＜/text＞

從圖12可以看出, text-anchor=“middle”的設(shè)置可以使文本占據(jù)的位置不隨direction的改變發(fā)生變化.

圖12 設(shè)置text-anchor=“middle”之后的顯示位置

需要注意的是, 本文的討論大部分基于W3C和Unicode Consortium協(xié)會(huì)的標(biāo)準(zhǔn), Chrome瀏覽器較好地支持這些標(biāo)準(zhǔn), 然而不同的瀏覽器對(duì)標(biāo)準(zhǔn)的支持程度是有差異的, 對(duì)于不同的瀏覽器需要使用不同的處理方式. 在Internet Explorer 11(簡(jiǎn)稱IE11)瀏覽器中,雙向文本在設(shè)置text-anchor值為“middle”或“end”的時(shí)候?qū)⒖赡艹霈F(xiàn)文字重疊問題, 例如

＜text x="600" y="100" direction="rtl"

text-anchor="start"＞…SVG 1.2…＜/text＞

＜text x="600" y="200" direction="rtl"

text-anchor="middle"＞…SVG 1.2…＜/text＞

＜text x="600" y="300" direction="rtl"

text-anchor="end"＞…SVG 1.2…＜/text＞

在IE 11中將顯示為圖13的樣子. 可以看到除了設(shè)置text-anchor=“start”之外, 其他的設(shè)置都出現(xiàn)了文字重疊問題. 這表明在IE 11瀏覽器中不能用text-anchor的設(shè)置來解決文本位置的控制問題, 只能使用其他方式, 例如改變文本元素的坐標(biāo)值來控制文本位置. 通過與圖3的對(duì)比, 還可以看出對(duì)同樣的文本設(shè)置direction=“rtl”, IE11中的顯示與Chrome瀏覽器中的顯示不同, 這反映了不同瀏覽器中不同的Unicode雙向算法實(shí)現(xiàn).

圖13 在IE 11瀏覽器中設(shè)置不同text-anchor值的雙向文本顯示

5 結(jié)論

在國(guó)際化軟件中經(jīng)常出現(xiàn)的雙向文本的正確顯示是一個(gè)比較復(fù)雜的問題, 解決方案的本質(zhì)在于確定每個(gè)字符的顯示位置. SVG在瀏覽器的實(shí)現(xiàn)中已經(jīng)內(nèi)置了Unicode雙向算法的支持, 然而由于雙向文本的特殊性, 仍然可能出現(xiàn)無法正確顯示的情況, 需要開發(fā)者使用特定的設(shè)置告訴雙向算法進(jìn)行特殊處理. 為了在SVG中正確顯示雙向文本元素, 首先需要根據(jù)文本的內(nèi)容確定是否需要設(shè)置direction屬性值, 然后檢查文本中的特殊字符, 特別是鏡像字符是否被正確判斷了方向, 可以對(duì)某些特殊字符使用tspan配合unicodebidi屬性的設(shè)定來影響Unicode算法對(duì)其方向的判斷.對(duì)于文本元素中使用了tspan改變某些文字樣式和位置的情況, 可以通過對(duì)tspan的unicode-bidi屬性設(shè)置來避免雙向算法跨越tspan對(duì)文本進(jìn)行重排. 此外還需要注意到設(shè)置了direction屬性之后, 為了保持文本所占據(jù)的位置不變, text-anchor的值可能需要進(jìn)行正確的設(shè)定. 由于不同的瀏覽器對(duì)于標(biāo)準(zhǔn)的支持各不相同,在不同的瀏覽器中, 可能需要使用不同的設(shè)定.

1 Ishida R. Creating SVG tiny pages in Arabic, Hebrew and other right-to-left scripts 2011, https://www.w3.org/ International/tutorials/svg-tiny-bidi/.

2 李培峰,朱巧明,錢培德.一個(gè)面向信息處理的雙向文字處理算法IBidi.計(jì)算機(jī)應(yīng)用,2007,6:69.

3 Williams JL. Learning html5 Game Programming: A Hands-on Guide to Building Online Games Using Canvas, SVG, and WebGL. Addison-Wesley Professional, 2012.

4 劉旭.Chrome V8引擎中的JavaScript數(shù)組實(shí)現(xiàn)分析與性能優(yōu)化.計(jì)算機(jī)與現(xiàn)代化,2014,(10):66–70.

5 周琳,孔雷,趙方慶.生物大數(shù)據(jù)可視化的現(xiàn)狀及挑戰(zhàn).科學(xué)通報(bào)(中文版),2015,60(5/6):547–557.

6 楊陽.微博內(nèi)容的采集、分析及其可視化研究[碩士學(xué)位論文].大連:大連理工大學(xué),2015.

7 楊立法.基于SVG的Google用戶地圖文本標(biāo)注方法.昆明理工大學(xué)學(xué)報(bào)(自然科學(xué)版),2014,39(5):21–25.

8 Ishida R, Lanin A. Inline markup and bidirectional text in HTML. https://www.w3.org/International/articles/inline-bidimarkup/. 2014.

9 Consortium U. Unicode bidirectional algorithm. http:// unicode.org/reports/tr9/. 2015.

10 Bettels J, Bishop FA. Unicode: A universal character code. Digital Technical Journal, 1993, 5(3): 21–31.

11 Davis M. Unicode bidirectional algorithm. Unicode Standard Annex, 2008, 9

12 Ishida R. Unicode bidirectional algorithm basics 2013, https://www.w3.org/International/articles/inline-bidi-markup/ uba-basics.

13 買買提依明·哈斯木,吾守爾·斯拉木,維尼拉·木沙江,等. 基于統(tǒng)計(jì)專用字符的維、哈、柯文文種識(shí)別研究.中文信息學(xué)報(bào),2015,29(2):111–117.

14 陳鴿,王廷梅,趙瑋.一種新的維漢英混排文本顯示模型的設(shè)計(jì).硅谷,2012,(16):53–53.

15 Dürst M, Freytag A: Unicode in XML and other markup languages. Unicode Technical Report. 2002.

16 張梅靜.基于Android平臺(tái)的雙向文本編輯及顯示[碩士學(xué)位論文].成都:西南交通大學(xué),2013.

17 Bellamy-Royds A, Cagle K. SVG Text Layout: Words as Art . O’Reilly Media, Inc., 2015.

18 Network MD. unicode-bidi-CSS|MDN. https://developper. mozilla.org/en-US/docs/Web/CSS/unicode-bidi. 2016.

Displaying Technology of Bidirectional Text Element in SVG

LIU Xu
(Department of Business Intelligence of SAP Labs China, Shanghai 201203, China)

The displaying of bidirectional text in SVG is implemented by Unicode bidirectional algorithm, but bidirectional algorithm cannot automatically generate correct results to be displayed in line with semantics in many cases, so additional settings are required. By analyzing the basic principle of bidirectional algorithm, this paper discusses several aspects of bidirectional text display prone to occur, which includes text direction determining, display positions of special characters, text reordering across tspan elements in text elements, and position changes after display direction setting. According to specific circumstances of each issue and individual differences in different browsers, figure out ways to set correctly by using specific attributes in SVG.

bidirectional algorithm; SVG; right-to-left; Unicode; visualization

2016-07-20;收到修改稿時(shí)間:2016-09-08

10.15888/j.cnki.csa.005698