文字による文字のための文字のサイト

type.center

管理組合の虫取り日記「文字の縦位置がズレる」

タイプ・センター管理組合からのお知らせ

管理組合の虫取り日記「文字の縦位置がズレる」

こんにちは、タイプ・センター管理組合の花村です!

この日記はタイプ・センターを開発するなかで遭遇・捕獲したさまざまな虫(バグ)を検証し、技術背景にも興味をもっていただける読者のみなさまと情報を共有していこうというものです。

文字の縦位置がズレる

タイプ・センターではたくさんのウェブフォントを使っています。そんなウェブフォントたっぷりのサイトを作っていく中で、色々と変わった挙動や解決すべき課題が見えてきました。

今回の話題は文字の縦位置がズレる問題。

Windowsでタイプ・センターを見てくれている人たちは気になっているかもしれません。サイトの色々なところで使われている文字の入った正方形(管理組合では「一文字ボックス」と呼んでいます)、この中の文字の縦位置がズレてしまうのです…!

Windows 8.1のInternet Explorer 11.0.9600.17842でタイプ・センターを見た様子。

例えばWindows 8.1のInternet Explorer 11では⬆️こんな風に見えています。フォントによってもズレ方が違うようです。「秀英初号明朝 撰」というフォントで表示した「漢」はきちんとボックスに収まっているのに「新丸ゴ シャドウ」というフォントで表示した「部」は下にズレていますね。

同じくWindows 8.1のChromeや、Windows 8.1のFirefoxでも同様の文字のズレが発生しました(リンク先でスクリーンショットをご覧いただけます)。

iOS 8.3のSafariでタイプ・センターを見た様子。本当は全ての環境でこう見えていて欲しい。

一方、Mac OS XのYosemiteではどのブラウザでもボックスに収まっています。

↑リンク先でスクリーンショットをご覧いただけます。

iOSやAndroidのChromeもどうやら大丈夫そうです。

↑リンク先でスクリーンショットをご覧いただけます。


イシューの様子。タイプ・センターの開発とタスク管理にはGitHubを使っています。

この問題に気づいてイシューを立てた(すなわちやることリストに追加した)のはまだタイプ・センター公開前の2014年9月22日。ナゼいまだに直っていないのでしょうか…?

次回はどうすればこれを直すことができるのか考えてみます。(続く)


2015年6月29日

シェア

タイプ・センター管理組合からのお知らせ

タイプ・センター管理組合

花村太郎と萩原俊矢の2人で2014年に結成。主な活動は type.center のウェブサイト管理。

連載記事一覧
今日
昨日
おととい
ちかごろ
あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも やゆよ らりるれろ わゐゑを ん がぎぐげご ざじずぜぞ だぢづでど ばびぶべぼ ぱぴぷぺぽ 0123456789.
連載記事一覧