Where does 'font-size: 13.333333969116211px' come from?

Question

We use CKEditor in our application for letting users edit certain e-mail templates, but for some reason, many of these templates end up with p - and span -tags with annoying text styles:

<p style="font-size: 13.333333969116211px;">

Or with line-height:

<span style="font-size: 13.333333969116211px; line-height: 1.231em;">

Our customers complain that their e-mails come out with weird text styles and make very clear that they did not manually add those styles (which makes sense).

The strange thing is: once we save the template ourselves using the same editor, those weird styles disappear from the source HTML (in the database). Then after a while, all those styles slip back in there - presumably when customers (re)use our editor.

We decided to Google that exact string, font-size: 13.333333969116211px , and - to our surprise - found 80.000 completely unrelated results . The font-size value is obviously created by some sort of calculation (100 / 7.5), but I have no clue where to look.

Does anyone know where these strings originate from and how we get rid of them?

Answer 1

These ugly <span> tags and even uglier inline styles are created by the native implementation of backspace / delete in Blink and Webkit based browsers. They can also appear when copying and pasting content or drag and dropping.

Nearly two years ago I reported the problems with backspace and delete here:

• https://code.google.com/p/chromium/issues/detail?id=226941
• https://bugs.webkit.org/show_bug.cgi?id=114791

We believed that with support from the users that we had (I don't know anyone who likes the current behaviour), we will be able to convince browser vendors to change this behaviour (which by them may unfortunately be expected). So we waited, I believe one year, but we didn't even got an answer whether this is an expected behaviour and whether there's any chance to have it fixed some day.

Therefore, in CKEditor 4.4.1 and 4.4.2 we shipped patches for most common problems with backspace and delete . Also, CKEditor handles copy and paste in a custom way, so if the Advanced Content Filter is enabled, then most of the crappy HTML mess will be filtered out.

The remaining piece is a custom handling for drag and drop which we are working on in CKEditor 4.5.0 . It will be released at the beginning of 2015.