toptensoftware / RichTextKit

Rich text rendering for SkiaSharp
Other
366 stars 73 forks source link

Font sizing #13

Closed Jonesie closed 4 years ago

Jonesie commented 4 years ago

A trickier problem this time. We use FabricJS on the front end designer and SkiaSharp on the back end to print documents. Getting the two things to match is always a challenge. Generating a PDF using SkiaSharp and RichTextKit produces different results to the same thing created in MS Word also.

Eg. A sample front end design like this: image

generates a PDF like this:

image

(the rectangles in these images actually are the same size and are correct when printed - it's just the scaling of these screen shots that dont match).

The font is Arial 10 pt. Im assuming that RichTextKit Font Sizes are pixels and there are 72 points per inch and a PDF is 72 DPI so 10 pt is 10 pixels. However, the character width seems narrower, especially compared to the Word version (sorry, dont have an image of that).

I guess my question is, how realistic is it to expect to get identical/consistent results? I think I'd be happy to get a close match between FabricJS and RichTextKit / SkiaSharp so maybe Ive just answered my own question. :)

toptensoftware commented 4 years ago

You're really pushing your luck trying to get these to match exactly, but really this is outside the scope of RichTextKit. RichTextKit uses HarfBuzz for font shaping and the logic for the actual placement of characters all lives over there so really this question for them.

The only real decisions RichTextKit makes in this regard is at which character positions to insert word breaks. For this it uses a port of this implementation of the Unicode Word Break algorithm which passes most, not quite all unit tests.

In most comparisons I've found things don't match well with Word - it seems to do its own thing and often I think less desirable results than other layout engines. In comparing to Chrome, RichTextKit seems to match very closely - which makes sense since I believe it uses HarfBuzz too.

Aside from the font shaping there are a few minor decisions that the layout engine can make that might be different. For example, RichTextKit aligns characters differently within the character cell when using letter spacing. Usually the space is added to the right of the letter, but RichTextKit uses the paragraph alignment to align the characters within the cell. (I had to do this for my son's game where centered letter spaced runs need to be centered, not slightly to the left).

Jonesie commented 4 years ago

Thanks for the answer. I was really just looking for some sympathy :) Ive got it looking pretty close now - I had the wrong size on my rectangle so once I fixed that the word breaks match.