CSS definitions for <sub> and <sup> are reversed

[Greg Raven]

The CSS definitions for <sub> and <sup> are reversed. If you use <sub>, the enclosed text is raised. If you use <sup>, the enclosed text in lower. Exactly wrong.

[SergeyBiryukov]

Hi @greg-raven, welcome to WordPress Trac! Thanks for the report.

Could you clarify which theme are you seeing these reversed styles in?

[torontodigits]

Hi,

Tested <sub> & <sup> tags on different WordPress default Twenty themes from Twenty Ten to Twenty Seventeen, works fine for me.

[Greg Raven]

I'm using Twenty Sixteen on my current project.

I see now that it displays correctly on the actual page, but it is reversed in the HTML editor window.

Here is the correctly marked-up text:

​https://www.dropbox.com/s/i9alk59mnvj16mr/Screen%20Shot%202018-08-11%20at%205.36.08%20PM.jpg?dl=0

And here is the incorrect resulting display:

​https://www.dropbox.com/s/bf94wb632oarifp/Screen%20Shot%202018-08-11%20at%205.35.49%20PM.jpg?dl=0

Here is the text on the page the visitor sees:

​https://www.dropbox.com/s/z99ujqc22fx7i18/Screen%20Shot%202018-08-11%20at%205.46.15%20PM.jpg?dl=0

[JDTrower]

I can confirm that a brand new install of WordPress 4.9.8 and Twenty Sixteen 1.5 does result in the subscript and superscript being reversed. At fault is the editor-style.css file which currently has:

sub {
	top: -6px;
}

sup {
	bottom: -3px;
}

It should be

sup {
	top: -6px;
}

sub {
	bottom: -3px;
}

Making this change on my fresh install allowed for the superscript and subscript to display correctly in the Visual editor. I'd be happy to create a patch for this, once I get my development system back up and functioning within the next day or so.

[Greg Raven]

Thank you.

[torontodigits]

Proposed Fix

[laurelfulford]

Twenty Sixteen - paragraph block, before patch

[laurelfulford]

Twenty Sixteen - paragraph block, after patch

[laurelfulford]

Thanks for the report @Greg Raven, for the fix @JDTrower, and for the patch @torontodigits!

This update looks good to me. I've attached screenshots of how it looks in the block-based editor, before and after. Marking as commit in case it can get into the 5.0.2 release with some block-related fixes for Twenty Sixteen.

[Greg Raven]

Thanks everyone. Much appreciated.

[desrosj]

In 44210:

Twenty Sixteen: Fix superscript and subscript.

When using the block-based editor in Twenty Sixteen, superscript is displaying below the baseline and subscript is displaying above the baseline. This is the opposite of what should occur. This reverses the two to display correctly.

Props greg-raven, torontodigits, JDTrower.
Fixes: #44776.

[desrosj]

This needs to be merged into trunk.

[desrosj]

In 44311:

Twenty Sixteen: Fix superscript and subscript.

When using the block-based editor in Twenty Sixteen, superscript is displaying below the baseline and subscript is displaying above the baseline. This is the opposite of what should occur. This reverses the two to display correctly.

Props greg-raven, torontodigits, JDTrower.

Merges [44210] into trunk.

Fixes: #44776.