雙向文本元素在SVG中的顯示技術①

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

雙向文本元素在SVG中的顯示技術①

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

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

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

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

在可視化軟件開發中, SVG是HTML5 中常用的矢量圖形技術[3], JavaScript語言兼具面向對象和函數式編程風格[4], 使用JavaScript結合SVG已經在可視化軟件開發中得到廣泛應用, 包括各類科學可視化[5]和信息可視化軟件[6], 而在開發中往往使用text元素(Text Element)為SVG中的圖形標示文本標簽[7]. 隨著國際化軟件的增多, 沒有使用正確的顯示技術而帶來的text元素中的雙向文字問題也越來越常見.

1 雙向文字方向的確定

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

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

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

圖1 阿拉伯語的默認從右到左顯示

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

圖2 默認情況下雙向文字的顯示

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

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

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

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

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

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

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

2 特殊字符的方向控制

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

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

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

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

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

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

圖6 使用tspan進行設置后特殊字符的正確顯示

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

圖7 鏡像字符顯示的設置

為了解決這個問題, 需要像圖6那樣對結束的括號使用內聯元素tspan, direction設為ltr, 并將unicode-bidi 屬性設為embed. 圖7下方的字符串即正確顯示的結果. SVG中完整的設置形如:

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

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

＜/tspan＞…＜/text＞

3 tspan元素的文字重排問題

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

＜text＞

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

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

＜/text＞

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

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

＜text direction="rtl"＞

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

helpful＜/tspan＞

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

＜/text＞

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

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

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

要正確顯示圖8的文本, 應該把direction=“rtl”設置在tspan元素上, 同時需要告訴Unicode雙向算法在設置 tspan中的文本方向時, 不要考慮全部的字符串.這可以通過設置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顯示了設置unicode-bidi=“isolate”之后的兩行雙向文本, 參照圖3, 可以看到第二行的顯示符合阿拉伯語的使用習慣. 至于第一行的英文字符串, Unicode雙向算法能正確判斷出其屬于一個run, 不受direction=“rtl”的影響, 然而, 這里加上direction=“rtl”的設置可以影響文本顯示的位置, 使上下兩行文字右對齊.

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

4 文字位置的控制

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

＜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對文本位置的控制

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

如果希望文本不管被設置為從左到右還是從右到左, 占據的位置都相同, 那么可以將text-anchor設置為“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”的設置可以使文本占據的位置不隨direction的改變發生變化.

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

需要注意的是, 本文的討論大部分基于W3C和Unicode Consortium協會的標準, Chrome瀏覽器較好地支持這些標準, 然而不同的瀏覽器對標準的支持程度是有差異的, 對于不同的瀏覽器需要使用不同的處理方式. 在Internet Explorer 11(簡稱IE11)瀏覽器中,雙向文本在設置text-anchor值為“middle”或“end”的時候將可能出現文字重疊問題, 例如

＜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的樣子. 可以看到除了設置text-anchor=“start”之外, 其他的設置都出現了文字重疊問題. 這表明在IE 11瀏覽器中不能用text-anchor的設置來解決文本位置的控制問題, 只能使用其他方式, 例如改變文本元素的坐標值來控制文本位置. 通過與圖3的對比, 還可以看出對同樣的文本設置direction=“rtl”, IE11中的顯示與Chrome瀏覽器中的顯示不同, 這反映了不同瀏覽器中不同的Unicode雙向算法實現.

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

5 結論

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

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 李培峰,朱巧明,錢培德.一個面向信息處理的雙向文字處理算法IBidi.計算機應用,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數組實現分析與性能優化.計算機與現代化,2014,(10):66–70.

5 周琳,孔雷,趙方慶.生物大數據可視化的現狀及挑戰.科學通報(中文版),2015,60(5/6):547–557.

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

7 楊立法.基于SVG的Google用戶地圖文本標注方法.昆明理工大學學報(自然科學版),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 買買提依明·哈斯木,吾守爾·斯拉木,維尼拉·木沙江,等. 基于統計專用字符的維、哈、柯文文種識別研究.中文信息學報,2015,29(2):111–117.

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

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

16 張梅靜.基于Android平臺的雙向文本編輯及顯示[碩士學位論文].成都:西南交通大學,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;收到修改稿時間:2016-09-08

10.15888/j.cnki.csa.005698