CODEWITHSUNDEEP
c#wpfxamlunicoderuby-characters
witoong623
witoong623

Reputation: 1199

Display text above specific text

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.

Upvotes: 3

Views: 1407

Answers (1)

Panagiotis Kanavos
Panagiotis Kanavos

Reputation: 131591

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

Upvotes: 3

Related Questions