[wp-trac] [WordPress Trac] #56557: Twenty Twenty: Remove font size and weight definition on cite element (was: TwentyTwenty: Remove font size and weight definition on cite element)

[WordPress Trac]

#56557: Twenty Twenty: Remove font size and weight definition on cite element
-----------------------------------------+------------------------------
 Reporter:  Joen                         |       Owner:  (none)
     Type:  enhancement                  |      Status:  new
 Priority:  normal                       |   Milestone:  Awaiting Review
Component:  Bundled Theme                |     Version:  5.3
 Severity:  normal                       |  Resolution:
 Keywords:  needs-patch has-screenshots  |     Focuses:  css
-----------------------------------------+------------------------------
Changes (by sabernhardt):

 * focuses:   => css
 * component:  Themes => Bundled Theme
 * version:  trunk => 5.3
 * type:  defect (bug) => enhancement


Old description:

> The {{{cite}}} element in TwentyTwenty is styled in a way that makes it
> less flexible than it's meant to be, with a smaller font size and no
> italic. [[https://www.w3schools.com/tags/tag_cite.asp|The W3 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 -->
> }}}

New description:

 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. [[https://www.w3schools.com/tags/tag_cite.asp|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 -->
 }}}

--

Comment:

 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/56557#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform