東京都府中市、九段下のWEB制作会社Maromaroのブログです

2020.11.30

yamahana

テキストのコピペで安心!と思ったら 、htmlで文字がうまく表示されない時の対処法♪

見落としがちな文字とは?

こんにちは。yamahanaです。

コーディング作成時に、wordやExcelなどのテキストをhtmlにコピペするっていう作り方、多いですよね。

でもコピペしただけだと、思うように表示されてない!って時があると思います。
今回は、そんなコピペしただけではhtmlでうまく表示されない文字の対処法です。

よく見落としがちなのが以下の文字。

➀ 特殊文字 の入力方法

&や¥などはhtml上で文字化けしてしまいます。

コード

<p>&amp;</p>

表示結果
&,¥

こちらは特殊記号で対応

➀ 上付き文字 の入力方法

コード

<p>5m<sup>2</sup></p>

表示結果
5m2

supタグで囲むことで上付きになりました

➂ 下付き文字 の入力方法

コード

<p>CO<sub>2</sub></p>

表示結果
CO2

subタグで囲むことで下付きになりました

表示結果によっては上記だとベースラインの下に来る場合があり、デザインに合わせてベースラインを併せたいってこともあるかもしれません。その場合はフォントサイズを小さくするだけで以下のようになります。

2の数字だけspanタグで囲み、フォントサイズを小さくしました。

コード

<p>CO<span>2</span></p>

表示結果
CO2

2の数字だけspanタグで囲みフォントサイズを小さくしました。

➃ 二倍ダーシ の入力方法

文章中にダッシュを2つ続けるこれ── 二倍ダーシ、倍角ダッシュなどと呼ばれるそうです。
見た目ではうまくいっていても、ブラウザによっては隙間が出来てつながらないことも。
cssで調整した方が無難みたいです。

最初にletter-spacingでダッシュの隙間を埋めるだけでいいのではと思ってやったのがこれ。

コード

<span class="dash">ーー</span>
.dash{           
           font-size: 100%;
           letter-spacing: -0.2em;
           padding-right: 0.2em;
           margin-left: 0.2em;
           margin-right: 0.2em;
          } 

letter-spacingで隙間を埋めた分を、paddingで補い、marginで余白の調整をしています。
しかし、これだとフォントの種類やブラウザによっては隙間が空いてしまい対応できない場合が!

そこで上司に教えてもらい、追加したのがこれ。

.dash{           
           font-size: 100%;
           letter-spacing: -0.2em;
           padding-right: 0.2em;
           text-indent: -10000px;
           overflow: hidden;
           width: 1.5em;
           display: inline-block;
           position: relative;
           vertical-align: middle;
           margin-left: 0.2em; 
           margin-right: 0.2em; 
          }

  .dash:after {
           content: " ";
           display: block;
           width: 100%;
           position: absolute;
           left: 0;
           top: 50%;
           -webkit-transform: translate(0, -50%);
           transform: translate(0, -50%);
           border-top: 1px solid #000;
           margin-top: -1px;
          } 

表示結果

cssけっこう長いっ!!

text-indent: -10000px;で見えないところに飛ばし、疑似要素のafterでボーダーを引いています。

あとはmarginなどで位置や余白の調整です。

いっその事、2倍ダーシの記号があればいいのに。。

不要な改行のチェック忘れてない?

文字化けなどの対処法は分かりましたが、意外と見落としがちなのが、不要な改行の消去です。

コピペしただけだと、余計な改行が入ったままになっていて、html上で変なスペースが入ってしまうことも。

そんな時は、改行をなくしてくれるツールなどが便利です。
https://html-css-javascript.com/n-space-tab/

ここに貼り付けるだけであら不思議、改行をなくしてくれます。

でも、改行したくない箇所もある場合はやはり手作業で消すしかありません。
altなどにも気付かないうちに入っていたりするので、気を付けたいですね。

まとめ

 コピペして安心していたテキストですが、意外とうまく反映されたなかったりします。

コピペチェックだと中々気付かないので、やはり目視で読んでチェックするのが一番なんでしょうが、時間的に難しいことも。

文字化けしやすい文字などのパターンを理解しておくと、探しやすいですね。

以上、Maromaroのyamahanaでした♪