CSS calc() function not working due to removal of spaces around operators

Omnis Lux

Hi. I am not sure this would be considered a bug or 'by design', but here goes:

I'm in the process of designing my site, and I'm trying to use font scaling on gallery and folder headers. To accomplish this I use the vh and vw units, and I want to use these in conjuction with the calc()-function e.g:

font-size: calc(2vw + 12px);

This works fine in the editor, and the fonts scales as expected (relative to the viewport-size). But as soon as I publish, it stops working. When using the inspector in Chrome, the code shows:

font-size: calc(2vw+12px);

I.e the spaces around the '+' -operator has been removed by SmugMug, and therefore the syntax does not comply with the CSS3 specification (The spaces are neccesary to differentiate between operators and signed numbers). Chrome reports a 'Invalid property value' and ignores the code.

Any clue on how I can circumvent this, and still use calc() with + and - operators...?

leftquark

I believe if you use a double negative, it should work:

font-size: calc(2vw - -12px)

Omnis Lux

leftquark wrote: »

I believe if you use a double negative, it should work:

font-size: calc(2vw - -12px)

Thank you, leftquark! That was exactly what I was looking for [emoji106] . Hikin'Mike found out that white-space was not removed in the theme site-wide CSS, and I was just in the process of moving some of the code over. Glad i dont have to now [emoji1]

Omnis Lux

Whoops! Sorry leftquark, I was a little quick there! it didn't work afterall, same result

Any chances of SmugMug stops removing white-spaces in CSS content-blocks, or at least inside of calc() parentheses...?

leftquark

Omnis Lux wrote: »

Any chances of SmugMug stops removing white-spaces in CSS content-blocks, or at least inside of calc() parentheses...?

I'll double check with Engineering on the double-negative, since it was their suggestion. While I'd love to have a quick solution for you, it looks like using the theme site-wide CSS may be your best bet going forward.

Omnis Lux

leftquark wrote: »

I'll double check with Engineering on the double-negative, since it was their suggestion. While I'd love to have a quick solution for you, it looks like using the theme site-wide CSS may be your best bet going forward.

Thank you, leftquark. I hope there can be a solution to this other than moving the code site-wide, as that reallly wont be very elegant...

leftquark

Omnis Lux wrote: »

Whoops! Sorry leftquark, I was a little quick there! it didn't work afterall, same result

I had one of our QA folks give this a whirl and it looks like the double negative should work. Here's an example using the double negative.

Using this code in a "CSS Content Block":

p {font-size: calc(2vw - -12px);}

Omnis Lux

leftquark wrote: »

I had one of our QA folks give this a whirl and it looks like the double negative should work. Here's an example using the double negative.

Using this code in a "CSS Content Block":

p {font-size: calc(2vw - -12px);}

I got i t to work - I had mistyped it ( {font-size: calc(2vw - - 12px);} )
Now it comes out correct, with spaces around the operator. Thank you so much for your time, leftquark!