HTML signature font 8px and 10px issue

[devk0st]

Hello, guys.

When I edit the caption and paste the HTML, it looks just right. It comes to the same jmail is also normal, but in the snapmail letters it is distorted, html tags are lost and are not displayed correctly. Screenshots attached below.

screen 1
screen 2

Perhaps there is a quick solution? If there is, give the code and where to fix it, I will do it, I really need to fix this bug quickly

[the-djmaze]

Can you post the HTML source here?

[devk0st]

@the-djmaze
https://codepen.io/deviceh/pen/yLjbZrz

this is just a visual bug, because letters with a normal signature reach. But we really need to fix this, the boss is indignant

[the-djmaze]

There is a lot of CSS in there.
For example the H1 uses font-size and line-height.
This is an issue as SnappyMail removes the font-size.

Your line-height is not relative to the font (em for example) and that is why the text is messed up.

There are good examples online what can be used in email and what not (because of certain mail apps).
The most important are Outlook (MSWord rendering, ouch!) and gmail and office365.

Start with https://www.caniemail.com/

[the-djmaze]

Here is where the font-size < 11 happens

snappymail/dev/Common/Html.js

Lines 535 to 537 in 2adccdb

	if (11 > pInt(oStyle.fontSize)) {
	oStyle.removeProperty('font-size');
	}

[devk0st]

@the-djmaze
Is your email client powered by Rainloop? Then the question is, why is everything displayed correctly on it?

[devk0st]

@the-djmaze
Everything is also correct, when users receive a letter from us, it is in the form that is in screenshot 1. But when it is displayed, it breaks it into an incomprehensible code, does not pull up tags, and a visual bug is obtained

[the-djmaze]

Everything is also correct, when users receive a letter from us

Yes and no, it depends who you ask and which mail app they use.

I also explained that SnappyMail removes font-size < 11 (not the best approach, but it mostly works).
Why? Well, iOS minimum is 11px.

Your problem is the use of pt. PT is not a screen rendering unit, it is for printing.
Each browser decides what PT will be on a screen, as each screen has a different DPI.
That's why CSS has units as PX, EM, REM, etc. (pixel is not related to screen due to things like retina and a pixel could be 2 screen pixels).

Looking at your code example, your 10pt font-size conflicts with @media screen and that is why SnappyMail removed it on view.

I could remove the above code for font-size and just keep it at you wish.
But it will not fix the CSS mistakes for each mail app or screen (although you might see it almost correctly).

In the past i worked somewhere where they generated signature with Outlook/Word HTML.
I had to fix that HTML to get my signature properly working in Thunderbird, iMail, Kmail, iOS, Linux, Windows, dark-mode, etc. etc. because they even forced a Windows office font that is not available on other operating systems.

To see what i mean, open your codepen in a mobile browser and try to read it ;)

So please fix your HTML signature gibberish.
i will remove the font-size restriction ;)