Line Height is not calculating based on font size.

[ritheshSalyan]

when we have a large font size line-height has some problem.

[singerdmx]

Oh true if you have custom style

[singerdmx]

I think a good solution is to allow passing both custom style and its corresponding line height.
The change should be easy. I can point you where the code is after you finish the other issue.

[ritheshSalyan]

this was from your example. i just added following line for that

 QuillEditor(
    //Rest of parameter 
   sizeHuge: TextStyle(fontSize:64.0)
)

[singerdmx]

Our current code does not support passing line height yet. Also line height should be optional.

[singerdmx]

Currently in a block each line is given the same height. Huge size is an attribute of text span.
What is your expectation? Do you want the line containing Huge size to have a different height?

[ritheshSalyan]

yes. line-height should be equal to the biggest element in that line. as shown below

[singerdmx]

Ok this is more complicated than I thought.
We can further discuss this after finishing the first issue.

[ritheshSalyan]

Flutters default rich text rendering has this.

[singerdmx]

One TextLine can contain multiple TextSpan and one of the TextSpan may have sizeHuge

[singerdmx]

Currently we use RichText for the whole TextLine.
Your need is asking it to be rendered per TextSpan.
Basically every TextSpan is one RichText

[ritheshSalyan]

yes.

[ArjanAswal]

this was from your example. i just added following line for that

 QuillEditor(
    //Rest of parameter 
   sizeHuge: TextStyle(fontSize:64.0)
)

@ritheshSalyan I don't think there is a sizeHuge parameter anywhere in QuillEditor. Are you talking about H1?
In that case, you can pass custom line height.

[singerdmx]

this was from your example. i just added following line for that

 QuillEditor(
    //Rest of parameter 
   sizeHuge: TextStyle(fontSize:64.0)
)

@ritheshSalyan I don't think there is a sizeHuge parameter anywhere in QuillEditor. Are you talking about H1?
In that case, you can pass custom line height.

This is quilljs on web, the generated delta has

"attributes": {
         "size": "huge"
      }

You can play on https://bulletjournal.us/collab/?uid=W4LOcDQo

[singerdmx]

You can play on https://bulletjournal.us/collab/?uid=W4LOcDQo

[ArjanAswal]

this was from your example. i just added following line for that

 QuillEditor(
    //Rest of parameter 
   sizeHuge: TextStyle(fontSize:64.0)
)

@ritheshSalyan I don't think there is a sizeHuge parameter anywhere in QuillEditor. Are you talking about H1?
In that case, you can pass custom line height.

This is quilljs on web, the generated delta has

"attributes": {
         "size": "huge"
      }

Oh I see.
This is not on mobile right?
Also, can we instead pass custom font sizes instead of these 3 options only? It is possible and easy to implement. And we can also pass line height along with that.

Custom font-family can also be passed by the way.

[singerdmx]

Oh I see.
This is not on mobile right?
Also, can we instead pass custom font sizes instead of these 3 options only? It is possible and easy to implement. And we can also pass line height along with that.

Custom font-family can also be passed by the way.

Yes, not on mobile.
Custom font size is what this change is about - support double
Custom font-family should be already supported since it is string

[singerdmx]

Currently we use RichText for the whole TextLine.
Your need is asking it to be rendered per TextSpan.
Basically every TextSpan is one RichText

Custom Line height is a much tougher problem.
It is actually custom text span height.
Our concept of "Line" in code is different actually - it is continuous text span

[ArjanAswal]

You can play on https://bulletjournal.us/collab/?uid=W4LOcDQo

Just used this...
Found a bug.
Opening a new issue.

[ritheshSalyan]

I found solution for this.
i replaced this

 RichText child = RichText(
      text: _buildTextSpan(context),
      textAlign: textAlign,
      textDirection: textDirection,
      strutStyle: strutStyle,
      textScaleFactor: MediaQuery.textScaleFactorOf(context),
    );

with this

 RichText child = RichText(
      text: TextSpan(children: [_buildTextSpan(context)]),
      textAlign: textAlign,
      textDirection: textDirection,
      strutStyle: strutStyle,
      textScaleFactor: MediaQuery.textScaleFactorOf(context),
    );

in TextLine builder. it worked for me.

[singerdmx]

Nice
Pull request please?

[singerdmx]

@ritheshSalyan let me know if u prefer us to submit the change instead or u want to send a pull request

[singerdmx]

The current code already return TextSpan(children: children, style: textStyle) per below. I wonder what your change did:

  TextSpan _buildTextSpan(BuildContext context) {
    DefaultStyles defaultStyles = styles;
    List<TextSpan> children = line.children
        .map((node) => _getTextSpanFromNode(defaultStyles, node))
        .toList(growable: false);

    TextStyle textStyle = TextStyle();

    if (line.style.containsKey(Attribute.placeholder.key)) {
      textStyle = defaultStyles.placeHolder.style;
      return TextSpan(children: children, style: textStyle);
    }

    Attribute header = line.style.attributes[Attribute.header.key];
    Map<Attribute, TextStyle> m = {
      Attribute.h1: defaultStyles.h1.style,
      Attribute.h2: defaultStyles.h2.style,
      Attribute.h3: defaultStyles.h3.style,
    };

    textStyle = textStyle.merge(m[header] ?? defaultStyles.paragraph.style);

    Attribute block = line.style.getBlockExceptHeader();
    TextStyle toMerge;
    if (block == Attribute.blockQuote) {
      toMerge = defaultStyles.quote.style;
    } else if (block == Attribute.codeBlock) {
      toMerge = defaultStyles.code.style;
    } else if (block != null) {
      toMerge = defaultStyles.lists.style;
    }

    textStyle = textStyle.merge(toMerge);

    return TextSpan(children: children, style: textStyle);
  }

[singerdmx]

Is this your change?

[ritheshSalyan]

yes.

[singerdmx]

@ritheshSalyan I submitted d644223 packing this change
May I resolve this now?

[singerdmx]

[singerdmx]

@ritheshSalyan closing. If you still have issue you can reopen it

[ritheshSalyan]

yes.

[ritheshSalyan]

did you test it for bullet points and check attributes?

[singerdmx]

No, probably need to update sample_data.json for that

[ritheshSalyan]

The bullet point is having issue.

[singerdmx]

Corresponding code is here

[ArjanAswal]

Closing due to inactivity, feel free to reopen.

[NicolasDionB]

I'm still having issues with this on the Web. I created custom toolbar where I have a list of different font sizes. I apply it with the SizeAttribute, for instance:

controller.formatSelection(SizeAttribute('24'));

Note that I'm using no custom style at all. Consider the following text and selection:

Applying the size 24, the result isn't as expected as the line height is miscalculated somehow. It's as the largest line height was used for the whole paragraph (look a the top of the paragraph). Everything is then misaligned.

Clicking at the end of the text you can see that even the cursor is misplaced:

Any idea how I could fix this?

[NicolasDionB]

@ArjanAswal @singerdmx I think by re-reading this issue that the problem came back. Maybe it was fixed at some point but isn't anymore. Is it possible to re-open the issue?

[NicolasDionB]

@ArjanAswal @singerdmx Actually I found that the rendering mode "html" causes the problem. Using the default "canvaskit" mode fixes it. I also discussed a problem with empty line height here: #621.