インライン要素とテキスト装飾（a, span, strong, em, code, time）

ルビ（Ruby）の深淵：ブラウザレンダリングと「意味」の最適化を極めるWebフロントエンドにおいて、``タグほど軽視され、かつ実装の落とし穴が深い要素は他にありません。単に「ふりがなを振るためのタグ」として処理しているなら、それはあなたのア...

ルビ（rubyタグ）を使いこなす：インライン要素の「余白と制約」を正しく理解するフロントエンドの現場で「ルビを振る」というタスクが舞い込んできたとき、多くのエンジニアは一瞬身構えます。単に文字を重ねるだけでなく、ブラウザごとの描画のクセや、...

こんにちは！フロントエンドの現場で日々コードと格闘しているエンジニアです。Webサイトを作っていると、「この漢字、なんて読むんだろう？」と親切心を働かせたくなる瞬間ってありますよね。そんな時に使うのがHTMLの``タグです。でも、このルビ関...

混在する言語の「境界」を制御せよ：BiDi（双方向テキスト）とインライン要素のアーキテクチャWebアプリケーションがグローバル展開を前提とする現代において、多言語対応は「翻訳」だけの話ではない。特にアラビア語やヘブライ語といった右から左へ流...

なぜ「左から右」だけでは世界は救えないのか？ ― 双方向テキスト(BiDi)とインライン要素の制御術フロントエンドの世界に足を踏み入れたばかりの頃は、「テキストは左から右（LTR）に流れるもの」と疑いもしないかもしれません。しかし、グローバ...

混ざり合う言語のパズル！「双方向テキスト」とインライン要素の不思議な世界へようこそWebサイトを作っていると、たまに「おや？」と思うような現象に出会うことがありますよね。例えば、英語の中にいきなりアラビア語やヘブライ語が混ざったとき、なぜか...

縦書きの深淵：`text-orientation`で制御するタイポグラフィの最適解Webフロントエンドにおける「縦書き」は、単なるデザインの装飾ではない。それは日本語という言語が持つリズムと、ブラウザのレンダリングエンジンという冷徹な計算機...

縦書きの「美」を制御する：`text-orientation`で英数字を操る極意フロントエンドの現場で「縦書きレイアウト」を実装することになったとき、多くのエンジニアが最初に直面する壁。それが「英数字が横倒しになって読みづらい」という問題で...

「縦書き」のWebサイト、作ってみませんか？`text-orientation`で文字の向きを魔法のように操る方法Webサイトといえば、左から右へ読む「横書き」が当たり前ですよね。でも、雑誌の特集や日本的な情緒を表現したいとき、ふと「縦書き...

縦書きの深淵：`writing-mode`とインライン要素が織りなすレンダリングの罠Webというプラットフォームは、長らく「横書き」という前提に支配されてきました。しかし、日本語の組版や芸術的なレイアウトを追求する際、`writing-mo...