W3C home > Mailing lists > Public > www-style@w3.org > April 2014

`pem` (parent em) unit proposal

From: Philip Walton <philip@philipwalton.com>
Date: Mon, 28 Apr 2014 12:00:57 -0700
Message-ID: <CAGRhNhU=m4OTForA6Dm2w3hRvfMs4C7rTBEGRBzryL1iAjkWPw@mail.gmail.com>
To: www-style list <www-style@w3.org>
Please let me know if this has been discussed before (I couldn't find
anything on it, though it's admittedly a hard thing to search for).

Perhaps the most common use case for the `rem` unit is when you need to
specify a size on multiple elements whose font-size properties are
different. Here's a classic example:

```
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem;
}
```

This is nice, but I typically avoid declarations like this because they
don't cascade. It's the same problem we currently have with pixels.

What would be nice is a unit that would work in the above code example that
does cascade. And I think the obvious solution would be something like
`pem`, which would stand for "parent em" i.e. the computed font-size of the
parent element.

This would solve weird calculation issues like the following where you have
do padding math because you've adjusted the element's font-size.

```
.module {
  font-size: 0.9em;
  padding: 1.111em; /* or perhaps `calc(1em / 0.9)` */
}
```

Rewritten with `pem` it would simply be:

```
.module {
  font-size: 0.9em;
  padding: 1pem;
}
```

Modular CSS is very common these days, and it's nice to have modules that
can easily change size based on their context. With `rem` that's not
possible, and with `em` you need to do a lot of calculations. `pem` seems
to be the best of both worlds.

(note, for the font-size property, I suppose `em` and `pem` would do the
same thing)

This type of thing is somewhat possible today with custom properties scoped
to a module, but I think a native unit would be more user friendly as well
as more versatile.

Thoughts?
Received on Monday, 28 April 2014 19:01:24 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:21 UTC