Display text above specific text

Question

I want to display text above specific text, It look exactly like this.
furigana above kanji
As you can see under 学校(called kanji) have がっこう(called furigana) displaying.
I know exactly what character that should have furigana above it.

The question is how can I? I thought I can use \n with 2 Label but is there any other way to display something like this?

Edit text that I mention is tweet feed and analyzer that I use parse it to morpheme node this is why I ask for how to display text above specific text.

This depends on whether WPF can render [ruby characters in Unicode](https://en.wikipedia.org/wiki/Ruby_character#Unicode) WPF may not be able to render the text. It would help if you can include the relevant text in the question, even if it doesn't render correctly. If you can write it in any text editor using Unicode characters, you *may* be able to display it in a simple TextBlock. If you can write the text in an RTF editor, you could use RichTextBox. — Panagiotis Kanavos, Oct 07 '15 at 15:30
If you can't do this, you may be able to use Span and Run elements inside a TextBlock, just like spans are used in HTML to render one character above the other — Panagiotis Kanavos, Oct 07 '15 at 15:36
@PanagiotisKanavos The example above is この学校はたくさんの生徒がいあます。with がっこう and せいと　, I can write it using unicode and I thought it can be write in RTF editor too. — witoong623, Oct 07 '15 at 15:54
Please provide [a good, _minimal_, _complete_ code example](https://stackoverflow.com/help/mcve) that shows clearly what you've tried so far (that comes closest to what you want), along with a precise and detailed explanation of what that code does and how that's different from what you want. As stated, it's not clear at all what _specific_ piece of the puzzle you are having trouble with, and at the moment you seem to be asking "write all the code for me". — Peter Duniho, Oct 07 '15 at 15:56
@PeterDuniho I didn't post code example because I do have no idea how can I display text under specific text in WPF, I've been finding the way do it and eventually I came to asked about it here for what I should looking for. I'm sorry for writed all of this puzzle I'll try to improve it as I can. — witoong623, Oct 07 '15 at 17:15
@PanagiotisKanavos I'm trying to use Span with Run in TextBlock but whatever I've done, it just render inline as normal TextBlock, Could you tell me what properties I have to use and how to combine it — witoong623, Oct 08 '15 at 09:57
@PeterDuniho actually, the OP *has* provided a complete example. The problem is *very* specific - how to render a combination of Unicode characters not encountered unless you are from East Asia. The OP most definitely isn't asking about ready-made code but something that may not be possible using *only* Unicode or XAML. In fact, I can't even find the correct tag to apply to the question! — Panagiotis Kanavos, Oct 08 '15 at 10:04
@PanagiotisKanavos: _"how to render a combination of Unicode characters"_ -- I don't see how you get that. If that were all the OP was asking, the answer would be simple: use the right font, one that includes the characters in question. Instead, he appears to have some concern about the _placement_ of characters, a concern that may exist regardless of the characters or font actually used. There are several different aspects to the problem; asking for a complete solution is too broad. The OP needs to narrow to the specific issue they are unable to solve themselves. — Peter Duniho, Oct 08 '15 at 15:40
@PeterDuniho I suspect you didn't read the updated question or the links in the comments, or even try to google for furigana. The OP isn't required to type a tutorial on East Asian typography. In fact, had the OP tried to explain the question in non-specific terms it would be impossible to search for the answer (as I did). The result is that this is a special type of character *annotation*, not just placement. WPF has partial support, and HTML has unofficial support using Ruby markup. Character placement is the ugly hack one has to use when markup isn't available or doesn't work (as in WPF) — Panagiotis Kanavos, Oct 08 '15 at 15:54

score 3 · Accepted Answer · answered Oct 08 '15 at 12:30

WPF supports many OpenType Font Features but Ruby isn't rendered properly, even though it is available through the Typography.Variants attribute:

<TextBlock>
<Span>
    学校<Run Typography.Variants="Ruby">がっこう</Run>
</Span>

This won't display the ruby characters as it should. I haven't found any (working) example that shows how to use "Ruby".

One workaround (hack actually) is to use a line break as you tried to do. This is done by using the <LineBreak/> tag:

    <TextBlock >
        <Span FontFamily="Meiryo">  
            <Run FontSize="8">えみこ</Run><LineBreak/>恵美子
        </Span>
    </TextBlock>

You can put this TextBlock into a StackPanel to include it in a paragraph:

    <TextBlock>
        <Span FontFamily="Meiryo" >  This is my normal text
            <StackPanel >
                <TextBlock >
                    <Span>
                        <Run FontSize="8">えみこ</Run><LineBreak/>恵美子
                    </Span>
                </TextBlock>
            </StackPanel>
            and this is the rest of the text
        </Span>
    </TextBlock>

The result will be something like the following snippet:

 This is my normal text
<ruby>
<rb>恵美子</rb><rp>(</rp>
<rt>えみこ</rt><rp>)</rp>
</ruby>
and this is the rest of the text

The markup isn't pretty and you'll have to fiddle with offsets to get the stack panel's bottom aligned correctly

It work! :D though it isn't pretty as in HTML. I will try to create custom UserControl and combine everything for use it. Thank you very much. — witoong623, Oct 08 '15 at 16:15
`FontVariants.Ruby` only specifies the text should be rendered using [*Ruby Notation Forms* in OpenType](http://help.typekit.com/customer/en/portal/articles/1789736-syntax-for-opentype-features-in-css#ruby) instead of default glyph. It doesn't handle placement of ruby text. — unarist, Feb 10 '16 at 11:27

Display text above specific text

1 Answers1