Use semantic paragraph <p> tags in post content instead of line breaks <br> (Accessibility, Semantics, Bug Fixing, Styling, SEO?)

[adamgreenough]

I've commented about this before but have been recommended to start a suggestions thread!

Currently, the Froala editor uses paragraph <p> tags for a hard return and line breaks <br> for soft return if you inspect the HTML while editing. This is how things should work and do in almost all WYSIWYG editors. However, XenForo applies CSS that masks this fact to better represent how the post will look when it is rendered. Normally, a paragraph tag would separate blocks of content by about 0.8 line height.

When XenForo renders the post, it strips out these paragraphs in favour of line breaks using the <br> tag. There's many reasons this is wrong. Chris has previously stated this is simply their personal preference but I have not heard as for why yet. Here's why using line breaks is wrong and using paragraphs would be an improvement.

Accessibility

In many screen readers, line breaks are read over without a pause like you would expect when listening to content separated into paragraphs. Screen readers also have functionality to skip through paragraphs to make navigating large blocks of content much easier, this is not usually possible when line breaks are used instead.

Fixes long standing iOS Keyboard Bug

Opting to use paragraphs instead of line breaks on hard returns plus a bit of CSS to reflect this change in the editor and post view would essentially solve my problem with shift deactivating on iOS after using two new lines to manually indicate a new paragraph.

XF 2.1 - Major editor complaints

I have many users complaining about the post editor. Cursor jumping to beginning when backspacing or deleting wrong text iOS not keeping shift on when entering 2 line breaks and turning it on at seemingly random times (very annoying) Entering 2 line breaks on list does not close the list as...

xenforo.com

Fixed - Froala iOS - Double tapping return produces odd results

xenforo.com

XF 2.1 - How to stop ios keyboard losing capitalisation on new paragraph. Or is it a bug?

At first I thought this was a bug, maybe it is. Who knows? On iPhone, when you press return the keyboard changes to capitals. However for a new paragraph you have to press return again in order to get the space. The keyboard then goes back to lower case. NB: mentioned here but the only answer...

xenforo.com

Styling/Typesetting Improvements

From a styling perspective, I would prefer to have less space than a double BR provides to separate paragraphs. It is not proper typesetting to have a whole line height between paragraphs. It would also make it much easier to provide consistent spacing which is an annoying problem. Currently, the spacing between lists, new lines, embeds, quotes, etc. can be inconsistent and unpredictable. If everything was happily sat in its own paragraph/other semantic tag then applying consistent margins would be a breeze.

It is invalid HTML, the official HTML spec says this is wrong and so does MDN

It should not really be up for debate that line break tags should not be used to space paragraphs. The MDN agrees. The official W3 HTML spec has the following to say:

"br elements must be used only for line breaks that are actually part of the content, as in poems or addresses."

The only reason it would pass as valid HTML in a automatic checker is because the checker does not know the semantic intention of the code, just that it technically does not violate any hard technical rules.





SEO?

It is no secret that search engines love valid, semantic HTML. As we discussed, this isn't it. I expect that Google is smart enough to gloss over this unsemantic HTML since they're so advanced, but why chance it? We are already seeing organic results for forums dropping in many cases and need every advantage we can get. There is a fundamental error with how the most valuable content is currently being formatted. Google takes various snippets from paragraphs, I highly suspect that this affects that though it is very hard to get objective evidence here.

Why have XenForo chose to do it this way?

Why is it designed to be this way? As you can see, the case for paragraphs is strong and appears to be objectively the correct way to do it. I'd love to hear a case for line breaks if one exists beyond just being personal preference.

It is an option in the editor as to how new lines are created but it is simply our preference to use HTML line breaks rather than other options.

So it’s working as we designed it to. You seem to indicate this is problematic. How so?

Semantically you can use <p> tags to separate chunks of text, yes. But you can also separate chunks of text with line breaks. Either approach is valid.

