Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adjust p-nudge to better align text to the baseline grid #4957

Merged
merged 12 commits into from Apr 30, 2024
Merged

Adjust p-nudge to better align text to the baseline grid #4957

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
bc732f0
adjust p-nudge
dgtlntv Jan 24, 2024
e5bd94f
Merge branch 'canonical:main' into main
dgtlntv Jan 24, 2024
b69c496
Update _base_forms.scss
dgtlntv Jan 24, 2024
62ae512
Merge branch 'main' of https://github.com/dgtlntv/vanilla-framework
dgtlntv Jan 24, 2024
381888f
moved accounting of border to padding
dgtlntv Jan 24, 2024
2acf13a
fix hardcoded value
dgtlntv Jan 24, 2024
df3853c
fixed property ordering
dgtlntv Jan 24, 2024
97922d6
Update _base_forms.scss
dgtlntv Jan 24, 2024
fb6ff2c
actually it has nothing to do with subpixel rendering
dgtlntv Jan 25, 2024
a62c167
Merge branch 'canonical:main' into main
dgtlntv Apr 29, 2024
ae2dbf9
revert changes unrelated to the nudge update
dgtlntv Apr 30, 2024
14b9f55
removed extra line
dgtlntv Apr 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion scss/_base_button.scss
View file
Open in desktop
Expand Up @@ -26,7 +26,7 @@
justify-content: center;
line-height: map-get($line-heights, default-text);
margin: 0 $sph--large $input-margin-bottom 0;
padding: $input-vertical-padding $sph--large;
padding: calc($input-vertical-padding - $input-border-thickness) $sph--large; //need to account for border, however due to how browsers render decimal pixels, on certain screens, ceil the border to 1px but there would still be 1.5px removed from the margin which would drift the baseline
text-align: center;
text-decoration: none;

Expand Down
1 change: 0 additions & 1 deletion scss/_base_details.scss
View file
Open in desktop
Expand Up @@ -9,7 +9,6 @@
@extend %common-default-text-properties;
@include vf-focus;

margin-bottom: $spv-nudge; //push subsequent text onto baseline
max-width: $text-max-width;
padding-bottom: 2 * $sp-unit - map-get($nudges, p); // use padding instead of margin-bottom in order to make the focus state symmetric
}
Expand Down
8 changes: 7 additions & 1 deletion scss/_base_forms.scss
View file
Open in desktop
Expand Up @@ -6,7 +6,12 @@
@include vf-b-range;
// Used in buttons, inputs
%bordered-text-vertical-padding {
padding-bottom: $input-vertical-padding;
padding-bottom: calc($input-vertical-padding - $input-border-thickness);

@media only screen and (max-resolution: 1.99dppx) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this only inside a media query? Would such exceptions be needed anywhere else?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is true. We actually would need to do this everywhere where $input-border-thickness has to be accounted for in the components padding. I wonder if the media query should actually should just be moved to the original definition of $input-border-thickness?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we can. SCSS variables need value defined on build time, we can't make this value dependent on media query.

If media query is needed we need to do it on component level.

But why is this value different of different dppx?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah I see that is unfortunate.

On low pixel density devices the 1.5px border is computed as 1px.
If we use the $input-border-thickness variable in the calculation and the user is on a low pixel density screen then the border is rendered as 1px, but we still subtract 1.5px from the padding which will throw off the baseline grid alignment.
So the easiest solution I could come up with to solve this issue is to check if the screen is capable of displaying 0.5px steps (which should be everything >1.99dppx).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dgtlntv thanks, now I see you actually explained it in a comment earlier.

Overall the media query solution is not very hacky by itself, but the problem is that it needs to be done everywhere where we substract border from padding separately. Adding even more confusing complexity.

We don't seem to be doing this right now (while using 1.5px border). So would it be fine (I know it's not ideal), to keep it as is (1.5px regardless of density)? Does it throw the baseline grid off enough that it matters?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They are not really connected, so we could definitely separate them out in several PR's I just combined them here, since they all relate to more accurately align to the baseline grid. But I can focus this PR on adjusting the nudge and creating a new one for the border.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is strange. Are you zoomed in by any chance? Browser zoom scales changes border values afaik.
Because onMyMachine™ it aligns perfectly both on low and high pixel density screens.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call, indeed I was zoomed in. Without zoom they both (current Vanilla and this PR) align pretty well.

image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They are not really connected, so we could definitely separate them out in several PR's I just combined them here, since they all relate to more accurately align to the baseline grid. But I can focus this PR on adjusting the nudge and creating a new one for the border.

I have no problem with nudge value update, so if we can separate it, it can be merged right away.

As for the border adjustments between screen densities we would need to identify all the places where it's needed and find a way to make this work without too much overhead.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed all non nudge related changes and will create a separate PR for the border related stuff. :)

padding-bottom: calc($input-vertical-padding - 1px);
}

padding-top: $input-vertical-padding;
}

Expand Down Expand Up @@ -101,6 +106,7 @@
label {
cursor: pointer;
display: inline-block;
line-height: map-get($line-heights, default-text); // on larger screens the label would have the wrong line height?
margin-bottom: $spv--large - $spv-nudge;
margin-top: 0;
max-width: $text-max-width;
Expand Down
10 changes: 5 additions & 5 deletions scss/_settings_spacing.scss
View file
Open in desktop
Expand Up @@ -52,10 +52,10 @@ $nudges: (
h4-large: 0.45rem,
h4: 0.45rem,
h4-mobile: 0.45rem,
h5: 0.4rem,
h6: 0.4rem,
h6-large: 0.4rem,
p: 0.4rem,
h5: 0.375rem,
h6: 0.375em,
h6-large: 0.375rem,
p: 0.375rem,
p-ubuntumono: 0.45rem,
small: 0.05rem,
x-small: 0.25rem,
Expand Down Expand Up @@ -117,7 +117,7 @@ $sp-after: (
$spv-nudge: map-get($nudges, p) !default; // top: nudge; bottom: unit - nudge; result: height = exact multiple of base unit
$spv-nudge-compensation: $sp-unit - $spv-nudge !default;
$input-margin-bottom: $sp-unit * 4 - $spv-nudge * 2;
$input-vertical-padding: calc($spv-nudge - 1px);
$input-vertical-padding: $spv-nudge; //moved the -1px to the components themselfs since its different for button / input field

// tick element variables
$form-tick-box-size: 1rem;
Expand Down