Force Line Break in kirbytext?

Kirby 2 Solved ✅
1

If your raw text is:

#LINE 1

#LINE 2
blah blah

then “LINE 2” will display immediately below “LINE 1” wihtout a line break. Is it possible to force the insertion of a line break? Kirby does not seem to follow the markdown standard in this regard.

Anyone know how to force a line break below a # / h1

2

So you expect the following output?

<h1>LINE 1</h1><br>
<h1>LINE 2</h1>
<p>blah blah</p>

That is not a feature of the Markdown standard. You should instead use a margin-bottom in your CSS.

3

I forced line break by using a different space character (https://www.cs.tut.fi/~jkorpela/chars/spaces.html)+line break.
But thats’s not a nice way.

I also recommend the css method to keep the text and markup clean.

4

IMHO, line breaks only make sense within paragraph tags to start a new line, e.g. when setting poetry or in an address or sth. like that. What is the purpose of using as <br> tag when using block level elements?

5

I need it to make an h1 stand alone in a body of text without “sticking” to the next header below.

I want:

HEADLINE
paragraph

HEADLINE

HEADLINE
paragraph

This is impossible to achieve, because if there is no <p> below the header, there is no element to insert a line break, so you will instead get:

HEADLINE
paragraph

HEADLINE
HEADLINE
paragraph
6

I still don’t see why you can’t solve that via CSS instead of inserting line breaks. If need be, you could activate markdown.extra and attach a class to the headlines without a adjacent paragraph to style it separately.

7

@texnixe - you’re right I could solve this with markdown extra by specifying a class for the header that doesn’t have a paragraph below it. I was hoping there would be a simpler solution. Another way I could imagine solving this is having an empty <p> element below the second <h1> (from my example above), but I haven’t figured out how to induce kirby into generating an empty <p>

8

That’s most definitely a case for css. Solving this in the markup is a horrible idea. The markup should never make such design decisions.

2 Likes
9

How about a margin-top on the h1 element?

10

@distantnative yeah, that would work! I would probably also combine with a h1:first-of-type selector to zero the top margin of the first h1

11

@smoothmango

* + h1 {margin-top: 1em;}

or

h1:not(:first-child) {margin-top: 1em;}
12

@dennis or the opposite : )

13

There are several contexts where single line breaks are semantically perfectly fine and should not be styled with any CSS-hacks at all. Let’s say, an address label block or lyrics. Therefore standard markdown implementations including Kirbytext support ending a line with a double space and a standard carriage return resulting in a HTML-compliant <br/>.

2 Likes
14

Exactly, but it only makes sense in paragraphs, not between block elements.

1 Like
15

Hi lukasbestle!

I’ve come to the same problem: A H2 and I need a forced line break in it.

Text example:
Sehr geehrte Kunden,
wir freuen uns über Ihren Besuch.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. …

It should have the status and styling of a H2 because there is no other headline and it has the same value like the headline on other pages.
I tried the double space methode but it didn’t work.

Telling the customer they have to use another class in this case isn’t a real option. If it looks like a H2 they won’t understand why it couldn’t be a H2.

Also I can think of other cases when you need a forced line break in a Headline:

Sommer,
die schönste Urlaubszeit!

I hope you have another suggestion to implement this then css. :slight_smile:

Thank you in advance!

16

You can always use a br tag in your markdown for special cases like that:

## Sommer,<br> die schönste Urlaubszeit!

which should result in

<h2>Sommer,<br> die schönste Urlaubszeit!</h2>

Sommer,
die schönste Urlaubszeit!

1 Like
17

Great!
Thank you very much!

18 
<h2>Sommer,<br> die schönste Urlaubszeit!</h2>

EDITED: following is not correct… see post below. :slight_smile:
headlines are not allowed to have childs. h2 > br is not valid. but… most browsers will render it correctly.

the following elements would allow the br-tag

19

According to this document: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

the permitted content within headlines is phrasing content, with phrasing content defined as here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content, i.e. the
tag is a phrasing content element.

2 Likes
20

@texnixe is right. i edited my comment above, noting the error to avoid confusion.

1 Like