WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 3 months ago

#48402 new defect (bug)

Preformatted blocks do not remove styled line spacing

Reported by: trickywidget Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: 2nd-opinion
Focuses: Cc:

Description

The line spacing in a Preformatted block is not correct. It is still being styled, which results in line spacing that is too high. This is clearly seen when using Unicode box-drawing characters. See attached image for an example.

Attachments (1)

Preformatted.png (10.4 KB) - added by trickywidget 2 years ago.

Download all attachments as: .zip

Change History (5)

#1 @noisysocks
13 months ago

  • Keywords reporter-feedback added

Hi @trickywidget. Line height in this case would be up to the theme. Does changing the line height in the theme / the theme's editor.css change the line height in the Preformatted block?

#2 @trickywidget
13 months ago

Anything in <pre></pre> tags should not be affected by the theme in any way. The whole point of them is that it designates content that is excluded from external formatting. Hence the bug report. If the theme line height is being applied by design, then it is not preformatted and the block needs to be renamed.

https://www.w3.org/TR/2011/WD-html5-author-20110809/the-pre-element.html

#3 @noisysocks
13 months ago

  • Component changed from Editor to Bundled Theme
  • Keywords 2nd-opinion added; reporter-feedback removed

<pre> doesn't denote text that is excluded from external formatting, just text that has a "structure represented by typographic content rather than by elements".

In other words, structure such as newlines and whitespace are determined using literal characters such as \n and rather than by elements such as <br>. CSS can still be used to style properties such as line-height, font-weight, letter-spacing, etc.

I do agree, however, that when using the default Twenty Twenty theme, the line height in a Preformatted block is so large that it renders the block impractical for things such as ASCII art and diagrams. This line-height is set by Twenty Twenty's pre styling.

I'd like us to consider decreasing the default pre line height, so am moving this ticket to Bundled Theme.

#4 @sabernhardt
3 months ago

I opened GB34127 to request a line-height control in the editor so that value can be edited—using any theme—when necessary.

I do not agree with reducing a theme's pre element line-height lower than 1.5 because a larger value can help when reading Verse and Code block content (also using pre tags). Twenty Nineteen's line-height is quite high at 1.8, though that matches the paragraph.

  • Twenty Ten: 1.4 within #content (where a paragraph is 1.667), or 1.5 in a widget (same for pre and paragraph)
  • Twenty Eleven: 1.5 (paragraph is 1.625)
  • Twenty Twelve: 1.714285714 within .entry-content and .comment-content (same as paragraph); pre inherits body line-height of 1 in widgets (where paragraphs have 1.846153846 line-height)
  • Twenty Thirteen: no specific line-height for pre, but body has 1.5
  • Twenty Fourteen: 1.6 (paragraph is 1.5); pre is slightly taller in widgets (1.6363636363)
  • Twenty Fifteen: 1.2 (paragraph is 1.6) at narrower screen widths (on larger screens and IE, pre line-height increases slightly to around 1.25 within content area, or 1.5 within a widget)
  • Twenty Sixteen: 1.3125 (paragraph is 1.75); in widgets, pre and paragraph line-heights match at larger screen widths (1.6153846154)
  • Twenty Seventeen: 1.6 (paragraph is 1.66, or 1.5 at larger screen widths)
  • Twenty Nineteen: 1.8 (same as paragraphs)
  • Twenty Twenty: 1.5 (paragraphs are 1.4 to 1.476 within .entry-content, or 1.5 in widgets)
  • Twenty Twenty-One: no specific line-height for pre, but the --global--line-height-body variable used on html equals 1.7
Note: See TracTickets for help on using tickets.