The combination of

1. increased font size
2. left margin of the quote
3. left padding of the quote
4. right margin/padding of the quote

created a perfect storm where you sometimes have two words on a line ("intolerable and" on the screenshot).

Likely caused by T205341: Replace reset.css rules with ResourceLoaderSkinModule `normalize` feature.

Thanks for raising this @stjn! This is definitely not ideal.

Would you mind letting me know the device / viewport width with which that screenshot was taken so I can replicate it on our end?

This is also related to T356532. Even without the block quote styling, the new large text setting can create less optimal character per line numbers, especially in languages with longer words.

Playing around with the CSS on my end a bit. We don't want the margin to be 0 because we want the block quote to have some margin / indent on the left and right compared with the typical paragraph styles. So if we trim those down and trim down the padding between the text and the border on the left, we get something much more readable, even at larger type sizes.

As a first draft, I landed here:

blockquote {
    border-left: 3px solid var(--border-color-subtle);
    padding: 0px 0px 0px 1em;
    font-family: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif;
    font-size: 1.1em;
    margin: 0.5em;
}

Which looks like this:

Basically, the indentations are maintained but much less extreme and the CPL is back within accessible/readable ranges.

Here's the before/after on a German language article, which typically have longer words:

Before

After

In T361299#9723798, @JScherer-WMF wrote:

Would you mind letting me know the device / viewport width with which that screenshot was taken so I can replicate it on our end?

This is also related to T356532. Even without the block quote styling, the new large text setting can create less optimal character per line numbers, especially in languages with longer words.

This was just my Android device. Obviously the most glaring problems would be seen on 360px, this is somewhere like 480px width and 720px height.

I don’t think maintaining a margin is necessarily required to do, https://web.archive.org/web/20230116110600/https://en.m.wikipedia.org/wiki/New_England_(medieval) demonstrates this styling, which makes the new styling seem like much more of an error:

In T361299#9724051, @stjn wrote:

In T361299#9723798, @JScherer-WMF wrote:

Would you mind letting me know the device / viewport width with which that screenshot was taken so I can replicate it on our end?

This is also related to T356532. Even without the block quote styling, the new large text setting can create less optimal character per line numbers, especially in languages with longer words.

This was just my Android device. Obviously the most glaring problems would be seen on 360px, this is somewhere like 480px width and 720px height.

I don’t think maintaining a margin is necessarily required to do, https://web.archive.org/web/20230116110600/https://en.m.wikipedia.org/wiki/New_England_(medieval) demonstrates this styling, which makes the new styling seem like much more of an error:

Thanks for this. Just so I understand, is there potential tech debt or complications that we would incur if we kept the smaller margin? Ideally, the block quote would be inset from both sides of the main paragraph, including the vertical stroke that demarcates it from the other sections.

In T361299#9730812, @JScherer-WMF wrote:

Thanks for this. Just so I understand, is there potential tech debt or complications that we would incur if we kept the smaller margin? Ideally, the block quote would be inset from both sides of the main paragraph, including the vertical stroke that demarcates it from the other sections.

There is no potential tech debt, but I would argue that mobile format should use as much space as is allowed. Tablet+ can obviously have margins. I just don’t think it necessarily makes sense for a mobile layout (especially since not everyone has big smartphones).

In T361299#9731322, @stjn wrote:

In T361299#9730812, @JScherer-WMF wrote:

Thanks for this. Just so I understand, is there potential tech debt or complications that we would incur if we kept the smaller margin? Ideally, the block quote would be inset from both sides of the main paragraph, including the vertical stroke that demarcates it from the other sections.

There is no potential tech debt, but I would argue that mobile format should use as much space as is allowed. Tablet+ can obviously have margins. I just don’t think it necessarily makes sense for a mobile layout (especially since not everyone has big smartphones).

Apologies for the radio silence on this ticket. I think that's a fair concern. There are several cases in mobile where we use indentations (e.g. nested lists), and I think the benefit to the characters-per-line measurement created by removing the extra 0.5em of space on the left is negligible. In exchange, we maintain the information hierarchy of having the block quotes inset from the paragraph text in which they're nested. This also follows best practices for block quote typography in general. 0.5em as the left margin feels like a good compromise between the large, current left margin (too big) and no left margin at all. It's large enough to be noticed without being too large so as to reduce CPL below readable limits.

@matmarex I don’t think this was necessarily a duplicate because it was about the specific issue of blockquotes having too little space due to margins around them. But since there was nothing done about it for years since the task was submitted, I guess it doesn’t matter.