Learn how to easily adjust the line height of an ACE editor instance.

How to change the line height in ACE Editor

Recently a user of my Pocket Editor App for Android reported an issue related to the line height of the editor, which seemed to cut some characters on his device. After testing and researching for a while, the best solution I came up with was to allow the user to define the line height of the editor manually so depending on his needs, the line height could be greater or lesser to adjust the editor for the device resolution.

In Ace editor this should be done automatically when you adjust the font size, however as mentioned in some mobile devices it doesn't work as expected by the user. To solve this, you may simply adjust the CSS property line-height of the container element of ACE editor (the initialization container), for example if you want to do adjust it dynamically with JavaScript (adjusting the CSS property):

<!-- Ace Editor Container -->
<div id="editor"></div>

<script>
    // 1. Initialize Editor
    let editor = ace.edit("editor");
    
    // 2. Set the Line Height of the Container
    editor.container.style.lineHeight = "2em";
    // You may use the CSS unit you want to adjust the line height e.g.:
    // editor.container.style.lineHeight = "36px";

    // 3. Force Update of the Font Size 
    editor.renderer.updateFontSize();
</script>

Alternatively you may specify the line height with plain CSS:

<style>
    #editor{
        line-height: 2em;
        /* You may use the CSS unit you want to adjust the line height e.g.:*/
        /* line-height: 36px; */
    }
</style>

<!-- Ace Editor Container -->
<div id="editor"></div>

Happy coding ❤️!


Interested in programming since he was 14 years old, Carlos is a self-taught programmer and founder and author of most of the articles at Our Code World.

Become a more social person

Sponsors