グロスの新しい実装法
ルビのデザインをcssで制御する方法みたいな記事を読んでいたところ、疑似要素の内容は属性の値を取得できるので、カスタム属性でhtmlの中にルビを書いてしまえば、疑似要素を使いつつも保守性が上がるみたいな話を目にしたので、早速やってみることにしました。今日は早く寝たいので、短めのグロス振りをします。というわけで、「モスクワ郊外の夕べ」の一番を。有名な歌なので日本語訳もあまたありますが、まあグロスをやってみたかったついでということでご愛嬌。明日以降時間とやる気があったら二番以降もやるかもしれません。
Не слышны в саду даже шорохи
не слы́шн-ы в са́д-у да́же шо́рох-и
庭ではささめきさえも聞こえない
Всё здесь замерло до утра.
всё здесь за́мер-л-о до у́тр-а
すべてがここで朝までじっとしている
Если б знали вы, как мне дороги
Если б зна́ли вы, как мне до́рог-и
もし君が知っていたら、私にとってどれほど大切か
подмосковные вечера.
подмоско́вн-ые вечер-а́
モスクワ郊外の夕べが
以上、サンプルでした。もとの要素の幅は疑似要素にあわせられないので、グロスのほうが長くなってしまうと、隣り合う語のグロスが被ってしまうという問題が起こりました。グロス部分の横幅を目いっぱいにして均等割り付けにし、一行辺りの語数を増やすことで見た目の異様さを減らしてごまかしてみようかとも思ったのですが、そうするとレスポンシブ対応が死んでしまいます。今回はさしあたり、word spacingを増やすことで対応してみました。が、よりよい方法の探求が必要そうです。