ひtoりgoと

macOS 15.4 にしたらついに Safari がバージョン 18.4 になり、CSS の text-autospace が使えるようになったみたい。

• "text-autospace" | Can I use... Support tables for HTML5, CSS3, etc

これはテキストをレイアウトするときにアルファベットや数字と日本語の間に狭いスペースを挟んで読みやすくしてくれるもの。紙媒体などの世界では昔からなされてきた工夫で、Word や Illustrator とかでデフォルトで有効になっているので馴染みのある方も多いと思う。

スクリーン表示の世界でもこれを取り入れようという動きが数年前からあって Apple プラットフォームだと macOS Monterey 12 や iOS 15 からシステムフォントの表示がそうなっているし、Web の世界でも Chrome が対応を宣言していた。

• CSS に 4 つの新しい国際化機能を導入  |  Blog  |  Chrome for Developers

中国語と日本語では、複数の文字体系（漢字、ラテン文字、ASCII 数字）が混在しています。日本語の場合は、ひらがなやカタカナも使用されます。漢字以外の表意文字から漢字に切り替えるときや、漢字から漢字以外の表意文字に切り替えるときに、スペースを小さくすると読みやすくなります。

Chrome では、スクリプト間のスペースをデフォルトで挿入する予定です。この機能は、印刷物で読みやすくするために広く使用されている一般的な手法をウェブにも適用するものです。

そしてついに Safari も対応したのだ。

• WebKit Features in Safari 18.4 | WebKit

WebKit for Safari 18.4 adds support for the brand new text-autospace property, which automatically introduces extra space to provide visual breathing room when transitioning between scripts. In the distant past, Chinese and Japanese were written in a purely native writing system derived from ancient Chinese Han characters. But in modern typesetting, they liberally mix in Western numbers and letters. When set solid, the boundary between the traditional characters and the new foreign characters feels cramped, and so modern typesetting convention has adopted a practice of inserting a little bit of extra space at these boundaries. With the text-autospace property, the browser automatically inserts this extra space whenever it detects a script transition.

なので

body {
    text-autospace: ideograph-alpha ideograph-numeric;
}

とか CSS に書いておけば、いい感じにアルファベットと日本語にスペースが挿入されるというわけ。text-autospace: normal; でもいいみたい。

当サイトは今のところ手動でちまちまと特殊記号の狭いスペースを挟んでいるのだけど多くのブラウザで対応したら切り替えてもいいかもしれない。

比較用の例：

<p style="text-autospace: no-autospace;">日本語とEnglishが0123混ざっているよ</p>
<p style="text-autospace: normal;">日本語とEnglishが0123混ざっているよ</p>

将来的にはデフォルトで有効

ちなみに CSS 規格としてはデフォルトで text-autospace: normal; にすることを呼びかけており、WebKit もそうする予定だが今はテスト期間として指定を必要にしているとのこと。

• WebKit Features in Safari 18.4 | WebKit

WebKit defaults to text-autospace: no-autospace to match the current default behavior of older (currently all) browsers. The CSS specification calls for browsers to switch the default to text-autospace: normal — automatically applying better spacing to all CJK content on the web, no matter when the website was created.

We have not yet switched to the new default behavior. Use text-autospace In Safari 18.4 to opt your content into the new spacing, and test it out. If you have thoughts about the implementation, file an issue at bugs.webkit.org. We want to ensure our implementation is well tested before changing the default.

IE が先取りしていた？

text-autospace について調べていると「Internet Explorer でしか使えない」みたいに書いてる古いページがいくつか見つかった。Web 技術が停滞する原因を作った諸悪の根源みたいに言われることもあった Internet Explorer だけど時代を先取りしている部分もあることは覚えておきたい。

• text-spacingが待ち遠しい | Unformed Building

-ms-text-autospaceで指定します。 ただ、元はIEの独自実装だか先行実装だかで、IE 7以下では-ms-なしにする必要があります。

仕様はMSDNの「-ms-text-autospace property (Internet Explorer)」をどうぞ。

W3Cにあるものだと1999年の「International Layout in CSS」にあるものが一番古いんでしょうか。

余談：Internet Explorer for Mac

余談だけど、かつて Mac の世界にも Internet Explorer があった。

1997 年に Apple が Microsoft から資金援助を受けて業務提携した関係で長いことデフォルトブラウザに指定されていた重要な存在だけど¹、当時の Mac ユーザは Microsoft に対する反発というか拒否感が強くてその理由で Netscape を使う人もちらほらいた記憶がある。

ところがこれは決して Windows 版の片手間に作られた雑な移植ではなく、特に Classic Mac OS 版の Internet Explorer 5 は UI 的に先進的な試みをいくつか取り入れていて、OS X の Aqua が発表されるよりも先にそれっぽい見た目だったとか、Windows Vista 以降の UI でよく見られるウインドウやメニューの背景に透けて見える部分をぼかすエフェクトもその時点で実装していたりとか。今になって振り返っても興味深い存在といえる。

Mac版IE 5のインターフェイスの見た目がAqua「風」なのは、Mac OS Xに合わせたのではなくiMacなど筐体に合わせにいった結果似てしまったのだそう。開発当時OS Xが未発表なのでジョブズはそれについて何も言えず、ブラウザ機能に（まだ買収前の） SoundJam MPのコードを採用したことに立腹したとか。https://x.com/jimmyg/status/1213810320860422144

— @usagimaruma

I had to download a MacOS 9 emulator to show some friends the original translucent blurred window. This is Mac IE 5.0, as released 21 years ago.

— @MafVosburgh