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

em font size #303

Open
dullbananas opened this issue Apr 5, 2021 · 6 comments
Open

em font size #303

dullbananas opened this issue Apr 5, 2021 · 6 comments

Comments

@dullbananas
Copy link

No description provided.

@pravdomil
Copy link

Hi @dullbananas, can you be more descriptive, what is your motivation behind creating this issue?

@dullbananas
Copy link
Author

@pravdomil using em for font size allows the user to adjust it

@pravdomil
Copy link

have not heard about such a thing

@ghost
Copy link

ghost commented Aug 9, 2021

The em method of font sizing is where the font size is created as proportional to the font size of the parent element. Consider the following:

<div style="font-size: 24pt;">
  <p style="font-size: 1em;">
    Ways that you can render font size in HTML:
    <ul style="font-size: 0.75em">
      <li>Points</li>
      <li>Pixels</li>
      <li>Em</li>
      <li>Rem</li>
    </ul>
  </p>
</div>

The font size of the p tag is 24pt and the font size of the list elements is 18pt because it's 0.75x the parent element's font size. Basically, it's CSS's way of parameterizing font size so that the relative sizing stays the same within an element and all you have to change is the top-level element.

The thing is, the em method is only necessary in CSS because CSS doesn't have anything to do with the generation of the document. And therefore you can't pass around values the way you can in a programming language. em is a context binding it uses to hack around this. But Elm just IS the thing that generates your page, and it's a full blown programming language. So you can implement the behavior yourself by having the font size of each of your elements be a parameter passed into the function which renders the element or which builds & updates its state:

viewMyThing : MyState -> Float -> Element msg
viewMyThing state parentFontSize =
  row
    [ Font.size (round (state.fontRatio * parentFontSize)) ]
    [ -- render rest of state
    ]

Also, I find em problematic in principle in regards to elm-ui since elm-ui strives as much as possible to have no unexpected layout behavior: WYSIWYG. But with em the behavior of viewing elements is dependent on context and variables which are outside the scope of not only the element but sometimes the source code itself! Such as when I compile my Elm program to a main.js and set up my own index.html (which is often necessary for things like JS interop and WebSockets):

<body>
  <!-- THE LAYOUT CHANGES BASED ON WHAT THE FONT SIZE ATTRIBUTE OF THE #app IS -->
  <div style="font-size: 24pt;" id="app">
    <script>
      var elmApp = Elm.Main.init({
      node: document.getElementById("app"),
        flags: null,
      });
    </script>
  </div>
</body>

I think pretty much the only use case is if you are replacing one part of a bigger front-end which already extensively uses em. I suspect you could probably work around this using ports and DOM introspection on the JS side though.

TL;DR - em is hack that CSS (probably begrudgingly) supports to allow parametric sizing and it exists only because CSS isn't involved in document generation. But Elm just IS the thing that generates your page and it's a full programming language, so go nuts!

@madidier
Copy link

madidier commented Nov 15, 2023 •
edited
Loading

There's a good article here on why em/rem units matter. It's an accessibility issue.

TL;DR: In general, 16px is the default font size in most web browsers, but a user may decide to change that in their OS and/or browser settings for accessibility reasons. Using px units for font-size means the user's preferences (and needs) won't be respected.

Regarding the issue of em units being dependent on the parent node's font-size, there's a simple workaround: use rem units instead. As long as no CSS overrides the root element's font-size, they will be relative to the user's preferred font size and independent of the element's insertion point in the DOM.

It is possible to come up with a workaround for elm-ui based on code like this one to detect the user's font size, but I'd rather use the simpler and more robust option of specifying font sizes using rem units.

If you want to see a couple of examples of websites that do this correctly, there's Wikipedia and MDN.

Unfortunately, many popular websites don't respect the user agent's font-size. I don't think that's a good argument against supporting relative units.

PS: I found out archive.org ran their own test and found out that 3% of their users used a non-default font size.

@ricardo-rp
Copy link

Just like @madidier said, it's an accessibility issue. I know many older folk who use larger font-sizes so they can read what's on their phones. I think a way to use rem or just rem as default unit would be very good.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@pravdomil @madidier @ricardo-rp @dullbananas