fluid-type-scale-calculator icon indicating copy to clipboard operation
fluid-type-scale-calculator copied to clipboard

Support container queries

Open AleksandrHovhannisyan opened this issue 2 years ago • 2 comments

Description/user story

Concept: https://www.robinrendle.com/notes/container-queries-and-typography/

  • [ ] Add a new parameter to the schema to opt into using cqw over vw
  • [ ] Update existing code to use cqw if that parameter is set
  • [ ] Update existing references to "screen" or "viewport" width as needed in form labels
  • [ ] Update fallback label to mention feature queries, if relevant
  • [ ] Test for cqw support with feature queries if user opts in

AleksandrHovhannisyan avatar Feb 09 '23 16:02 AleksandrHovhannisyan

It would be better if the font size was calculated using a linear function in my opinion. For example: If the width of the container is 14rem then the font size should be 1rem. If the container is 60rem wide, then the font size should be 1.25rem. Then you could calculate a linear function using the two points (14/1) and (60/1.25) and the font size should then change depending on the width of the container and the font size set by the user in the browser. What do you say to this?

For example:

p { font-size: calc((100cqi/280) + 17px) / 16 * 1rem; }

Anunnaki26 avatar Mar 02 '23 14:03 Anunnaki26

@Wahrheit26 To clarify, my proposal would still use linear interpolation, but instead of it being between two screen widths, it would just be between two container widths, and instead of vw we would use cqw (or cqi).

AleksandrHovhannisyan avatar Mar 02 '23 15:03 AleksandrHovhannisyan

Shipped in #52

AleksandrHovhannisyan avatar Mar 21 '24 23:03 AleksandrHovhannisyan