Question

I’m trying to make a Hyperlink that contains text with super- and/or subscripts. I’ve found two ways to do this, and both of them suck.

Solution #1: use Typography.Variants. This gives a terrific superscript… for some fonts.

<StackPanel>
  <TextBlock FontFamily="Palatino Linotype" FontSize="30">
    <Hyperlink>R<Run Typography.Variants="Superscript">2</Run></Hyperlink>
    (Palatino Linotype)
  </TextBlock>
  <TextBlock FontFamily="Segoe UI" FontSize="30">
    <Hyperlink>R<Run Typography.Variants="Superscript">2</Run></Hyperlink>
    (Segoe UI)
  </TextBlock>
</StackPanel>

_{(source: excastle.com)}

Looks beautiful in Palatino Linotype; but for fonts that don’t support variants, it’s simply ignored, no emulation is done, and the text is full-size, at-baseline, 100% normal. I would prefer to allow my end-users to select the font they want to use, and still have super/subscripts work.

Solution #2: use BaselineAlignment. This raises or lowers the text appropriately, though unlike solution #1, I have to decrease the font size manually. Still, it’s effective for all fonts. The problem is the Hyperlink’s underline.

<TextBlock FontSize="30" FontFamily="Palatino Linotype">
  <Hyperlink>
    R<Run BaselineAlignment="Superscript" FontSize="12pt">2</Run>
  </Hyperlink>
</TextBlock>

The underline is raised and lowered along with the text, which looks pretty wretched. I’d rather have a continuous, unbroken underline under the whole Hyperlink. (And before anyone suggests a Border, I’d also like the Hyperlink to be able to word-wrap, with all of the words underlined, including the first row.)

Is there any way to make superscript and subscript work in WPF, in any font, without looking laughably bad when underlined?

Answer 1

If the hyperlink isn’t going to wrap to more than one line, then embedding another TextBlock can work:

<TextBlock FontSize="30" FontFamily="Palatino Linotype">
  <Hyperlink>
    <TextBlock>
      R<Run BaselineAlignment="Superscript" FontSize="12pt">2</Run>
    </TextBlock>
  </Hyperlink>
</TextBlock>

This will give a solid hyperlink under the Hyperlink’s child, which means an unbroken hyperlink:

However, if the embedded TextBlock needs to wrap to multiple lines, you’ll only get one underline under the entire wrapped paragraph, rather than underlining each line of text:

_{(source: excastle.com)}

If you can put a TextBlock only around a short bit of content that needs superscripts — e.g., around just the R^2 in the above example — and leave the rest of the text parented to the hyperlink, then you get underlining as normal. But sometimes that’s not practical, so it’s something to watch out for.