WordPress.org

Make WordPress Core

Opened 12 months ago

Closed 8 months ago

Last modified 8 months ago

#44776 closed defect (bug) (fixed)

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

Reported by: Greg Raven Owned by: desrosj
Milestone: 5.0.2 Priority: normal
Severity: normal Version: 4.7
Component: Bundled Theme Keywords: fixed-5.0 has-patch
Focuses: Cc:

Description

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.

Attachments (3)

44776.diff (403 bytes) - added by torontodigits 12 months ago.
Proposed Fix
Twenty Sixteen - paragraph block, before patch.png (20.9 KB) - added by laurelfulford 8 months ago.
Twenty Sixteen - paragraph block, before patch
Twenty Sixteen - paragraph block, after patch.png (21.0 KB) - added by laurelfulford 8 months ago.
Twenty Sixteen - paragraph block, after patch

Download all attachments as: .zip

Change History (18)

#1 @SergeyBiryukov
12 months ago

  • Component changed from General to Bundled Theme
  • Keywords reporter-feedback added

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

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

#2 @torontodigits
12 months ago

Hi,

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

#3 @Greg Raven
12 months ago

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

Last edited 12 months ago by Greg Raven (previous) (diff)

#4 @JDTrower
12 months ago

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.

#5 @Greg Raven
12 months ago

Thank you.

@torontodigits
12 months ago

Proposed Fix

#6 @SergeyBiryukov
12 months ago

  • Keywords has-patch added; reporter-feedback removed
  • Milestone changed from Awaiting Review to 4.9.9

#7 @pento
10 months ago

  • Milestone changed from 4.9.9 to 5.0.1
  • Version changed from 4.9.8 to 4.7

#8 @pento
8 months ago

  • Milestone changed from 5.0.1 to 5.0.2

@laurelfulford
8 months ago

Twenty Sixteen - paragraph block, before patch

@laurelfulford
8 months ago

Twenty Sixteen - paragraph block, after patch

#9 @laurelfulford
8 months ago

  • Keywords commit added
  • Owner set to laurelfulford
  • Status changed from new to assigned

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.

#10 @Greg Raven
8 months ago

Thanks everyone. Much appreciated.

#11 @desrosj
8 months ago

  • Owner changed from laurelfulford to desrosj

#12 @desrosj
8 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

#13 @desrosj
8 months ago

  • Keywords fixed-5.0 added; commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

This needs to be merged into trunk.

#14 @desrosj
8 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

#15 @laurelfulford
8 months ago

#39812 was marked as a duplicate.

Note: See TracTickets for help on using tickets.