br makes me grrrrrr....

[Martijn Geerts]

Somehow content editors love the <br> tag. On a 'random' base, the're putting in a line break. The cases of double <br> is easy to solve, but the single ones are just a pain in the *ss, as they could be intended.

Think 80% of the <br /> makes me <grrrr />. For other elements I can use some pseudo elements to foo-doo visualize when they are used.

For br thats not possible without some javascript I think.

I even think: Disallow br tags at all.<br>

 

How do you guys solve this.?

 

Putting this in the the CSS, will visualize the BR.

p br {
    content: "*";
    display: block;
    margin-bottom: 0;
    line-height: 1;
}

p br:after {
    content: "<br>";
    display: inline;
    background: red;
    color: #FFF;
    font-size: 12px;
    border-radius: 2px;
    margin-right: 2px;
    padding: 0 4px;
    float: left;
}

Edited January 24, 2014 by Martijn Geerts

[arjen]

Textile

[Martijn Geerts]

Textile is not something I can give, same for markdown...

(pitty)

[SiNNuT]

This is in context of an RTE? <br /> needs 'shift+enter' and <p> needs enter. Isn't this always intentional behavior of the editor? What needs to be 'solved'?

[Martijn Geerts]

yep, context RTE.

Reason, make those linebreak visible, so content editors are aware of those breaks. Lot's of time, the writers use line-breaks when they shouldn't, or don't know that they are using those.

So that red, green & gray is done with CSS pseudo elements.

Here you can see that the header also includes a strong tag, I don't like that so, there's the visual feedback.

Ps, I did solve it, but don't like as I press solved, it tells me: Best Answer 

[SiNNuT]

Looking at it from an 'awareness' angle i actually really like the way you've done it. Education wile you make and edit content.

[teppo]

Some time ago, while debugging a misbehaving site, I found out that one user had a habit of hitting shift + enter at the end of each line in the editor. That made sense as an attempt to gain more control over the typography, but it also explained the situation.. especially since the site in question was responsive.

Making each <br /> visible could've prevented that whole mess -- or at least made it easier to understand why it was happening

[Martijn Geerts]

It's like a traffic light or PageEditSoft lock. You get your visuals, but it's up to the editor what to do with it.

[Martijn Geerts]

I'm sorry guys,

If you type text and press return, CKEditor inserts a <br> automatically, after save these are cleaned. So when not copy/paste text, the methode for showing the linebreak is almost useless.

If there's a way that CKeditor doesn't insert that to be cleaned <br> I really like to know it. I Did try to figure it out, but till now no success.

[guenter55]

Hi.

I think you got the solution till one year later , but to go sure for all, who read this:

go to e.g. field Body/Input/ckEditor Settings

Beautify Markup Toggles

set Convert div tags to paragraph tags only

that´s it!

So, "return" makes a <p>

Shift+return makes a <br>

2x shift+retrun makes a free line

The source ist like this:

<p>Das ist der Text</p>

<p>Mit Return ist oben Leerzeile und nun mit shift+return in nächste Zeile<br />
jetzt 2x s+r<br />
<br />
ok</p>

The result:

Das ist der Text

Mit Return jetzt und nun mit shift+return
jetzt 2x s+r

ok

[LostKobrakai]

If someone has editors, who don't pay attention to linebreaks, that's a little css snippet to at least limit the damage an editor could do to mobile textblocks. Especially for those narrow texts falsely placed breaks can harm the layout of lines. 

@media (max-width: 26.5em){
  br{
    display: none;
  }
}