Jump to content

br makes me grrrrrr....


Martijn Geerts
 Share

Recommended Posts

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 by Martijn Geerts
  • Like 5
Link to comment
Share on other sites

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.

post-577-0-15413900-1390580741_thumb.png

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

post-577-0-56496200-1390597017_thumb.png

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

  • Like 9
Link to comment
Share on other sites

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 :)

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...

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
  • Like 1
Link to comment
Share on other sites

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;
  }
}
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...