りんごが好きなのでぃす

Macを中心に、たま〜にiPhoneやiPadなどの話題も届けていたら今年で26年目を迎えてました

(再掲)テキストフィールドの文字揺れを抑える

 

Safariのテキストフィールドに日本語をローマ字で入力すると文字が上下に揺れてしまうという症状があります。これは、入力中に表示される英字フォントと、次々と置き換わって行く日本語フォントが違っていて、それぞれのベースラインが異なるから起きるものと思われます。

ということは、日本語入力をする上で英字フォントに統一するのは不可能ですから、テキストフィールドで使われるフォントを日本語フォントに統一してしまえば揺れはおさまる、ということになります。

これを可能にするのがスタイルシート(CSS)で、SafariにはオリジナルのCSSを設定する項目が用意されています。やり方はとても簡単。必要なファイルは作成しておいたのでそれをダウンロードして頂き、以下の要領で設定して下さい。

  1. ダウンロードしたファイルを解凍し、書類フォルダにコピー
  2. Safariを起動し、Safariメニュー>環境設定>詳細 を開く
  3. "スタイルシート"のプルダウンメニューから【その他...】を選び、
    手順1のファイルを指定
  4. 念のためSafariを再起動

たったこれだけです。

これにより、サイトに関わらず全てのテキストフィールドでの文字揺れが解消されますのでお試し下さい(一部例外あり)。

なお、CSSで設定しているフォントは全角、半角問わず視認性に定評のある"Osaka"、文字サイズを少し小さめにして、濃いめのグレーを指定しています。気に入らない場合はCSSファイルをテキストエディットで開き、下記に示すものを参考にしてCSSファイルを作り直して上書き保存して下さい。

textarea {
  font-family:Osaka !important;  <フォントの指定>
  color:#444 !important;  <文字色の指定>
  font-size:9pt !important;  <文字サイズの指定>
  line-height:1.5em !important;  <行間隔:ここでは1.5行の指定>
  }

ダウンロードする。

# このエントリは旧ブログからインポートしたものです、一部リンク切れしている場合があります

# 2019年4月12日、本文体裁修正