Dismissing this suggestion because it doesn't appear to affect you would be a disservice to the over 2% of users that are visually impaired and would benefit from a screen reader with semantic HTML as well as the huge number of iOS users with an annoying bug every time they want to start a new paragraph.

In an ideal world, perhaps this could be an option if people are worried about unlikely affecting their existing posts?

Thanks for reading! If you agree, an upvote will help get this seen and considered (I hope!).

 

[adamgreenough]

This issue coupled with the Froala iOS bugs have convinced me to leave XenForo behind for now. Not a single response/justification on either from XF devs in over a year despite the clear cut design, accessibility, semantics and arguably SEO issue with these line breaks and the abysmal iOS user experience. A real shame but a forum is about writing and reading posts and currently these are seriously flawed.

 

[Chris D]

In what is probably the cruelest example of bad timing, the iOS issues you reported appear to have been fixed in the latest version of the editor that we are including XF 2.2.7.

I know you will continue to take issue with some of our approaches, particularly the semantic line breaks issue made in this thread, and it may indeed be too little too late but these issues being fixed were a pleasant surprise this morning.

 

[adamgreenough]

Cruel timing indeed @Chris D but I'm very glad for the every iOS & XenForo user that those are fixed. Does seem to be better this end on iOS 14. It is very hard to understand how software as expensive as Froala can have taken so long and been so silent to fix that when FOSS editors have no similar issues.

I (and 65+ others) would still love to know your thoughts on an option for using proper semantic HTML in rendered posts and use the much more familiar enter = new paragraph, shift + enter = line break that even the XenForo Froala editor uses as you will already know if you inspect the markup of the editor in action (but spacing is hidden with CSS).

Is it a technical limitation? Personal preference? vBulletin legacy? There can't be much debate around which way is right by any web standard so there must be a reason.

 

[Kirby]

I (and 65+ others) would still love to know your thoughts on an option for using proper semantic HTML in rendered posts and use the much more familiar enter = new paragraph, shift + enter = line break that even the XenForo Froala editor uses as you will already know if you inspect the markup of the editor in action (but spacing is hidden with CSS).

Please don't get me wrong, I've upvoted this suggestion as I think it would be nice to have "semantically correct markup", but I think you are expecting waaay too much from users.

IMHO 90+% don't even know about "shift enter" to create a linebreak, let alone those that would actually use it.
Most of the time (especially when using mobile devices) users will just tap enter to start a new line and tap twice to separate to insert a blank line/separate paragraphs.

Therefore, I don't think this can be implemented with enter = paragraph and shift enter = line break, the current behaviour with enter = line break would have to be kept anyway.

Out of curiosity:
Is it possible to use "semantically correct paragraphs" on Reddit, Facebook, Twitter, WhatsApp, Instagram, YouTube comments or WordPress comments?

 

[adamgreenough]

Please don't get me wrong, I've upvoted this suggestion as I think it would be nice to have "semantically correct markup", but I think you are expecting waaay too much from users.

IMHO 90+% don't even know about "shift enter" to create a linebreak, let alone those that would actually use it.
Most of the time (especially when using mobile devices) users will just tap enter to start a new line and tap twice to separate to insert a blank line/separate paragraphs.

Therefore, I don't think this can be implemented with enter = paragraph and shift enter = line break, the current behaviour with enter = line break would have to be kept anyway.

Out of curiosity:
Is it possible to use "semantically correct paragraphs" on Reddit, Facebook, Twitter, WhatsApp, Instagram, YouTube comments or WordPress comments?

I disagree about the user knowledge. This is how every word processor and WYSIWYG editor I've ever used does. Given the array of formatting options it is not right to compare the XenForo editor to something like a messaging app or comment system.

As far as mobile users are concerned, one option would certainly be to keep the single = line break, double = paragraph editing experience but interpret this and render it semantically regardless. This would still be a huge improvement for accessibility, formatting and SEO.

