![invisible-character-on-web-mobile.jpg-網頁出現看不見的特殊字元或方框時,該如何處理?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfqHdIBu4_btVakkwB5QKSY0lG2YdlSok0wydeefF0C4VDEfGXVZ0Qlx54FbArY-IFwVsw5WR4tuN7tSi5E3-zJnGGVOjRA2PwB61oXcHT5l32ItwFPR3vKB_dTHAUvVxeavZgJOMUjdL5/s1600/invisible-character-on-web-mobile.jpg)
這次遇到的案例很特別,手機上會看到無法顯示字元的 "方框符號",網頁版卻看不到,以下來看看如何找出原因及解決。
(圖片出處: pixabay.com)
一、案情分析
1. 事發經過
![invisible-character-on-web-mobile-1.jpg-網頁出現看不見的特殊字元或方框時,該如何處理?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBNWc1Tp8HftPTlioDtIfmOlk9F5kdnLN78eeVC3WPf9McIYkvlXJ_FacPqVMrWreiGLg6qCr91bACA6ixcqKqm6aLPLIqLs0ZIvWWRZ9EjEqQKc91u_HvmBtv9jgsYG1n8Z9bIEgWPy8p/s1600/invisible-character-on-web-mobile-1.jpg)
案主表示在 Windows 系統下用軟體檢視文章內容,會看到上圖兩個 "LSEP" 這樣的符號。
![invisible-character-on-web-mobile-2.jpg-網頁出現看不見的特殊字元或方框時,該如何處理?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJMvaHqLX9pmztWWOOPzAkoCuE9LESxe_LOFZNCKpT7J14DQ6OR7hULBux_7s1i6Yr0w7NzdSH6_fwut2zriXOjnd6qhovaxk4M2bDQqEiYjKxFuNoY0D3noigqfuFJ1f6sw7fl1aleNYc/s1600/invisible-character-on-web-mobile-2.jpg)
發佈文章後,用手機看網頁,會看到兩個無法顯示字元的「方框符號」,位置在上圖文字 "再來對照我的觀察。" 後面。
![invisible-character-on-web-mobile-3.jpg-網頁出現看不見的特殊字元或方框時,該如何處理?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPeYVxw0HOtNGjSrGbjTdSScYnXL9CuB2VYFUPiLQOLlbOwYIRJf-KKB864MFgb9_EvAbw8KL-FRBDC96iHYkmHSN5ZX7Cci0nDbSZUI-bKtL8NUFxPbdu_MFOFg-fu9VBsV9DQSfC1Ku8/s1600/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-網頁出現看不見的特殊字元或方框時,該如何處理?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBnz1d9cRTfHIj8xkwxCePqmcraa1nElVJc42STCQpOxPdT4ONqjZJ_9MImxmhPwweAMcs1cLdlg532IwRaVve6h8BQRC6DZx3RhXXMP6FJFlLuxFbsf2nt7eoDLjCl5t1-1eHJVCca3yu/s1600/invisible-character-on-web-mobile-4.png)
上圖是我進入 Blogger 後台文章編輯器的畫面,將游標移到案發現場 "再來對照我的觀察。" 這段文字的後面,"LSEP" 就位於句號與換行語法「<br/ >」之間。
因為網頁版作業系統看不到這個特殊字元,所以上圖的畫面是看不到的,但是我們可以真實感受到這兩個 "LSEP" 的存在,操作方式如下:
- 游標移到圖中句點 "。" 的後面,接著按鍵盤方向鍵 "→" 向右,會發現卡住兩次,按到第三次時才能順利往右移動
- 移到到「<br/ >」右邊後,換成按 "←" 向左,直到句點的位置時,又會發現卡住兩次,第三次向左才能成功。
這代表雖然看不到,但是 "LSEP" 是實際存在的,像是三度空間與四度空間的交界,眼見不一定為真。
我們可以按 "Del" 或 "Backspace" 把這兩個看不見的字元刪除,網頁上就可以正常,不再顯示方框符號,但這麼做太慢了,因為這篇文章有好多個 "LSEP",這該怎麼辦呢?
三、使用文書處理軟體
雖然作業系統因為字型檔的緣故,無法讀取這些特殊字元,但多數的文書處理軟體都可以看到特殊字元,因為用的不是作業系統字型,這些軟體會使用自己的字型來顯示文字。
![invisible-character-on-web-mobile-5.jpg-網頁出現看不見的特殊字元或方框時,該如何處理?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg64sznJ7a6hLanMcEiSDgrwLgpEvwVxlK817McHjztzEBRElqbDaqrIRd-c93DbfrlHI5s7pL-Dq_Gf3UkxM4Z-OaudG7tuGcNV8roY3-RYSefrytatK6-uGcSe9RVzIK9zLvUJvDzMAJD/s1600/invisible-character-on-web-mobile-5.jpg)
上圖是我使用 Notepad++ 的畫面,將 Blogger 文章編輯器的內容複製過來,紅框標示處兩個 "LSEP" 無所遁形。
![invisible-character-on-web-mobile-6.jpg-網頁出現看不見的特殊字元或方框時,該如何處理?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsecbI5NaCEv3O1zjN27jkDecspjPIZtRd3QaMXX6IJ65ZA9THrfeP0nr3mSlRJzKIl911Dug1lObMqznPuFzY-LI58sLMiaxuPLpPnIyrVd4YlRTou603-LotIFkYcCqTTe3gYSF5xXpW/s1600/invisible-character-on-web-mobile-6.jpg)
用同樣方式,上圖是我使用 Sublime Text 的畫面,結果可能這個軟體的字型檔不夠力,紅框標示處兩個 "LSEP" 無法正確顯示,跟行動版效果一樣變成了 "方框符號"。
但無論如何文書處理軟體只要能抓到這些特殊符號,要移除就很簡單了,使用 "全部取代" 的功能,就可一次移除所有 "LSEP",部落格文章在網頁上就不會再顯示方框了。
四、產生特殊符號的原因
1. 蘋果軟體轉換產生
為了找出這些特殊符號產生的原因,詢問了案主是如何寫文章的,她表示操作流程為:
- 使用 Word 然後貼到 Mac 的文字編輯器
- 有個內建功能可轉成純文字格式
![invisible-character-on-web-mobile-7.jpg-網頁出現看不見的特殊字元或方框時,該如何處理?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEozKNdaGXAQFpagovldBlMv5pL6DQdLYppKfNsu2sHi0mWpys58AkDZY5BEi1y1gUnh-oYQC6DKgfltHGK44DgOKKTp2ZATD-jwLDLKCIWkxLJpr82hcMadW1yI-r36c0Mrg-03JUIgrC/s1600/invisible-character-on-web-mobile-7.jpg)
![invisible-character-on-web-mobile-8.jpg-網頁出現看不見的特殊字元或方框時,該如何處理?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXp3Ds1tnuy1TbhIXlgR90eUgcX-5tK7z-F7VBj66JnKpfUX_I3yD999jfNyBXcck8y8awBb2UQA8en5vclNL9gqEW07YWo768pzPkI8e6cICB8foagL8hVXxdhqtBun-U8W5FeDv3Rgxx/s1600/invisible-character-on-web-mobile-8.jpg)
從這個流程看來,看不見的特殊符號看起來是這個 Mac 軟體,在轉換為純文字的過程中產生。
如果這個軟體很好用,那麼只好每次都在 windows 下文書軟體執行一次「全部刪除 "LSEP"」的動作。
不然只好想辦法找到其他替代流程,不會產生 "LSEP" 字元的轉換軟體。
2. 其他軟體轉換產生
其實這樣的現象我以前有遇過,而且狀況更難察覺。本文的案例還可在 Notepad++、Sublime Text 軟體看到這些特殊字元的存在,我以前遇到的狀況是:
- 使用某些轉換軟體產生內容後,偶爾會跑出看不到的特殊字元
- 使用 Notepad++、Sublime Text 也看不到這些特殊字元
- 為何知道有這些特殊字元呢?因為文章中明明沒有東西,但網頁上總會跑出一個奇怪符號。
- 而在 Notepad++、Sublime Text,使用方向鍵移動到特定的字元時就會卡住,跟本篇案例一樣
- 代表該軟體會自動產生特殊字元(也可以說是控制碼),而且不是 "LSEP",無法知道是何方神聖。
因為以前看不出是什麼端倪,也無從 Google 原因,現在遇到本文案例後,算是解開當年的困惑,特撰本文紀錄。
更多「網頁技巧」相關文章:
沒有留言:
張貼留言注意事項:
◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。