1772982 - Negative margins on blockquotes following unstyled text in reader mode lead to ugly overlapping text

Status: NEW

(Toolkit :: Reader Mode, defect, P3)

Description

[Martin Thomson [:mt:]]

The indicated site renders poorly in reader mode. <blockquote> elements squash into the paragraph above them in most cases. These blockquote elements use a top margin of -10px. This is ordinarily OK because most other elements have a fairly large bottom margin, but on this page the text between some blockquotes doesn't use <p> elements. It is bare text, which I think is styled as <div>, so it has no margins. This causes the blockquotes to nudge into the text. devtools doesn't assign an element to this interstitial text, so I don't know what rules are in play (a possible devtools enhancement?)

Comment 1

[:Gijs (he/him)]

Huh, fascinating. The internet suggests there is no way to select a #text node in CSS - I don't really want to select the text node, but I do want to select the <blockquote> following it, but I guess that isn't possible? Then there's a reference to ::target-text but that doesn't find me any non-web-platform hits in m-c so I guess we don't implement... Daniel, can you check if I'm missing something?

The simpler solution is probably to just make the negative margins not apply to blockquote at all - they are meant to be used in combination with padding: 10px but blockquotes don't get that padding... This was introduced in bug 1166365 and we should thus keep an eye on what the highlight of block quotes looks like when using narrate.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot of the issue: a squashed-into-prev-paragraph blockquote (where the previous paragraph was just a text node with no `p` wrapper)

(In reply to Martin Thomson [:mt:] from comment #0)

The indicated site renders poorly in reader mode. <blockquote> elements squash into the paragraph above them in most cases.

Just to capture what this squashing currently looks like, here's a screenshot.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: screenshot of a different section where the surrounding text is wrapped in <p> tags