2023年08月11日(金)
読み仮名を表現する ruby タグのマークアップやスタイリングとアクセシビリティについての考察
日本語には漢字という難しい文字があり、未履修の漢字が含まれた文章を読むことは我々日本人にとってもなかなか困難なもの。
そういった人たちにもコンテンツを楽しんでもらえるようルビ（よみがな）を振ることは良いアプローチですし、今は殆どのブラウザがルビに対応しているため比較的簡単に実装できます。
例えば著者夏目漱石のぼっちゃんの一文をルビを振ってみると下記の様な見た目に
親譲おやゆずりの無鉄砲むてっぽうで子供こどもの時ときから損そんばかりしている。これを担保するために必要なソースコードは下記
親譲りの 無鉄砲で 子供の 時から 損ばかりしている。もしも書籍一冊分のルビを振る必要があれなら非常に労力の高いものになりますが、タグの構造としてはそれほど難しくなく、現状は下記2つだけ。
...
- ruby タグ – ルビを振りたい言葉を囲む
- rt タグ – 実際のルビを囲う
0
25
5
1author:
YATのBlog
大阪でイベントなども開催されている企業WebデザイナーYatさまのブログ。Webデザイン・javascript・WordPressなどの技術的記事だけでなく、Web担当者としての目線で見た記事やフォント系の記事を公開されています。
‹ PREV
【無料ウェビナー】リテールメディア入門セミナー ～デジタルマーケティング担当が語るイオンリテールの取り組み～（8/29）
NEXT ›
LogseqやObsidianなどと連携できるオープンソースの「後で読む」アプリ・「Omnivore」
Ads
大阪でイベントなども開催されている企業WebデザイナーYatさまのブログ。Webデザイン・javascript・WordPressなどの技術的記事だけでなく、Web担当者としての目線で見た記事やフォント系の記事を公開されています。YATのBlogの記事『読み仮名を表現する ruby タグのマークアップやスタイリングとアクセシビリティについての考察』についてまとめています。
この記事は特にCSS3・HTML5・Chrome・Firefox・safariについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のYATのBlogで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとYATのBlogの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
