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にコンパイルされます！
最後に
改行コードや文字コードによるミスは、見落としがちです。また、理解しづらい領域でもあると思います。
文字コードについては、「フロントエンドエンジニアでもわかる文字コードのはなし」の連載が非常に参考になると思いますので、ぜひご覧ください！