search

christopherdro / react-native-print

Print documents using React Native
MIT License
335 stars 142 forks source link

Android: Fix inconsistent CSS font sizes based on device font size settings. #217

Open shanebrowncs opened 5 months ago

shanebrowncs commented 5 months ago

Hi!

I recently ran into an issue where users were reporting differing print sizes for the text included in exported reports from my app. Upon investigating I found out that when users have a different font-size set within the android settings, that it affects the CSS font sizes displayed in the printed document.

I set up a basic print with the following contents:

await RNPrint.print({
  html: '<html><body><h1 style="font-size: 20pt;">Hello world</body></html>',
});

Small system font:

Large system font:

The same markup and CSS is being used for both examples. I found this has to do with the default "text zoom" of the WebView. It is automatically set according to the system font settings. I added a test print Log.i("RNPrint", "TEXT ZOOM LEVEL" + webView.getSettings().getTextZoom()); after the WebView is created, which yields the following when changing font sizes and viewing logcat:

04-28 12:47:21.770 22002 22002 I RNPrint : TEXT ZOOM LEVEL: 100
04-28 12:48:25.260 22839 22839 I RNPrint : TEXT ZOOM LEVEL: 200

To fix this I added an explicit call to setTextZoom with a value of 100 (one hundred percent) which will help ensure that regardless of the user's system font settings the size of text on printed documents remains consistent.

If you could please let me know if you are open to merging this PR, have questions, or would like to see further changes, I would greatly appreciate it.

Thank you!