Style issues

[jiang0112]

When applying the CSS styles with double underscores, specifically text-decoration-line: underline;, text-decoration-style: double;, and text-decoration-style: under;, the two lines appear to merge into one.The documentation indeed supports these properties.

bug

code.txt

[depth42]

Just some thoughts: The mentioned problem does only seem to occur with Chrome not with Safari. However, I have been using Vivliostyle in a WKWebView on iOS, which is basically a Safari view inside an app. With it, I have been paginating HTML documents and converted them to PDFs. In this process, there are a lot of rounding / pixel-snapping errors with text underlines similar to the reported issue. The only way I could find to work around them is to blow up the scaling in Vivliostyle to 400% and to then scale the PDFs back down. It seems like the Chrome and Safari engines don't have a very precise model for underlines.

[MurakamiShinyu]

I investigated this issue and found that the problem is caused by Chrome (Chromium)'s rendering of text-decoration-style: double where the distance of the two lines depends on the device pixel size (= 1px / window.devicePixelRatio) which is equal to the minimum border line width. Current Vivliostyle.js implementation uses a hack emulating very high pixel ratio to enable very thin border width on PDF output. See:

• feat: Enable very thin border width on PDF output #1079

The output pixel ratio is configurable by setting pixelRatio=<number> in Vivliostyle Viewer options, or in the CoreViewerOptions. The default setting is pixelRatio=8, which means that the minimum border width is 1/8 px = 0.125px (about 0.09pt, or 0.033mm).

As a result, the distance of the two lines of double underline becomes 1/8 px = 0.125px, which is too small and the gap is almost invisible.

Possible workarounds will be:

• specify pixelRatio=0 to disable the high pixel ratio emulation and use the default browser rendering
  • test
• or, use border-bottom-style: double instead of text-decoration-style: double

[jiang0112]

Thanks for your reply, the problem is solved