Line height

The line height feature lets you adjust the vertical spacing between lines of text, controlling how tightly or loosely text is packed within paragraphs. This feature is essential for document formatting, helping users create professional-looking content with proper typography spacing.

# Demo

Select content and change the line height using the toolbar button . Please note that the feature can only be applied to whole blocks of content such as paragraphs, tables or lists.

# Installation

After installing the editor, add the feature to your plugin list and toolbar configuration:

import { ClassicEditor } from 'ckeditor5';
import { LineHeight } from 'ckeditor5-premium-features';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ LineHeight, /* ... */ ],
		toolbar: [ 'lineHeight', /* ... */ ],
		lineHeight: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );

# Activating the feature

To use this premium feature, you need to activate it with proper credentials. Refer to the License key and activation guide for details.

# Configuration

The line height feature provides the following predefined values as options in the dropdown:

• 1
• 1.15
• 'default'
• 2
• 2.5
• 3

While rendering the UI layer, the 'default' option is replaced with a value determined by the editor’s configuration. By default, the line-height value is 1.5, but you can change this by updating the configuration and content styles. The other values are multipliers of the default one.

• Using a CSS variable in the editor’s content styles:

  :root {
      --ck-content-line-height: 1.65;
  }
  

• Setting a default value in the editor configuration:

  lineHeight: {
      defaultValue: 1.65
  }
  

The config.lineHeight.defaultValue should be synchronized with the editor content styles.

# Using the predefined presets

The line height feature defines 2 named presets:

• 'single'
• 'double'

Each size assigns a corresponding class to a block element. For example, the 'double' preset looks as follows in the editor data:

<p class="line-height-double">...</p>

The CSS definition for these classes (presets) must be included in the web page styles where the edited content is rendered.

Here is an example of the line height CSS classes:

.ck-content .line-height-single {
    line-height: 1;
}

.ck-content .line-height-double {
    line-height: 2;
}

An example of an editor that supports more line height sizes:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // ... Other configuration options ...
        lineHeight: {
            options: [
                'single',
                'default',
                'double',
                {
                    title: 'Triple', // A name displayed in the dropdown UI.
                    model: 'triple', // A value used in the command and stored in the model.
                    view: {
                        key: 'class',
                        value: 'line-height-triple'
                    }
                }
            ]
        },
        toolbar: [
            'heading', 'bulletedList', 'numberedList', 'lineHeight', 'undo', 'redo'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

.ck-content .line-height-triple {
    line-height: 3;
}

# Using numerical values

The line height feature also supports numerical values.

In this case, each size adds the style attribute to the block element, which sets the line-height CSS property. For example, a line height of 2 will be represented in the editor data as:

<p style="line-height: 2">...</p>

Here is an example of a WYSIWYG editor that supports numerical line heights. Note that 'default' (1.5) is controlled by the default styles of the web page:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // ... Other configuration options ...
        lineHeight: {
            options: [
                0.5,
                1,
                'default', // This will be replaced with the default value (1.5).
                1.65,
                2,
                2.5,
                3
            ]
        },
        toolbar: [
            'heading', 'bulletedList', 'numberedList', 'lineHeight', 'undo', 'redo'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# Accepting all line-height values

By default, all line-height values that are not specified in the config.lineHeight.options are stripped. You can enable support for all line heights by using the config.lineHeight.supportAllValues option.

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // ... Other configuration options ...
        lineHeight: {
            options: [
                // Numerical values.
                // ...
            ],
            supportAllValues: true
        },
        // More of editor's configuration.
        // ...
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# Related features

Check out also these CKEditor 5 features to gain better control over your content style and format:

• Font styles – Easily and efficiently control the font family, size, text or background color.
• Text alignment – Because it does matter whether the content is left, right, centered, or justified.
• Block indentation – Organize your content into visually separated blocks, indent crucial paragraphs, etc.
• Remove format – Easily clean basic text formatting.

# Common API

The LineHeight plugin registers:

• The 'lineHeight' dropdown.

• The 'lineHeight' command.

  The number of options and their names correspond to the config.lineHeight.options configuration option.

  You can change the line height of the current selection by executing the command with a desired value:

  // For numerical values:
  editor.execute( 'lineHeight', { value: 2 } );
  
  // For named presets:
  editor.execute( 'lineHeight', { value: 'double' } );
  

  Passing an empty value will remove any config.lineHeight set:

  editor.execute( 'lineHeight' );