Как использовать зажим CSS для настройки размера шрифта, сохраняя при этом его выравнивание по бумаге, например сетке CS ⇐ CSS

[Anonymous]

I have been trying to make a responsive text section which has a paper like horizontal line grid and the text aligned properly on the grid.

I can achieve that if font size is not changing. I am wondering if this possible to do with plain css only or do I need to use JavaScript.

I am attaching two codepen where one is showing desired output with a fixed font size while other is showing a way to achieve the same effect with clamp css property. I have got something but it doesn't always align to the grid.

The code snippet below is what I have in the codepen which is trying to achieve the grid alignment while using css grid -

:root{ --fs:clamp(2rem, 4vw , 5rem); } .paper{ position: relative; } .paper h2 { font-size:var(--fs); line-height:calc(var(--fs) + 0.05rem); } .paper:after { content:''; position:absolute; overflow:hidden; top:calc(-2*var(--fs) - 0.65rem); left:-10%; width:120%; height: 170%; z-index:-1; background-image: repeating-linear-gradient( transparent 0rem, transparent calc(var(--fs) + 0.1rem), rgba(0,0,0,0.2) calc(var(--fs) + 0.2rem) ); } CodePen with Fixed font size

CodePen with Clamp CSS

Is there a better approach to get the same effect? CSS way or javascript way?


Источник: https://stackoverflow.com/questions/781 ... -paper-lik