Make WordPress Core

Opened 18 months ago

Last modified 18 months ago

#56557 new enhancement

Twenty Twenty: Remove font size and weight definition on cite element

Reported by: joen's profile Joen Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: needs-patch has-screenshots
Focuses: css Cc:

Description (last modified by sabernhardt)

The cite element in Twenty Twenty is styled in a way that makes it less flexible than it's meant to be, with a smaller font size and no italic. The W3Schools example uses the element to wrap the title of a painting, not the author, causing the title to have reduce emphasis (see tt-before.png).

The default styling for the cite element is to simply have italic text (see intended.png).

Suggestion: remove the font-weight, style, and size definitions from TT's cite element. See (tt-after.png)

Example block markup:

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li><cite>Do Androids Dream of Electric Sheep</cite>, Philip K. Dick</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><cite>Neuromancer</cite>, William Gibson</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><cite>The Diamond Age</cite>, Neal Stephenson</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

Attachments (3)

tt-before.png (97.2 KB) - added by Joen 18 months ago.
TwentyTwenty as shipping
intended.png (72.8 KB) - added by Joen 18 months ago.
Traditional cite styling
tt-after.png (110.3 KB) - added by Joen 18 months ago.
Suggested styling

Download all attachments as: .zip

Change History (5)

@Joen
18 months ago

TwentyTwenty as shipping

@Joen
18 months ago

Traditional cite styling

@Joen
18 months ago

Suggested styling

#1 @krupalpanchal
18 months ago

  • Keywords needs-patch has-screenshots added

#2 @sabernhardt
18 months ago

  • Component changed from Themes to Bundled Theme
  • Description modified (diff)
  • Focuses css added
  • Summary changed from TwentyTwenty: Remove font size and weight definition on cite element to Twenty Twenty: Remove font size and weight definition on cite element
  • Type changed from defect (bug) to enhancement
  • Version changed from trunk to 5.3

I'm nervous about changing this after the theme became public. I think people will expect these styles to remain as they are, at least within the blockquote element. Maybe the stylesheet could use :where(blockquote) cite for the weight and size to avoid increasing specificity.

The different font-family might be more problematic than size or weight with content like your example. The sans-serif Inter font stands out much more against Noto Serif than Garamond. If updating the font selectors, that would involve the twentytwenty_get_localized_font_family_elements arrays in addition to style.css and style-rtl.css.

Note: See TracTickets for help on using tickets.