10

タイトルの通りなのですが、WPFでテキストにルビをつける方法が分からないのです。

Canvasあたりにゴリゴリとコードビハインドで描画すればでき……そう?な気はしますが、どうせなら何らかのプロパティ(コレクションでしょうか)に本文やルビを設定すると表示できるようなUserControl/CustomControlを作る方法が分かればありがたいところです。

3 件の回答 3

3

おそらくWebBrowserコントロールを使って<ruby>タグでルビを付ける方法が、最も安全で手っ取り早いと思われます。

ユーザコントロールなどにWebBrowserコントロールを配置して、以下のようにNavigateToStringを呼び出すことでルビ付きのHTMLを表示させることができます。

webBrowser.NavigateToString("<html><body><ruby>螺鈿<rt>らでん</rt></ruby></body></html>");

試しに上記の原理で動くラベル風のカスタムコントロールを作ってみました

スクリーンショット

リンク先のカスタムコントロールをビルドしてdllを参照することで、上記スクリーンショットのように青空文庫風にルビを振ったり、 Append(string text, string ruby) メソッドを呼び出してルビ付きのhtmlを生成したりすることができます。
もしどなたかが同様のコントロールを作成するときの参考になれば幸いです。

1

manabu24さんが書かれていた本家SOでの回答を参考にXAMLで頑張ってみました。

<TextBlock FontSize="14" LineHeight="28" LineStackingStrategy="BlockLineHeight" FontFamily="Meiryo">
  <TextBlock LineHeight="14" TextAlignment="Center">
    <Run FontSize="8" Typography.Variants="Ruby">がっこう</Run><LineBreak/>
    学校
  </TextBlock>
  へ
  <TextBlock LineHeight="14" TextAlignment="Center">
    <Run FontSize="8" Typography.Variants="Ruby">い</Run><LineBreak/>
    行
  </TextBlock>
  きました。<LineBreak/>
  <TextBlock LineHeight="14" TextAlignment="Center">
    <Run FontSize="8" Typography.Variants="Ruby">たぶん</Run><LineBreak/>
    多分
  </TextBlock>
  。
</TextBlock>
  • Typography.Variants="Ruby" を指定することで、OpenTypeフォントに含まれるルビ用のグリフを選択します。メイリオで見た感じだと、少し文字が潰れて、太字気味になった気がします。
  • 構造は少し簡略化しましたが、フォントサイズを調節したルビの後で改行しているのは元記事同様です。他の方法が使えるとLineHeight周りが楽になりそうなのですが。
  • 行間を狭くするためにTextBlockにLineHeightを指定、それでもルビの上が余るので外側のTextBlockでもLineHeightを指定しています。本来の行の高さよりも低くするので、 LineStackingStrategy.BlockLineHeight が必要です。

sample

ここまでするぐらいなら、ブラウザコンポーネントを使いたくなりますね・・・。

1
  • 1
    空白を入れるとRunTextBlockの間にスペースが1個挿入されるので削った方がよいかと思います。
    – pgrho
    2016年2月10日 12:50
0

既に解決されてるかもしれませんが、同様の内容の質問がありましたのでリンクを貼り付けておきます。

Display text above specific text

RunタグにはTextプロパティも存在しますので、ViewModelからのBindingも可能でした。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。