quill 🚀 - Line Spacing | bleepingcoder.com

You can specify this style with addStyles ex.

quill.addStyles({
  'div': { 'line-height': '24px' }
});

jhchen on 20 Aug 2014

it's not working for me:/

RavidGolan on 29 Nov 2015

It should now be:

quill.theme.addStyles({
  'div': { 'line-height': '24px' }
});

jhchen on 29 Nov 2015

The html does change.. i would like to save my html and open it later..
i tried:
quill.theme.addStyles({
'div': { 'line-height': '24px' }
});
var html = quill.getHTML();
$('#myHtml').val(html); // does not contains line-height
how can i change it? i would like to change the line-height

RavidGolan on 1 Dec 2015

This API does not change the editor's HTML

jhchen on 1 Dec 2015

it seems like the latest version dose not exist the addStyle api. I can not setup the line height style.

Jiiun on 31 May 2017

👍1

@Jiiun addStyle isn't required anymore. You can override the line-height or any other style with CSS.

.ql-editor {
    line-height: 1.42;
}

benbro on 31 May 2017

@benbro thanks for your replying. how can i set line-height in each line just like below

Jiiun on 31 May 2017

@Jiiun you need to create a custom attributor and a custom toolbar button.
You can use the direction attributor as an example.
https://quilljs.com/guides/how-to-customize-quill/#content-and-formatting
If you have further questions please use StackOverflow. github issues are for bugs.

benbro on 31 May 2017

thank you very much~

Jiiun on 31 May 2017

haha! I fixed it

Jiiun on 5 Jun 2017

👍3 😕2

@benbro whatever I try nothing works and I've spent a couple of hours on this already. Everything looks fine but it is always received in Outlook or GMail with large line-spacing (see pic below).

   -webkit-margin-after: 1em;
   -webkit-margin-before: 1em;

seem to be the culprits but I set them in the css but no luck.
Is the way around this to add inline styles & if so, is it easy to add them?

Is it a Quill issue or has anyone else come across this one? Any help much appreciated.

.ql-editor  {
   line-height: 1.20 !important;
   font-family: Calibri, Helvetica !important;
   font-size: 15px !important;
   -webkit-margin-after:0px;
   -webkit-margin-before:0px;
}
.ql-editor p {    line-height: 1.2;}

tomcon on 4 Jul 2017

@tomcon This issue is old and unrelated to your question.
Quill uses classes by default. To make the output work in email you need to use inline styles instead.
Read this guide about using inline style attributes.

benbro on 4 Jul 2017

@benbro
with respect: "Does quill have customizable line spacing ability?" is completely related to my question.

I've read the guide quite a bit in the past and again just now but it is not very clear on this topic plus I am using ES5 and all examples are ES6.

