Text box/Paragraph spacing issue

kft Community Member Posts: 34
I've encountered this once or twice before, but now it seems to happen all of the time.
When I have a text box with more than one line of text, the space between the bottom (last) line and the second to last is larger than the space between the other lines in the same text box.
I have tried adding a line feed at the end of each line, or not having it - the result is the same.
I even took a box where there were 4 lines (the problem being between the 3rd and 4th) and deleted the 4th line. The problem then shifted to between the 2nd and 3rd (still last and next-to-last lines)

Everything looks good in Lectora. The problem is only visible once published. I can see it on IE and Chrome.

Is this a bug? Is there a solution?


  • klaatu
    klaatu Community Member Posts: 988
    Please post and example and I'll take a look see.
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    There is a difference between soft break and hard break (enter, shift+enter and just wrapping a long line).
  • kft
    kft Community Member Posts: 34
    Yes, and it doesn't seem to matter what combination I use. If the box has 4 lines of text, the space between 3 and 4 is disproportionate to the others. I've tried with wrapped text, with <Enter> and with <Shift> <Enter>
  • klaatu
    klaatu Community Member Posts: 988
    Lectora places each line of text in a span inside its own paragraph. Line-height determines the amount of white space between each line. Lectora does not put a line-height on the last paragraph (line of text) unless you are using paragraph spacing or there is another setting I am unaware of (anyone?). It sounds as if Lectora is putting a line-height on the last paragraph (line of text) and it is larger than the rest.

    If you do not want to post a sample then look open the developers console by pressing F12 while viewing in Chrome. There's an icon to the left of "Elements" in the menu bar that looks like a box with an arrow in it (far left). Click this and then click the last line in your text box. This will select the span with the text in it in the "Elements" section of the console. Right above that is the paragraph (starts with <p style) that the span is inside of (has little down triangle). Click that line so it is highlighted. Now look to the right of the elements panel and you'll see the styles. If I've explained sufficiently, and you've followed along, you should see a highlighted area that starts with "P{" (no quotes). Right above that is a"element.style {" (again, no quotes). If you did not use paragraph spacing there should be no line-height declaration (rule). If on the left side, back in the "Elements" part of the console, you click the paragraph above the current one and look to in the styles you'll see a line-height.

    Okay. Now I'll show you something (if you don't know it already). With that paragraph still selected click on the number to the right of "line-height" in the styles section. It should turn blue showing it is selected. Now press the up arrow key on your keyboard and you should see the space between that paragraph on the others grow. The down arrow key will..yup, do the opposite. Don't worry, your not changing anything permanently. This is a MAJOR tool for web developers. I'm in here almost half the time I'm coding a website. This is how you troubleshoot this kind of thing and also how you see how something will look before you add it to the code. At any time you can click the refresh icon and everything will return to its original state.

    You can also temporarily add declarations as well. For instance, if you do not see a "line-height" you can click to the right of the closing curly brace "}" and you should get a prompt. Start typing line-height and by the time you get to the "e" in line it should give you an auto-select line-height. finish typing it or just click enter and it will add the rule. Then click to the right of the new declaration and you can enter numbers.

    So, why am I writing all this? If you select the last paragraph again and there is a line-height see if you can adjust its value to make it even with the others (check the others value). If there is no line-height declaration then temporarily add one and give it the same value as the others. Does everything space out correctly? This is the first step I would take in troubleshooting your file had you posted one. Of course this will not help you fix the problem per se but knowing whats wrong is half the battle.

    I hope this helps anyone out there who is not familiar with the developers console. It is indispensable. Play around with it, have fun, you can't break anything.

  • jvalley4735
    jvalley4735 Community Member Posts: 1,357
    Did you copy the text?  Sometimes when you paste (instead of paste unformatted) you'll bring over phantom spaces from the original document.  We did some significant updates and upgrades to the spaces process in the last feature release.  I'd love to be able to see the files where your experiencing the issue so I can share it with the development team.
  • klaatu
    klaatu Community Member Posts: 988
    Jennifer, why does Lectora put each line of text in its own span inside its own paragraph?
  • timk
    timk Community Member Posts: 1,207 ♦ Idol ♦
    I can't reproduce the issue. For me Lectora creates a new paragraph after a hard break [Enter]. There's no new paragraph after a line break [Shift] + [Enter]. A new span is created only for text with a different formatting. I've tested with typing text directly in Lectora and pasting from MS Word and MS PowerPoint both formatted [Ctrl] + [v] and unformatted [Ctrl] + [Shift] + [v]. "Line Spacing" and "Space after paragraph" are correctly assigned to all paragraphs and spans.

  • klaatu
    klaatu Community Member Posts: 988
    Yes, Tim, that's what I'm talking about thanks for clarifying. I seem to get hard breaks when I paste text, formatted or not formatted. It also gives a span for each paragraph even if there isn't different formatting applied.

    The only way I was able to re-create KFT's effect was to add a declaration of line-height to the last span and make it more than the others. I'd like to see a sample because, like you, I tried multiple ways get Lecotra to do it on it's own. I also would like to know why hard breaks are handled this way. Is there a benefit?
  • mdehaan2509
    mdehaan2509 Community Member Posts: 3
    I had this problem a couple of times. The workaround I use is to enter again after the faulty last line of text, but I wouldn't mind having this problem solved with the next Lectora update ;) I usually discover it after finishing the course design and uploading it to our test environment, so I'm not sure if it was with copied or typed text.
  • klaatu
    klaatu Community Member Posts: 988
    Someone really needs to post a sample or how is support going to troubleshoot?