2024.04.01
改行などの禁則処理がうまくいかない時の対処法！
こんにちは。yamahanaです。
最近、コーディングをした際に、クライアント様から改行位置などの調整を複数ご指摘され、うまくいかず困った件がありました。
その時に行った対応をご紹介します。
禁則処理とは？
禁則処理とは、句読点や括弧などが行頭・行末などにならないように文字間などを調整することです。
①余白やletter spacingで調整してみる
文字近くの余白やletter spacing（文字間の隙間）を調整することで、改行位置を調整します。
cssでカーニングを個別に行っていくような形ですね。
こちらのデメリットとしては、個別に余白やletter spacingを調整するため全体の統一感やバランスが変わってきてしまう事です。
そして手間がかかる。。。
またブラウザによっても見え方が変わってしまう可能性もあります。
②禁則処理のcssを入れてみる
①をやってみましたが、やはりこれで全部を直していくのはかなり手間がかかります。
なので、下記の様に禁則処理のcssの方法を聞き、入れてみました。
また今回はMTに入れるhtmlだったのでhtmlではなく、一番外枠のdivにlang=”ja”を入れています。
divにも入れられるの知らなかった。
<html>
<div lang="ja">
<p>こちらは禁則処理のcssを入れてません。改行はこうなってます</p>
<p>こちらは禁則処理のcssを入れてますが、改行はこうなってます</p>
</div>
<html>line-break: strict;
overflow-wrap: break-word;
word-wrap: break-word;
小さい「っ」の所の改行に違いが出るのが分かります。
いい感じに自動でやってくれるので楽ですね。これでもうまくいかない箇所がある場合は、自分で改行を入れなければいけませんが。。。
・参考したサイト
そもそものフォントの問題
②を行いましたが、クライアント様側で修正が出来てない箇所があると再度ご指摘が！なぜ？
ブラウザを聞いて、見てみても特に問題はなく、そもそものクライアント側とこちら側で見え方に大きな差異があることが発覚！
調べていきついたのがフォントでした。
今回コーディング時に使用してたベースのフォントはヒラギノ 角ゴシック。
インストールなどしていない場合、メイリオなどに変換されるため、見え方に違いが出てしまっていたのでした。
同じフォントサイズでもこれだけ違いが出てしまうんですねー
③WEBフォントを使う
WEBフォントはどの端末からページにアクセスしても同じフォントデザインが反映されるものです。
なので、今回はGoogle Fontsを使用することにしました。
こちらを使用することで改行位置の違いも修正されました！
WEBフォントは読み込み速度の問題はあるものの、やはり最強ですね。
デザイン通りにコーディングしているつもりなのに、WindowsとMacで見え方が違うなどの修正から解放されるので、コーダーにとっても大変ありがたい。
まとめ
今回、改行位置の調整などで禁則処理を行いました。
レスポンシブで改行位置を調整するのは難しい面はありますが、何気なく入れているテキストでも、そこには文章を考えた人の思いもあったりしますので、文章が別のニュアンスに取られないように工夫する必要はあるのかもしれません。
以上、yamahanaでした。
