TinyMCE - controlling font size of deployed text (font-size using EM)

Issue

I am using TinyMCE for content management in a website, that I develop. Meaning my client can input formatted text using TinyMCE editor and the website then outputs the html to appropriate place on the website.

I would like the same text to be placed at 2 different location with different base font sizes, so I cannot use absolute units in TinyMCE, because it would not adapt to the destination. In another words, I want my client to be in control of the relative sizing inside the text and I want to be in control of the overall font-size.

At first glance, this should be easily solvable by using em as units in TinyMCE. But it is not (that easy).

It would work on the destination end, where it would scale based on the parent element's size, that is alright. But TinyMCE nests elements as well, so suddenly when you start using em as unit for font size, you go from intuitive absolute scale (as known from Word and pt units) to relative scale which is not used in editors at all and is pretty unintuitive for the user.

Example: If I give my client 2 font sizes in TinyMCE - 1em and 2em (instead of 16px and 32px). User applies 2em to a text in TinyMCE, then selects a subpart of that text, that he would like to revert to the original size... he cannot use the intuitive 1em option, because as I said, TinyMCE nests elements and therefore 1em of the 2em parent is still "2em".

Using rem would solve this but it would introduce the problem of the size being dependent on html and not the direct parent element.

I have a few ideas how to approach this, but none are ideal. Any ideas?

Solution

It was solved using css custom properties. Basically every element of the html submited via TinyMCE was assigned with

* {
   font-size: calc(var(--base-font-size, 1rem) * 1);
}

Elements that user chose to be different font size were assigned the same rule but instead of 1, there was 1.2, 1.4 etc. - simply multiple of the size.

The root element of the html (TinyMCE editor and destinations, where the text was used) have the --base-font-size set to any size you want and the custom html inside will adjust accordingly.

Answered By - Lukáš Řádek