2019年4月5日

網頁出現看不見的特殊字元或方框時,該如何處理?

網頁出現看不見的特殊字元或方框時,該如何處理?

Wayne Fu 0 A+
invisible-character-on-web-mobile.jpg-網頁出現看不見的特殊字元或方框時,該如何處理?有時我們會在網頁上看到亂碼,或是一堆方框,代表那些字元因為系統沒有對應的字型,或是字型不含這些編碼,所以無法顯示出來。

這次遇到的案例很特別,手機上會看到無法顯示字元的 "方框符號",網頁版卻看不到,以下來看看如何找出原因及解決。

(圖片出處: pixabay.com)


一、案情分析


1. 事發經過

invisible-character-on-web-mobile-1.jpg-網頁出現看不見的特殊字元或方框時,該如何處理?

案主表示在 Windows 系統下用軟體檢視文章內容,會看到上圖兩個 "LSEP" 這樣的符號。


invisible-character-on-web-mobile-2.jpg-網頁出現看不見的特殊字元或方框時,該如何處理?

發佈文章後,用手機看網頁,會看到兩個無法顯示字元的「方框符號」,位置在上圖文字 "再來對照我的觀察。" 後面。


invisible-character-on-web-mobile-3.jpg-網頁出現看不見的特殊字元或方框時,該如何處理?

然而在網頁版的瀏覽器上面,不會看到這樣的方框。


2. 原因分析

從以上徵兆來看,"LSEP" 應該是一個看不見的特殊字元,網頁版的字型檔抓不到編碼,乾脆不顯示。而行動版的字型檔卻可抓到編碼,但該編碼又不在字型編碼的範圍,所以變成了 "方框符號"。

餵 Google 後找到 Wiki「Unicode控制字符」,原來 "LSEP" 屬於換行字符,也就是按「Enter」的作用:

U+2028「」LINE SEPARATOR ,HTML:
,LSEP

至於為何網頁版、行動版的效果不一樣,只能說不同的作業系統,對於不同的 Unicode 編碼有各自的解讀了。



二、從文章編輯器修改


invisible-character-on-web-mobile-4.png-網頁出現看不見的特殊字元或方框時,該如何處理?

上圖是我進入 Blogger 後台文章編輯器的畫面,將游標移到案發現場 "再來對照我的觀察。" 這段文字的後面,"LSEP" 就位於句號與換行語法「<br/ >」之間。

因為網頁版作業系統看不到這個特殊字元,所以上圖的畫面是看不到的,但是我們可以真實感受到這兩個 "LSEP" 的存在,操作方式如下:

  • 游標移到圖中句點 "。" 的後面,接著按鍵盤方向鍵 "→" 向右,會發現卡住兩次,按到第三次時才能順利往右移動
  • 移到到「<br/ >」右邊後,換成按 "←" 向左,直到句點的位置時,又會發現卡住兩次,第三次向左才能成功。

這代表雖然看不到,但是 "LSEP" 是實際存在的,像是三度空間與四度空間的交界,眼見不一定為真。

我們可以按 "Del" 或 "Backspace" 把這兩個看不見的字元刪除,網頁上就可以正常,不再顯示方框符號,但這麼做太慢了,因為這篇文章有好多個 "LSEP",這該怎麼辦呢?



三、使用文書處理軟體


雖然作業系統因為字型檔的緣故,無法讀取這些特殊字元,但多數的文書處理軟體都可以看到特殊字元,因為用的不是作業系統字型,這些軟體會使用自己的字型來顯示文字。


invisible-character-on-web-mobile-5.jpg-網頁出現看不見的特殊字元或方框時,該如何處理?

上圖是我使用 Notepad++ 的畫面,將 Blogger 文章編輯器的內容複製過來,紅框標示處兩個 "LSEP" 無所遁形。


invisible-character-on-web-mobile-6.jpg-網頁出現看不見的特殊字元或方框時,該如何處理?

用同樣方式,上圖是我使用 Sublime Text 的畫面,結果可能這個軟體的字型檔不夠力,紅框標示處兩個 "LSEP" 無法正確顯示,跟行動版效果一樣變成了 "方框符號"。

但無論如何文書處理軟體只要能抓到這些特殊符號,要移除就很簡單了,使用 "全部取代" 的功能,就可一次移除所有 "LSEP",部落格文章在網頁上就不會再顯示方框了。



四、產生特殊符號的原因


1. 蘋果軟體轉換產生

為了找出這些特殊符號產生的原因,詢問了案主是如何寫文章的,她表示操作流程為:

  • 使用 Word 然後貼到 Mac 的文字編輯器
  • 有個內建功能可轉成純文字格式

invisible-character-on-web-mobile-7.jpg-網頁出現看不見的特殊字元或方框時,該如何處理?

invisible-character-on-web-mobile-8.jpg-網頁出現看不見的特殊字元或方框時,該如何處理?

從這個流程看來,看不見的特殊符號看起來是這個 Mac 軟體,在轉換為純文字的過程中產生。

如果這個軟體很好用,那麼只好每次都在 windows 下文書軟體執行一次「全部刪除 "LSEP"」的動作。

不然只好想辦法找到其他替代流程,不會產生 "LSEP" 字元的轉換軟體。


2. 其他軟體轉換產生

其實這樣的現象我以前有遇過,而且狀況更難察覺。本文的案例還可在 Notepad++、Sublime Text 軟體看到這些特殊字元的存在,我以前遇到的狀況是:

  • 使用某些轉換軟體產生內容後,偶爾會跑出看不到的特殊字元
  • 使用 Notepad++、Sublime Text 也看不到這些特殊字元
  • 為何知道有這些特殊字元呢?因為文章中明明沒有東西,但網頁上總會跑出一個奇怪符號。
  • 而在 Notepad++、Sublime Text,使用方向鍵移動到特定的字元時就會卡住,跟本篇案例一樣
  • 代表該軟體會自動產生特殊字元(也可以說是控制碼),而且不是 "LSEP",無法知道是何方神聖。

因為以前看不出是什麼端倪,也無從 Google 原因,現在遇到本文案例後,算是解開當年的困惑,特撰本文紀錄。


更多「網頁技巧」相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP