| Jdlrobson | |
| Nov 21 2023, 5:46 PM |
| F41561850: screenshot 322.png | |
| Dec 5 2023, 6:26 AM |
| F41541400: p-margins-prod.png | |
| Nov 27 2023, 10:02 PM |
| F41541399: p-margins-bottom-bigger.png | |
| Nov 27 2023, 10:02 PM |
| F41541398: p-margins-equal.png | |
| Nov 27 2023, 10:02 PM |
| F41541345: p-margins-equal.png | |
| Nov 27 2023, 9:46 PM |
| F41541347: p-margins-new fix.png | |
| Nov 27 2023, 9:46 PM |
| F41541346: p-margins-production.png | |
| Nov 27 2023, 9:46 PM |
| F41541131: Screenshot 2023-11-27 at 3.01.13 PM.png | |
| Nov 27 2023, 8:06 PM |
Currently paragraphs in Vector 2022 are separated by 7px (the rule .vector-body p). This is similar to line-height so it makes it difficult to distinguish paragraphs from sentences.
The paragraph margin will be increased to 14px.
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T351754#9381729 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | Jdrewniak | T341631 [EPIC] Q1 Main hypothesis: Typographical and palette customizations | |||
| Open | Jdrewniak | T313828 [EPIC] Typography: improve typography and allow for variable typography settings | |||
| Open | Jdrewniak | T345357 [Goal] Improve default typography on mobile and desktop sites | |||
| Resolved | ovasileva | T346064 Generate design options for new default | |||
| Resolved | ovasileva | T351693 Implement new default typography options | |||
| Resolved | None | T351754 Vector 2022 paragraph spacing is too small | |||
| Resolved | BUG REPORT | ovasileva | T352875 Lists and other line breaking items appearing within paragraphs have the wrong vertical margins. |
Change 976952 had a related patch set uploaded (by Mabualruz; author: Mabualruz):
[mediawiki/skins/Vector@master] Vector increase paragraph spacing to 1em
Change 976952 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Vector increase paragraph spacing to 1em
Change 977113 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):
[mediawiki/skins/Vector@master] Follow-up to a4ed8727 - Vector increase paragraph spacing to 1em
Change 977113 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Follow-up to 7a8059d76 - Vector increase paragraph spacing to 1em
I envisioned the change would only impact the space between paragraphs but it has also increased the space between headings and paragraphs. Is that intentional?
e.g. MediaWiki_Article_talk_page_vector-2022_0_viewport_0_phone.png
From Pixel I am also seeing this also impacting history page. I don't think this is a problem. The changes there look minimal (and an improvement) but flagging as in the past even minor changes to editor tools lead to complaints and this wasn't planned.
we can have top margin 0.5em and bottom as 1.5em? bit the original value was top + bottom, what do you think?
Change 977780 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):
[mediawiki/skins/Vector@master] Adjust .vector-body paragraph margins
I think that works, the patch above changes the paragraph margins to
.vector-body p { margin: 0.5em 0 1em 0; }
So that paragraphs generally have a 14px space between them, but the space between paragraphs and heading remains the same.
@JScherer-WMF sure, this example has an <h3> near the bottom "Neolithic period".
|
|
|
| production | Latest patch | previous patch |
Change 977780 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Adjust .vector-body paragraph margins
Re: Tech News - What wording would you suggest as the content, and when should it be included? (given that there's no deployment train next week). Thanks!
@Quiddity - this is on this week's train. In terms of wording: "The spacing between paragraphs on Vector 2022 has been changed from 7px to 14px to match the size of the text. This will make it easier to distinguish paragraphs from sentences."
Status: ✅ PASS
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA
Test Artifact(s):
✅ AC1: The paragraphs spacing should be 14px.
@JScherer-WMF sure, this example has an <h3> near the bottom "Neolithic period".
production Latest patch previous patch
Hi, looking at this, shouldn’t the bottom margin as well be applied after <ul>s (and <ols>)? In the list shown here, we can see in “Latest patch” that the spacing before the list is now larger than after the list. And since content-wise a list is usually a continuation of the paragraph before it, it is weird to have a larger space between that paragraph and the following list, than between the list and the following paragraph. It would also be interesting to see <blockquote>s, and think if there are other “paragraph-like” elements that appear in the flow of text and should also get the increase in bottom margin.
@JScherer-WMF sure, this example has an <h3> near the bottom "Neolithic period".
production Latest patch previous patch Hi, looking at this, shouldn’t the bottom margin as well be applied after <ul>s (and <ols>)? In the list shown here, we can see in “Latest patch” that the spacing before the list is now larger than after the list. And since content-wise a list is usually a continuation of the paragraph before it, it is weird to have a larger space between that paragraph and the following list, than between the list and the following paragraph. It would also be interesting to see <blockquote>s, and think if there are other “paragraph-like” elements that appear in the flow of text and should also get the increase in bottom margin.
Great catch! You're right. Lists, pull quotes and other line-breaking items like that should be considered part of the same paragraph. If they appear in the middle of a paragraph, spacing should be equal above and below. If they are at the end of a paragraph, the larger paragraph spacing should be applied below the list. Thanks for raising this! I'll file a bug.
