ITエンジニア/デザイナ向けにオープンソースを毎日紹介

テキストの表示は読みやすさ、分かりやすさという観点において大事な視点です。広がりすぎても読みづらく、狭くても読みづらいものです。さらに文字種によって適切な幅は異なるので、問題が複雑化します。

今回紹介するCharaTypeSeparatorは文字種をスタイルとして適用してくれるJavaScriptライブラリになります。

CharaTypeSeparatorの使い方

デモです。左が未設定、中央がpalt、右がCharaTypeSeparatorによる表示です。詰めすぎず、読みやすい間隔です。

HTMLソースを見ると、平仮名や片仮名、漢字などをそれぞれspanタグで囲んでいます。

CharaTypeSeparatorはspanタグを付けるだけなので、後はそれぞれの文字によって隙間をCSSで指定すればOKです。JavaScriptベースなので、任意のWebサイトやCMSと組み合わせて使うことができます。

CharaTypeSeparatorはJavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

CharaTypeSeparatorによる文字づめサンプル

yoshihik0/charaTypeSeparater

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2