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.

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

[mediaqueries] Account for minimum font size in relative length media queries #5858

Closed
leefloyd opened this issue Jan 11, 2021 · 5 comments
Closed
Labels
Closed Accepted by CSSWG Resolution Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. mediaqueries-4 Current Work

Comments

@leefloyd
Copy link

When a browser has a minimum font-size that is larger than the default font-size, the initial font-size used in media queries is relative to the smaller value. For a site that has been coded to scale with relative lengths, this can cause many layout issues as breakpoints no longer align with what has effectively become relative size of the content. Relative units in declarations are affected by minimum font-size, but media queries are not affected.

In the context of this following statement, I think the initial value of the font size should be defined as the greater of the user-specified sizes—either default or minimum font-size.
"Relative length units in media queries are based on the initial value, which means that units are never based on results of declarations."

https://www.w3.org/TR/mediaqueries-5/#units

@fantasai fantasai added the mediaqueries-4 Current Work label Jan 13, 2021
@frivoal
Copy link
Collaborator

frivoal commented Jan 18, 2021

I agree with you. As long as browsers are not implementing the minimum font-size via some property (applied in the UA stylesheet), then there shouldn't be any technical reason why doing what you suggest should be unfeasible.

@lilles
Copy link
Member

lilles commented Jan 19, 2021

Minimum font-size does not affect em/rem lengths in computed values on elements. Blink aligned with Firefox for M79 fixing 308862. The reason for fixing it was that a minimum font-size would break a lot of real-world layouts. We discovered that when there was a bug which accidentally wrote a minimum font-size of 6px from the settings UI and we got many reports about it.

The typical failing sites would set the font-size on the html element to a size lower than the minimum font-size expecting rem units for other elements to not be affected by the minimum font-size.

So, I don't think the statement about relative units in the first comment is accurate. At least not for Chrome or Firefox. The width and height of this box is 100px regardless of minimum font-size:

<style>
  div { font-size: 1px; width: 100em; height; 100em; background: green }
</style>
<div></div>

@leefloyd
Copy link
Author

With typical browser defaults, this box would be 100px wide.
If I change my default font size to 24px, the box will be 150px wide.
If I leave my default font size at 16px but change my minimum font size to 24px, the box will remain 100px wide. Thus, text content inside the box will be enlarged but the box will remain the same size. Media queries cannot be used to detect/correct this scenario since they will still be relative to the 16px default font size as well.

<style>
  div { width: 6.25rem; height: 6.25rem; background: green }
</style>
<div>This text should fit comfortably inside</div>

@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed [mediaqueries] Account for minimum font size in relative length media queries, and agreed to the following:

  • RESOLVED: Have the MQ resolve their em against the actual default size which includes minimum.
The full IRC log of that discussion <dael> Topic: [mediaqueries] Account for minimum font size in relative length media queries
<dael> github: https://github.com//issues/5858
<dael> florian: You can use font based units in MQ. Is viewport at least 12em. If you changed default font size in browser this is the size that will be taken into account. If you do it using your own CSS it's ignored.
<dael> florian: However, undefined if it takes min font size. If you make min > default should MQ calc on default or min? Having MQ being inconsistent with layout makes them unreliable. But it's tricky
<TabAtkins> q+
<dael> florian: As rune pointed out in issue we're kind of doing weird things with them. The em and rem length units are not effected by min font size. If you increase font is bigger but things measured is not.
<smfr> q-
<astearns> ack smfr
<dael> florian: Appears we have to lie in one way or another. If people do MQ in font units to measure text taking min size seems good. But if trying to check against something measured in font units it wouldn't be.
<dael> florian: I don't know what would be better, but good to define.
<dael> florian: I think all browsers do not take min into account. We had somebody complaining b/c that wasn't convenient
<dael> TabAtkins: The use cases rune talked about are things like people setting root font size to 10px so they can use em as a big pixel unit. That is a little different then doing this with root font size
<dael> TabAtkins: I don't think the reasoning for lying in normal ems applies here. Might be good to do for consistency, but use case if different enough that telling truth about text size can be worthwhile here
<dael> fantasai: I agree with TabAtkins. Use cases for font relative units is about how much text can I fit, can I do 2 col of content. That's largely based on size of text. em here should reflect font size
<dael> florian: Happy with that. Is anyone not or is rune on?
<dael> rune: I'm fine with that. Reason why I pointed out is the original reporter said something about consistency and this wouldn't be. There is no consistency argument. I don't have objections against resolving to take min font size into account
<dael> florian: Sounds like consensus
<tantek> regrets+
<dael> astearns: Prop: MQ will take the larger of font size or min font size
<dael> TabAtkins: Have the MQ resolve their em against the actual default size which includes minimum.
<dael> astearns: Objections to TabAtkins wording?
<dael> RESOLVED: Have the MQ resolve their em against the actual default size which includes minimum.

@leefloyd
Copy link
Author

I like that wording! Thanks all!

@fantasai fantasai added Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. and removed Needs Edits labels Dec 24, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Closed Accepted by CSSWG Resolution Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. mediaqueries-4 Current Work
Projects
None yet
Development

No branches or pull requests

5 participants