3

I have a problem with the line-height style in paragraphs filled with a span, when the font size in the span is smaller than that of the paragraph.

My Angular application has an editable div element, and I use the Froala editor API commands to allow formatting. I added my own custom commands to modify the line-height in paragraphs.

The CSS sets a default font size and line height for the editor:

div {
  font-size: 20px;
  line-spacing: 1.25;
}

The initial markup is something like this:

<div>
  <p>Some long text that wraps here...</p>
  <p>Some long text that wraps here...</p>
  <p>Some long text that wraps here...</p>
</div>

After setting the font size and line height with the editor, the markup becomes:

<div>
  <p style="line-height: 1;"><span>Some long text that wraps here...</span></p>
  <p style="line-height: 1;"><span style="font-size: 8px;">Some long text that wraps here...</span></p>
  <p style="line-height: 1;"><span style="font-size: 40px;">Some long text that wraps here...</span></p>
</div>

As long as the font size in the span is equal or larger than the font size of the paragraph (in the present case, 20px), the line height scales correctly. However, when the font size in the span is smaller than that of its paragraph, the line height does not scale as it should. The problem can be seen in this jsfiddle.

If I set display: inline-block on the span elements, the line height scales properly but that display setting messes up the wrapping in the editor. Otherwise, the only workaround that I can think of is to use data binding to set the line height with pixel units, after retrieving the font size inside of the paragraph. Is there a simpler way to force the line height to adjust to span elements with a smaller font size?

clickbait
  • 2,818
  • 1
  • 25
  • 61
ConnorsFan
  • 70,558
  • 13
  • 122
  • 146
  • inline elements take the line height of their parent, if you want it to have it's own line height, use inline-block - [from w3c](https://www.w3.org/TR/CSS2/visudet.html#leading): On a non-replaced inline element, 'line-height' specifies the height that is used in the calculation of the line box height. – Pete Jul 13 '18 at 15:45
  • 1
    @Pete - But the line height of the parent takes the larger font size of the span into account, as you can see in [the jsfiddle](https://jsfiddle.net/ConnorsFan/a1rv5z69/). I wonder why it does not when the font size in the span is smaller (and when there is nothing else in the paragraph). – ConnorsFan Jul 13 '18 at 15:50
  • because spans are inline so the line height you set on it is different than the one you set on the p - when you go bigger with the span, it increases the p's line height as the p has to adjust it's line boxes height to accomodate the larger text, when it goes smaller, the p doesn't have to do anything so it keeps it's original line height – Pete Jul 13 '18 at 15:51
  • this is logical behavior but a bit difficult to explain ... there is a kind of min/max involved here as you said, will try to get you the relevant Spec for this – Temani Afif Jul 13 '18 at 15:56
  • check this : https://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced ... – Temani Afif Jul 13 '18 at 15:58

1 Answers1

0

Use this fiddle to understand the answer in depth - https://jsfiddle.net/gbrn58jd/

It shows how we decrease the font size span or by giving any class to modified span and keeping that in a block.

<div>
    <h3>
        Default font size: 20px, Line spacing: OK
    </h3>
    <p>Lorem ipsum dolor sit amet
    </p>
    <hr/>
    <h3>
        Font size: 8px, Line spacing: Too large
    </h3>
    <p><span class="class1">Aenean ut orci vel massa suscipit pulvinar.</span></p>
    <hr/>
    <h3>
        Font size: 32px, Line spacing: OK
    </h3>
    <p><span class="class2">Nulla sollicitudin. </span></p>
    <hr/>
    <h3>
        Font size: 48px, Line spacing: OK
    </h3>
    <p><span class="class3">Nulla sollicitudin. </span></p>
</div>

Cheers, Gaurav

Gaurav Khanna
  • 101
  • 5