How do I display rubi (furigana) in WPF?

As the title suggests, I don't know how to ruby text in WPF.

I can do it if I draw it around Canvas with a behind-the-scenes code... I think so, but I would appreciate it if you could find a way to create UserControl/CustomControl that can be displayed by setting the body or rubi in some property (collection).

wpf

2022-09-30 14:56

3 Answers

Perhaps using the WebBrowser control to ruby with <ruby> tags is the safest and easiest way to do this.

You can place WebBrowser controls in user controls and other places to display ruby HTML by calling NavigatorToString as follows:

webBrowser.NavigateToString("<html>body>ruby>Raby>Raden </rt><ruby></body>>/html>";

As a trial, we created a custom control that works with the above principles.

By building a custom control to link to and referencing dll, you can wave rubies in the blue sky style as shown in the screenshot above, or call the Append(string text, string ruby) method to generate html with rubies.
I hope someone can help you create similar controls.

2022-09-30 14:56

I tried my best with XAML by referring to Answer at home SO written by manabu24.

<TextBlock FontSize="14" LineHeight="28" LineStackingStratey="BlockLineHeight" FontFamily="Meiryo">
  <TextBlock LineHeight="14"TextAlignment="Center">
    <Run FontSize="8"Typography.Variants="Ruby">School</Run><LineBreak/>
    school
  </TextBlock>
  What
  <TextBlock LineHeight="14"TextAlignment="Center">
    <Run FontSize="8"Typography.Variants="Ruby">I</Run><LineBreak/>
    row
  </TextBlock>
  Here we go. <LineBreak/>
  <TextBlock LineHeight="14"TextAlignment="Center">
    <Run FontSize="8"Typography.Variants="Ruby">Probably </Run><LineBreak/>
    Maybe
  </TextBlock>
  。
</TextBlock>

Typography.Variants="Ruby" to select the glyph for rubies included in the OpenType font.From what I saw in Mayrio, I feel that the characters are a little crushed and bold.
The structure is a little simplified, but line breaks are similar to the original article after the font size-adjusted rubi.If I could use another method, it would be easier around LineHeight.
In order to narrow the space between the lines, LineHeight is specified for TextBlock, but the rubi is still left over, so LineHeight is also specified for TextBlock on the outside.LineStackingStratey.BlockLineHeight is required because it is lower than the original line height.

I'd rather use browser components than stop here...

2022-09-30 14:56

It may have already been resolved, but I have a similar question, so I will paste the link.

Display text above specific text

The Run tag also has Text properties, so Binding from ViewModel was also possible.

2022-09-30 14:56

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656