

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

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


CC BY-SA 3.0
2015-08-11T11:21:44.890
14282
2016-02-10T12:31:44.480
10588
question
wpf
WPFでルビ（ふりがな）を表示するには？


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

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

[code]

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

試しに上記の原理で動くラベル風のカスタムコントロールを[作ってみました](https://github.com/payaneco/WpfRubyLabel)。

[![スクリーンショット](https://i.stack.imgur.com/T2NpP.png)](https://i.stack.imgur.com/T2NpP.png)

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


CC BY-SA 3.0
2015-11-14T15:20:54.823
18818
2015-11-14T15:20:54.823
9820
14282
answer


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

[Display text above specific
text](https://stackoverflow.com/questions/32996029/display-text-above-
specific-text)

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


CC BY-SA 3.0
2016-02-10T06:29:57.707
21933
2016-02-10T06:29:57.707
2017-05-23T12:38:56.467
-1
14356
14282
answer


manabu24さんが書かれていた[本家SOでの回答](https://stackoverflow.com/a/33015856/2818869)を参考にXAMLで頑張ってみました。

[code]

    <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>
    
[/code]

  * `Typography.Variants="Ruby"` を指定することで、OpenTypeフォントに含まれるルビ用のグリフを選択します。メイリオで見た感じだと、少し文字が潰れて、太字気味になった気がします。
  * 構造は少し簡略化しましたが、フォントサイズを調節したルビの後で改行しているのは元記事同様です。他の方法が使えるとLineHeight周りが楽になりそうなのですが。
  * 行間を狭くするためにTextBlockにLineHeightを指定、それでもルビの上が余るので外側のTextBlockでもLineHeightを指定しています。本来の行の高さよりも低くするので、 [`LineStackingStrategy.BlockLineHeight`](https://msdn.microsoft.com/ja-jp/library/system.windows.linestackingstrategy\(v=vs.110\).aspx) が必要です。

[![sample](https://i.stack.imgur.com/Qy0d7.png)](https://i.stack.imgur.com/Qy0d7.png)

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


CC BY-SA 3.0
2016-02-10T12:31:44.480
21947
2016-02-10T12:31:44.480
2017-05-23T12:38:55.307
-1
8000
14282
answer