Using CSS clamp retrospectively

[Andrew Poulos]

I've been experimenting with the CSS function clamp(). After a few false
starts I'm won over by how it allows fluid typography.

At a recent meeting I discussed the merits of clamp and I've been asked
to apply clamp in our current project.

The project has: extensive style sheets; JavaScript which does
modification of existing font sizing; and, it accepts pasting in text
(with formatting: size colour, font...).

I suppose I can edit the style sheets, and search through the code and
edit any instance that sets a font size, and finally post process any
pasted text but is there some way that doesn't require me to go through
thousands of line of code one line at a time?

Andrew Poulos

[Julio Di Egidio]

Well, more than the number of lines of code, what matters is how many instance there are that you need to change, and those I suppose you can find with a plain find across files.

- Should you have many in the style sheets and you also have solid criteria for finding and modification, you could automate with a script (could be JS itself in Node): but maybe even just a (one or few) replace across files with regular expressions might do the trick, in which case all you need is an IDE that supports it.

- For the JS code I would expect you'd have to touch very few places, if the code is not just a wild mess: in which case, also for more safety, you may just want to do it by hand.

I'd also suggest you put together a little test plan, the 4-5 test cases to check that all works as expected (not even need to automate it, unless you prefer so).

HTH,

Julio

[Andrew Poulos]

Thanks, you've confirmed for me that there's no simple way to make the
changes ;-)

Andrew Poulos

[Julio Di Egidio]

Sure there is: just pay a professional to do it for you.

When one is too smart not to be a stupid fuck...

*Plonk*

Julio

[Andrew Poulos]

No, you misunderstand. They thought they I could just code something
that could easily do it. The process you've set out is exactly what I
needed to show them that while it is do-able it isn't trivially so.

Andrew Poulos

[Julio Di Egidio]

On Thursday, 26 August 2021 at 00:05:34 UTC+2, Andrew Poulos wrote:
> On 25/08/2021 12:21 pm, Julio Di Egidio wrote:
> > On Wednesday, 25 August 2021 at 00:04:30 UTC+2, Andrew Poulos wrote:
> >> On 25/08/2021 2:32 am, Julio Di Egidio wrote:

<snip>

> >>> automate it, unless you prefer so).
> >>
> >> Thanks, you've confirmed for me that there's no simple way to make
> >> the changes ;-)
> >
> > Sure there is: just pay a professional to do it for you.
> >
> > When one is too smart not to be a stupid fuck...
>
> No, you misunderstand.

No, it's you who can't write sensibly and respectfully. As usual.

> The process you've set out is exactly what I
> needed to show them that while it is do-able it isn't trivially so.

Glad it helped. As usual.

*Plonk*

Julio

[Thomas 'PointedEars' Lahn]

Andrew Poulos wrote:

> The project has: extensive style sheets; JavaScript which does
> modification of existing font sizing; and, it accepts pasting in text
> (with formatting: size colour, font...).
>
> I suppose I can edit the style sheets, and search through the code and
> edit any instance that sets a font size, and finally post process any
> pasted text but is there some way that doesn't require me to go through
> thousands of line of code one line at a time?

The main problem is the initial decision to not use a dynamic stylesheet
language like LESS or SASS to make the font sizes depend on each other, or
at least to be able to change only variable definitions.

So now there is no way other than clever search-and-replace operations in
all stylesheet files using regular expressions.

--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.