Better styles for scissors in HTML output

[tafel]

This PR changes the way scissors are positionned in HTML output.

A new HTML tag is added explicitly for this, and positionning is done regarding this element.

This should close #266

[sprain]

Thank you for the pr!

The vertical scissors are not yet perfectly positioned. Can you see that, too?

[tafel]

I'm a bit sceptical about all this. I see two different problems.

First is pure HTML rendered in the browser. When zoomed, scissors will be positionned differently.

Second is when it's imported into a PDF. To see what happens here, I used Dompdf, but the unicode char is not rendered correctly (just see a ? ) :-(

Can you change the left positionning of scissors so it fits your needs, and give me these numbers, so I can see what it looks like on my side?

[sprain]

Can you change the left positionning of scissors so it fits your needs, and give me these numbers, so I can see what it looks like on my side?

For me, the position should be left:3.1mm instead of left:2.5mm.

I used Dompdf, but the unicode char is not rendered correctly (just see a ? )

I was wondering whether maybe we should use an image instead of a font to display the scissors? But personally I do not really care about Dompdf. It's very edge-casey IMO.

[tafel]

I see in my browser that with your value, positionning is good when I zoom.
My value works well when I don't zoom...

We can move on with what fits your usage (integration in a PDF via a translator HTML>PDF).

I added some styles for width, height, line-height, font-weight, etc. Positionning should be more stable across devices and usages. What does it looks like on your side now?

[sprain]

@tafel
Now, it is a little too far to the right for me – in Safari, Chrome, and Firefox on macOS :)
What browser are you using when you look at it?

[tafel]

Chromium and Firefox on Ubuntu@24

Maybe it's a good thing, because it better matches what I see now :-P

I pushed an update. Could you try and tell me if it looks good?

[sprain]

If you change scissors-down to -0.9mm it would be perfect to me now.
How does it look for you?

[tafel]

with zero zoom:

with 400% zoom:

[sprain]

Good enough, I would say.
I dare to consider Ubuntu users the exception ;)

[tafel]

ooooh ;-) We use your lib inside a docker container, where our app resides. In production, Debian or alpine. Maybe we are all alone in that case, who knows :-P (but we do not use Html renderer)

I tried an other approach, without :after. It's less clean (since horizontal scissors are still inside a pseudo-element) but it will, I hope, behave evenly in all browsers...

[sprain]

🙌 That looks fine to me and now even works with Docraptor. Thanks a lot!