Discussion
Loading...

Post

  • About
  • Code of conduct
  • Privacy
  • Users
  • Instances
  • About Bonfire
Terence Eden
@Edent@mastodon.social  ·  activity timestamp 5 days ago

Please help me out CSS friends.

My container is 660px wide.
I've set the font size to be 10cqi.
There are 10 monospace characters.
Why isn't each of them 66px wide?

Have I misunderstood how container queries work?

#CSS #WebDev #HTML

Screenshot of browser tools showing the resulting mess.
Screenshot of browser tools showing the resulting mess.
Screenshot of browser tools showing the resulting mess.
  • Copy link
  • Flag this post
  • Block
Sebastian Lasse
@sl007@digitalcourage.social replied  ·  activity timestamp 5 days ago

@Edent

font-size is not the same as character-width. monospace just means "same character width", not width = height

check this
https://jsfiddle.net/OPTlMUS/x5qk608a/

E.g. monospace / 66
is a character width of 39.7333px

You would need to adjust either spacing or font-size …
Once I made a pen to measure fonts with canvas. https://codepen.io/sebilasse/pen/gPBQqm

  • Copy link
  • Flag this comment
  • Block
Terence Eden
@Edent@mastodon.social replied  ·  activity timestamp 5 days ago

@sl007 ah! Yeah. Thanks 🙂

  • Copy link
  • Flag this comment
  • Block
Adam Meyer
@apmeyer@vmst.io replied  ·  activity timestamp 5 days ago

@Edent I don’t believe font-size ever dictates character width. It’s more about specifying height.

  • Copy link
  • Flag this comment
  • Block
Duncan Stephen
@duncanstephen@mastodon.social replied  ·  activity timestamp 5 days ago

@Edent Is it because the CSS rule is setting the font size (= font height), but you want it to set the font width?

  • Copy link
  • Flag this comment
  • Block
Terence Eden
@Edent@mastodon.social replied  ·  activity timestamp 5 days ago

@duncanstephen Ah, yeah, that's probably it! D'oh!

  • Copy link
  • Flag this comment
  • Block
Log in

Open Science

We are a network of scientists, developers and organizations building the next generation of digital spaces for open science.

Open Science: About · Code of conduct · Privacy · Users · Instances
Bonfire open science · 1.0.0-rc.3.6 no JS en
Automatic federation enabled
  • Explore
  • About
  • Members
  • Code of Conduct
Home
Login