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).