Can anyone help with an example please of how to simply add a default line-height inline rule to all paragraph tags? This has cropped up late in our project and we didn't think we'd hit this problem so any help would be much appreciated (don't want to have to so a search and replace type-exercise post edit).
Thanks

tomcon on 4 Jul 2017

For anyone else that may come here with a similar problem:
best short term solution was to replace < p > with < br > and removing < /p > on editor save (adding inline-styles still had issues).

tomcon on 5 Jul 2017

@Jiiun 你好，我想问下，你的行高功能具体是怎么实现的？
toolbar里如何定义?

xiechao1211 on 30 Jul 2017

😄1

Set line-height is not real LineSpacing; It is not like MSoffice word's it

Malenconiaprincep on 20 Dec 2017

haha! I fixed it
still does not work

miracle9312 on 19 Sep 2018

@tomcon This issue is old and unrelated to your question.
Quill uses classes by default. To make the output work in email you need to use inline styles instead.
Read this guide about using inline style attributes.
``` import Parchment from 'parchment';
import _Quill from 'quill';
import { sizeWhiteList, alignWhiteList } from './formats'
const Quill = window.Quill || _Quill;
let config = {
scope: Parchment.Scope.INLINE,
whitelist: ['1.0em','1.1em','1.2em','1.3em','1.4em','1.5em','1.6em']
}
var lineHtStyle = new Parchment.Attributor.Style('lineheight','line-height', config);

Quill.register(lineHtStyle, true);```

i want to set custom lineheight, but it dose not work

miracle9312 on 19 Sep 2018

👍1

Hi,
this @Jiiun codes its working, but you need to create a css too.

this is my js code:

var Parchment = Quill.import('parchment');
    var lineHeightConfig = {
      scope: Parchment.Scope.INLINE,
      whitelist: [
        '1.0',
        '1.2',
        '1.5',
        '1.6',
        '1.8',
        '2.0',
        '2.4',
        '2.8',
        '3.0',
        '4.0',
        '5.0'
      ]
    };
    var lineHeightClass = new Parchment.Attributor.Class('lineheight', 'ql-line-height', lineHeightConfig);
    var lineHeightStyle = new Parchment.Attributor.Style('lineheight', 'line-height', lineHeightConfig);
    Parchment.register(lineHeightClass);
    Parchment.register(lineHeightStyle);

And my css:

.ql-snow .ql-picker.ql-lineheight{
  width: 58px;
}

.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.0']::before {content: '1.0';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1.0']::before {content: '1.0' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.2']::before {content: '1.2';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1.2']::before {content: '1.2' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.5']::before {content: '1.5';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1.5']::before {content: '1.5' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.6']::before {content: '1.6';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1.6']::before {content: '1.6' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.8']::before {content: '1.8';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1.8']::before {content: '1.8' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2.0']::before {content: '2.0';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='2.0']::before {content: '2.0' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2.4']::before {content: '2.4';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='2.4']::before {content: '2.4' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2.8']::before {content: '2.8';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='2.8']::before {content: '2.8' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='3.0']::before {content: '3.0';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='3.0']::before {content: '3.0' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='4.0']::before {content: '4.0';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='4.0']::before {content: '4.0' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='5.0']::before {content: '5.0';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='5.0']::before {content: '5.0' !important;}

clpacheco90 on 19 Sep 2018

👍1

Hi,
this @Jiiun codes its working, but you need to create a css too.

this is my js code:

var Parchment = Quill.import('parchment');
    var lineHeightConfig = {
      scope: Parchment.Scope.INLINE,
      whitelist: [
        '1.0',
        '1.2',
        '1.5',
        '1.6',
        '1.8',
        '2.0',
        '2.4',
        '2.8',
        '3.0',
        '4.0',
        '5.0'
      ]
    };
    var lineHeightClass = new Parchment.Attributor.Class('lineheight', 'ql-line-height', lineHeightConfig);
    var lineHeightStyle = new Parchment.Attributor.Style('lineheight', 'line-height', lineHeightConfig);
    Parchment.register(lineHeightClass);
    Parchment.register(lineHeightStyle);

And my css:

.ql-snow .ql-picker.ql-lineheight{
  width: 58px;
}

.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.0']::before {content: '1.0';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1.0']::before {content: '1.0' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.2']::before {content: '1.2';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1.2']::before {content: '1.2' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.5']::before {content: '1.5';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1.5']::before {content: '1.5' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.6']::before {content: '1.6';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1.6']::before {content: '1.6' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.8']::before {content: '1.8';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1.8']::before {content: '1.8' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2.0']::before {content: '2.0';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='2.0']::before {content: '2.0' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2.4']::before {content: '2.4';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='2.4']::before {content: '2.4' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2.8']::before {content: '2.8';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='2.8']::before {content: '2.8' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='3.0']::before {content: '3.0';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='3.0']::before {content: '3.0' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='4.0']::before {content: '4.0';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='4.0']::before {content: '4.0' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='5.0']::before {content: '5.0';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='5.0']::before {content: '5.0' !important;}

it works!!! thank you very much

miracle9312 on 25 Sep 2018

👍1

Hi,
this @Jiiun codes its working, but you need to create a css too.

this is my js code:

var Parchment = Quill.import('parchment');
    var lineHeightConfig = {
      scope: Parchment.Scope.INLINE,
      whitelist: [
        '1.0',
        '1.2',
        '1.5',
        '1.6',
        '1.8',
        '2.0',
        '2.4',
        '2.8',
        '3.0',
        '4.0',
        '5.0'
      ]
    };
    var lineHeightClass = new Parchment.Attributor.Class('lineheight', 'ql-line-height', lineHeightConfig);
    var lineHeightStyle = new Parchment.Attributor.Style('lineheight', 'line-height', lineHeightConfig);
    Parchment.register(lineHeightClass);
    Parchment.register(lineHeightStyle);

And my css:

.ql-snow .ql-picker.ql-lineheight{
  width: 58px;
}

.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.0']::before {content: '1.0';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1.0']::before {content: '1.0' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.2']::before {content: '1.2';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1.2']::before {content: '1.2' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.5']::before {content: '1.5';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1.5']::before {content: '1.5' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.6']::before {content: '1.6';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1.6']::before {content: '1.6' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.8']::before {content: '1.8';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='1.8']::before {content: '1.8' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2.0']::before {content: '2.0';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='2.0']::before {content: '2.0' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2.4']::before {content: '2.4';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='2.4']::before {content: '2.4' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2.8']::before {content: '2.8';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='2.8']::before {content: '2.8' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='3.0']::before {content: '3.0';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='3.0']::before {content: '3.0' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='4.0']::before {content: '4.0';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='4.0']::before {content: '4.0' !important;}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='5.0']::before {content: '5.0';}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value='5.0']::before {content: '5.0' !important;}

Can you explain how to force quill create correct deltas for "lineheight" attribute?
In my case it is always empty. Looks like:
"{\"ops\":[{\"attributes\":{\"lineheight\":\"\"},\"insert\":\"line 1\"},{\"insert\":\"\\n\"},{\"attributes\":{\"lineheight\":\"\"},\"insert\":\"line 2\"},{\"insert\":\"\\n\"}]}"

Please, note, that value of {\"lineheight\":\"\"} is empty.
P.S. in Quill editor itself in html it works, I mean I can visually see the spacing between lines. The issue is only in quill deltas

enterpub on 10 May 2019

@enterpub,
I never used Delta before but if it still does not work try to get value by css and then insert to your Delta JSON.

clpacheco90 on 13 May 2019

Quill: Line Spacing

Most helpful comment

All 23 comments

Related issues