Lots of platforms now use Markdown too, which will parse something like a plain text file/textarea in to semantic HTML. This does it as you describe, with 2 lines being parsed as a paragraph and 1 a line break.

Reddit does it right, Facebook does not use any legible markup at all given their React framework but does use styling to convert 2 spaces in to a faux-paragraph and one a line break (having an entire line height between paragraphs looks silly!), WordPress editor does it right, yes, comments are just a textarea by default. Twitter no but they're not really made for long-form comments.

Many short-form/messaging apps use enter to send so not really comparable, given that multi-paragraph messages are not really the intention (like it perhaps would be on a long-form forum) but those that do almost all use Shift + Enter to insert a line break.

I did an an assessment of how other forums handle it, I'd much rather see XenForo in the more "modern" category of those forums rather than being lumped with vBulletin and MyBB.

 

[PaulB]

• Is it possible to use "semantically correct paragraphs" on Reddit, Facebook, Twitter, WhatsApp, Instagram, YouTube comments or WordPress comments?

Entries marked <div> are using divs in a manner closer to <p> than to <br>.

• Reddit: <p>
• Facebook: <div>
• Twitter: <div>
• WhatsApp: Not a website, not applicable
• Instagram: Can't be bothered to check; it's not exactly usable for anyone who's vision-impaired anyway
• YouTube: <div>
• WordPress: <p>

None of them use the <br> approach unless a user explicitly requests it; for example, <br> can be used on WordPress with Shift + Enter.

Therefore, I don't think this can be implemented with enter = paragraph and shift enter = line break, the current behaviour with enter = line break would have to be kept anyway.

Then just make one line break = <br>, two line breaks = <p>. It's the same thing anyway. The biggest issues I see are that:

• It's a pretty big undertaking, and I'm sure the XF team would rather invest their time elsewhere. BB code's design is somewhat archaic and makes changes like this difficult.
• Accessibility to this degree probably isn't a legal requirement for most XF customers.
• It's a breaking change.

 

[laz]

Hmmm, this is driving me a little crazy – not the end of the world but it would great to have a toggle in the options to keep as is, or use <p> automatically instead of line breaks.

 

[TrevC2]

Hmmm, this is driving me a little crazy – not the end of the world but it would great to have a toggle in the options to keep as is, or use <p> automatically instead of line breaks.

Nearly 2023 and Xenforo still blasting out<br>'s

This doesn't even look right (because it isn't). Come on, please fix this.

 

[TLDR]

Here's my 2 cents:

Since you store content (such as posts) not as HTML in the database, you could go the "lazy" WordPress-approach. (Pre-Gutenberg, that is, but Gutenberg sucks anyway)

Outside special BBCodes (such as code): A single \n is converted into <br>. Multiple \n are converted into <p>.

So assume a post starts with a <p> and ends with </p>. Then all you gotta do is

// Assume a piece of content is always wrapped into a paragraph.
$post = '<p>'.$post.'</p>';

// Replace 2 or more new lines with a new parahraph
$post = preg_replace("~\n\n+~", '</p><p>', $post);

// Remaining newlines are replaced with simple line breaks
$post = str_replace("\n", '<br>', $post);

// Make it a little pretty, just cosmetics
$post = str_replace(array('</p><p>', '<br>'), array("</p>\n\n<p>", "<br>\n"), $post);

Well, this clearly isn't ready to be shipped because you have to iron out some edge-cases, but that'd be what WordPress did/does. Because WordPress too (at least with the classic editor) stores "simplified" HTML in its database, i.e. you CAN, but you don't HAVE TO specify <p> and <br>.

And this would not - well as far as I am thinking right now anyway - break with compatibility. XF could work. Imported vB could work (because it too stores bbcode). Imported HTML would work anyway because it is specified correctly.

That said - while I would welcome such a change for reasons of crawlability (aka SEO) and those who use reading aids, I, myself, don't mind either approach. So that's that. :–)