Ace Editor on Android: Gutter & Content-Space Line Text Misalignment Cause

[aminiqbal]

Hi,

On Android devices, the WebView component will by default host the editor such that the text within the gutter and content-space will be vertically misalinged, specifically, the text within the content-space of ace will not be vertically centered.

This seems to be the case in most recent build of popular Android editor app ACode as well.

The issue seems to manifest when the Android device font size is set to be very small.

I came across an old repo post where it was suggested that this was due to the way the Ace mobile textarea handled new lines and scrolling management, but after much tinkering, the issue was found to be on the Android side. This is why the Mozilla GeckoView will render Ace just fine.
As for the the local render client WebView component, we must invoke this method explicitly from Android Java/ Kotlin code portion, which will fix the issue.

aceWebView.getSettings().setTextZoom(100);

This will also enable us to set the ace editor font to something ridiculously small like 2 to 4 pt - the host WebView will scale accordingly to device dimensions, and Ace is back to being elegant.

Perhaps this might be useful to document because this is not an Ace issue, and will prevent future bug-reports.
I also spent an embarrasingly long time trying to figure this out, so it might help some folks as well.

Thank you.

1. Before
   
2. After