PowerPoint内の文字列をコピー&ペーストした際に発生する文字化けを防ぐ

Webサイト制作の過程において、PowerPointで作成された構成資料のテキストをコピーして、エディタにペーストする機会は少なくありません。

しかし、ごく稀に「♂」等の文字化けが発生してしまう場合があります。

今回は、そんな文字化けを防ぐ方法をお伝えします。

原因は?

結論からお話しすると、PowerPoint内のテキストをコピーした際に「垂直タブ(VT: Vertical Tab)」と呼ばれる改行コードが含まれてしまっていることが原因です。

 

垂直タブとは?

PowerPointでテキストを編集する際、テキストの「改行」はしばしば行われます。ただ、「改行」は1種類だけではありません。

「Enter」を押した改行と、「Shift+Enter」を押した改行は、見た目は同じでも、プログラム側の解釈としては全く異なるのです。具体的には、改行前後に挿入される「改行コード」がそれぞれ以下のように異なります。

改行操作 文字コード(10進数) 改行コード
Enter 13 CR
Shift+Enter 11 VT

参考:[Excel][PPT][VBA] エクセルとパワーポイントの改行コードの違い

 

そして、OSやブラウザのバージョンによって、この「垂直タブ」等の制御文字の扱い方が異なります。先述した通り、「♂」等の文字化けやZero Width Space等で表示される場合があるのです。

以下のテーブルでは、「スペース無し」・「半角スペース」・「ゼロ幅スペース」・「垂直タブ」をテキスト間に挿入した一例です。様々なブラウザで表示確認を行うと、違いが明確に理解できるはずです。

スペース無し 半角スペース ゼロ幅スペース 垂直タブ
あいうえお あ い う え お あいうえお あ い う え お

 

 

解決策は?

テキストが長文の場合、目視での確認作業は時間コストがかかります。また、エディタによっては、「垂直タブ」が挿入されていることを明示してくれません。

そこで、普段から利用しているタスクランナーツール等で「Replace系のパッケージ」を利用して解決させます。不要な文字コードは、コンパイル時に取り除くのです。(Gulpの場合は「gulp-replace」、Webpackの場合は「html-string-replace-webpack-plugin」が利用に適しています。)

こちらのUnicode一覧を確認すれば、「垂直タブ」のUnicode表記は「0x000B」であることが分かります。したがって、こちらのUnicodeを取り除けば、文字化けの無いHTMLにコンパイルされます!

 

最後に

改行コードや文字コードによるミスは、見落としがちです。また、理解しづらい領域でもあると思います。

文字コードについては、「フロントエンドエンジニアでもわかる文字コードのはなし」の連載が非常に参考になると思いますので、ぜひご覧ください!

●この記事を書いた人