Line break problems

Support Themes & Styling
1

I have just been getting started with Grav and really impressed so far. My site is almost good to go, although have had problems with getting spaces between paragraphs on default pages with the Chalk theme. When I write blog posts, they appear with line breaks / paragraph breaks with no problem so I am a bit confused.

I checked both markdown guides and the Grav instructions which mention to do 2/3 spaces followed by return /
yet neither of these will work. I also looked at both the blog post and default template although couldn’t see anything obvious (although realise I might be missing something!

I don’t know if anyone else has experienced this, but any suggestions would be really appreciated. For reference, I have included a screenshot of a default page where you will see there are no spaces between paragraphs. The menu bar is badly formatted on the screenshot as I created a new page, so it normally looks normal / this isn’t part of the problem.

59
Screenshot 2018-11-04 at 16.39.59.png1268×876 120 KB

Looking forward to getting involved with the Grav community!

2

You might try the following:

  • A single <newline> (\n) inside a text has no effect.
  • <space><space><newline> creates an html <br> element inside a paragraph <p>
  • Two <newlines> are treated as a paragraph break </p><p> and hence a margin shows between the paragraphs depending on the stylesheet applied.
  • Three, four, five, … <newlines> is seen as a single new paragraph. No extra space between the two paragraphs.
  • In Grav, html can be used inside Markdown, therefore, you can use <br> to force extra empty space within a paragraph
  • Extra empty paragraphs <p></p> do not create extra empty lines.
  • Extra <p>&nbsp;</p> does create extra empty lines.

By the way…
If a particular paragraph needs extra leading space (margin-top), it might be better to embed that paragraph manually inside a paragraph element like <p id="my-id">My paragraph</p> and use the stylesheet to add extra space above the paragraph using #my-id {margin-top: 2 rem;}

This way, the paragraph can be better adapted to responsive layouts (using media queries) while adding extra breaks <br> or <p> do not play nice in responsive layouts.

Hope this helps…

1 Like
3

Brilliant thanks - found using
worked. Really appreciate the help

4

Brilliant thanks - found using

using what? Maybe discourse formatted your linebreak ??

7

My bad i pasted br + br/ but it didn’t show / just created a line break. Don’t quite understand why blog post pages do line break automatically / default pages don’t but will continue to use it when I need.

Thanks for the help

8

@coll88 I can see two reasons why paragraphs appear differently in different pages, or different templates.

  1. Auto Line Breaks configuration setting for Markdown.
    This Mardown setting controls the interpretation of linebreaks in Markdown. This can be set globally in ‘system.yaml’, or in the header of a page. As far as I know the only difference this settings makes, is that the 2 spaces before a line-break isn’t required anymore.

    Note, that this setting will not make any difference between page templates like ‘default.html.twig’, ‘blog.html.twig’, or ‘item.html.twig’

    The docs for global settings can be found here and docs for page headers here.

    These are the settings copied from the page headers documentation:

    markdown:
  extra: false
  auto_line_breaks: false
  auto_url_links: false
  escape_markup: false
  special_chars:
    '>': 'gt'
    '<': 'lt'
    • extra : Enable support for Markdown Extra support (GFM by default)
    • auto_line_breaks : Enable automatic line breaks
    • auto_url_links : Enable automatic HTML links
    • escape_markup : Escape markup tags into entities
    • special_chars : List of special characters to automatically convert to

  2. Stylesheets can make a difference
    Since templates can wrap the content of a page in different html elements, it could be that margins/padding for paragraphs appear differently in different templates. For example:

    p {
  margin-bottom: 1rem;
}

#wrapper-used-by-blog p {
  margin-bottom: 2rem;
}
1 Like