Display text above specific text

Question

I want to display text above specific text, It look exactly like this.

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.

Answer 1

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