Increase line spacing


#1

I’m currently using Calibri at Large size, which is acceptable for easy reading, but I think it’d help me with readability if there was more space between the lines in a paragraph.

Please check the attached screenshot. I’ve added a paragraph from Google Docs for comparison.

Is there a way to make Dynalist’s paragraphs look like that of Google Docs?


#2

Hi Himadri,

I was able to adjust the line spacing using the following custom CSS (a Pro feature):

/* double-spaced lines */
div.Node-renderedContent.node-line {
line-height: 2.0em;
}


#3

Thank you so much Craig. I don’t have Pro right now, but I’m planning to subscribe, and I’ll try this out.


#4

Hi Craig, I tried the custom CSS and it’s perfect for line spacing. However, the starting line does not align to the centre of the bullet, and instead appears below the bullet by a few pixels.

Please check the screenshots. The incorrect alignment is most noticeable on the second screenshot, with the list items and checkboxes. My knowledge of CSS is limited, so I wasn’t able to fix this issue. I understand that it may be difficult to solve, in which case, I can live with the code as it is. :slight_smile:


list_obj_checkbox


#5

add
margin: -4px 0;
or change that first value for your needs, and it should be aligned


#6

Thanks Piotr. -4px works well on the web and the desktop app. However, -1.8px works well on mobile.

I’ll most likely keep the value at -4px, since I use Dynalist on my PC, but if I use it on my phone, I can change the value to -1.8px and then change back once I’m on the PC.

Can I use decimal values? Or should I round it off to 2px?


#7

You don’t need to do this manually, add second rule with ‘.is-mobile’:

div.Node-renderedContent.node-line {
line-height: 2.0em;
margin: -4px 0;
}
.is-mobile div.Node-renderedContent.node-line {
margin: -1.8px 0;
}

Can I use decimal values?

Yes, you can


#8

Thanks so much Piotr. This is perfect! :grinning: