WordPress.org

Make WordPress Core

Opened 16 months ago

Closed 12 months ago

Last modified 11 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:
PR Number:

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 16 months ago.
Proposed Fix
Twenty Sixteen - paragraph block, before patch.png (20.9 KB) - added by laurelfulford 12 months ago.
Twenty Sixteen - paragraph block, before patch
Twenty Sixteen - paragraph block, after patch.png (21.0 KB) - added by laurelfulford 12 months ago.
Twenty Sixteen - paragraph block, after patch

Download all attachments as: .zip

Change History (18)

#1 @SergeyBiryukov
16 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
16 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
16 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 16 months ago by Greg Raven (previous) (diff)

#4 @JDTrower
16 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
16 months ago

Thank you.

@torontodigits
16 months ago

Proposed Fix

#6 @SergeyBiryukov
16 months ago

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

#7 @pento
14 months ago

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

#8 @pento
12 months ago

  • Milestone changed from 5.0.1 to 5.0.2

@laurelfulford
12 months ago

Twenty Sixteen - paragraph block, before patch

@laurelfulford
12 months ago

Twenty Sixteen - paragraph block, after patch

#9 @laurelfulford
12 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
12 months ago

Thanks everyone. Much appreciated.

#11 @desrosj
12 months ago

  • Owner changed from laurelfulford to desrosj

#12 @desrosj
12 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
12 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
12 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
11 months ago

#39812 was marked as a duplicate.

Note: See TracTickets for help on using tickets.