Em And Rem's

Photoshop UXP Plugin API
1

As I am trundling through learning more of CSS I have a question regarding em and rem when designing a UXP Plugin for Photoshop.

//HTML
<div class = "flex-container">
  <div class="button">OK</div>
</div>

//CSS

.flex-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

.button{
    background-color: #000;
    font-size: 1.25em;
}

My understanding is that em will take the value of the parent so in the above code, what is the font size for the button. It is 1.25em of what ?

1 Like
2

Hi @IanBarber ,

If there is no “explicitly specified” font size in any parent, it will be based on the default font size.

You can imagine that if you didn’t specify any font-size for that button, it would still have some “implicit” font size (I don’t know about the specific defaults in Photoshop). So, in this case, it will be 1.25 * [original font size].

Due to the cascading nature of CSS, children already (unless otherwise specified or for specific elements) inherit their parent’s font size. I find it easiest to imagine em to be “a factor of how it would have been without that statement”…

So, to get back to your example: 1.25 em just makes it 1.25 times larger than it would be without that statement. This base value, however, to my knowledge, depends on the UI scale settings in Photoshop. If, for example, the button would have had a default font size of 14px, it would now be 17.5px (1.25 * 14px).

If .flex-container had specified an explicit font size (e.g., 24px), and this gets inherited by the .button element, 1.25em would, again, mean 1.25 times the size it would have been without that statement, i.e., 1.25 * 24px = 30px.

I hope this helps,
Best,
Pablo

3

Thanks Pablo that explains it very well. As for the Photoshop default font-size, I am not 100% but I think its 13px.

So now I have a better understanding of em, my understanding of rem is that regardless of what’s set in the parent, it will always calculate its size based on whats set in the root.

In my CSS I have this

:root{
--uxp-host-font-size: 13px;
}

So I would have thought that if I put, then the button size would be 1.25 x whats in the :root. Is this correct.

.button{
    background-color: #000;
    font-size: 1.25em;
}
4

You can’t change the default text size by overriding the --uxp-host-font-size variable – this is just a convenience variable you can use to try and match with the rest of the Ps UI.

UXP’s initial font size is 10px (meaning 1.25 em is 12.5px). You can change the font-size in the root this way:

:root {
  font-size: 13px;
}

Note:

Best I can tell is that 1rem in UXP in Photoshop is based on 16px instead of the default 10px (which is defined in the user agent’s style sheet).

I’m not sure why; I don’t see an obvious reason in the underlying code. So rem is a bit buggy.

5

Don’t know how it works in Ps, but em as mentioned takes font-size of the parent, ant rem - always from the document root (usually it’s html)