BBCODE rendering Issues

General discussion of development ideas and the approaches taken in the 3.x branch of phpBB. The current feature release of phpBB 3 is 3.3/Proteus.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.3.x. If you need support for phpBB 3.3.x please visit the 3.3.x Support Forum on phpbb.com.

If you have questions regarding writing extensions please post in Extension Writers Discussion to receive proper guidance from our staff and community.
User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

BBCODE rendering Issues

Post by hanakin »

I am in the process of working on the new post component an in doing so I noticed alot of things that I think are problems with the export or rendering of the BBCODES

To makes things simple to explain lets take the following post as an example as it uses a little bit of all the basics

https://area51.phpbb.com/phpBB/viewtopi ... 21#p295921

The BBCODE

Code: Select all

Creating a new theme for phpBB is a daunting task especially given the small number of individuals on the team and the fact that most of us have day jobs.

In order to help drive this thing and generate community involvement both in discussions and development, I wanted to put together a sort of outline of what we need to help steer the individual topics as well as provide a sort of table of contents for reference and ultimately a  checklist/progression chart.

Before we start let me preface how this is laid out for better understanding.

There are four main stages or areas of focus each with their own sub task. They are listed in order of requirement/workload. 
[list=1]
[*] StyleGuide ( GUI for editing, maintaining & documenting themes )
[*] Themes Code
[*] Themes Design
[*] Any Core Improvements/fixes
[/list]

Each task/subtask should have its own dedicated discussion thread to avoid confusion

sub task will be defined and added/linked appropriately as we progress.

This should also allow for community involvement with the actual development in an easier to follow manner

[b][u]KEY[/u][/b]
❓ Have not started working on it or still in discussion

🚧 Working on it, still in progress

βŒ›   Needs reviewed

βœ… Merged or completed

[status] [disscussion link] [pull-request]

EXP: 🚧 [url=http://area51.phpbb.com/phpBB/viewtopic.php?f=131&t=50381]How to handle icons[/url] ([url=http://area51.phpbb.com/phpBB/viewtopic.php?f=131&t=50381]#ticket-18273[/url])

[b][u][color=#FF0000]PLEASE KEEP DISCUSSION IN THIS THREAD RELATED TO IMPROVING, CHANGING OR UPDATING THE LIST ONLY[/color][/u][/b]


[list=1]
[*] StyleGuide
[*] Theme Code
[list]
[*]βŒ› [url=http://area51.phpbb.com/phpBB/viewtopic.php?f=131&t=47746]1. What browsers should we support?[/url]
[*]🚧 [url=http://area51.phpbb.com/phpBB/viewtopic.php?f=131&t=50326]2. Why is a framework so usefull?[/url] (https://github.com/hanakin/base-l)
[*]🚧 [url=https://area51.phpbb.com/phpBB/viewtopic.php?f=131&t=50426]3. Lets talk grids[/url]
[/list]
[*] Design
[*] Core Changes
[/list]
when inspecting the rendered code you get the following

Code: Select all

Creating a new theme for phpBB is a daunting task especially given the small number of individuals on the team and the fact that most of us have day jobs.<br>
<br> In order to help drive this thing and generate community involvement both in discussions and development, I wanted to put together a sort of outline of what we need to help steer the individual topics as well as provide a sort of table of contents
for reference and ultimately a checklist/progression chart.<br>
<br> Before we start let me preface how this is laid out for better understanding.<br>
<br> There are four main stages or areas of focus each with their own sub task. They are listed in order of requirement/workload.
<ol style="list-style-type: decimal">
	<li> StyleGuide ( GUI for editing, maintaining &amp; documenting themes )</li>
	<li> Themes Code</li>
	<li> Themes Design</li>
	<li> Any Core Improvements/fixes</li>
</ol>

Each task/subtask should have its own dedicated discussion thread to avoid confusion<br>
<br> sub task will be defined and added/linked appropriately as we progress.<br>
<br> This should also allow for community involvement with the actual development in an easier to follow manner<br>
<br>
<span style="font-weight: bold"><span style="text-decoration: underline">KEY</span></span><br>
<img alt="❓" class="emoji smilies" draggable="false" src="//cdn.jsdelivr.net/emojione/assets/svg/2753.svg"> Have not started working on it or still in discussion<br>
<br>
<img alt="🚧" class="emoji smilies" draggable="false" src="//cdn.jsdelivr.net/emojione/assets/svg/1f6a7.svg"> Working on it, still in progress<br>
<br>
<img alt="βŒ›" class="emoji smilies" draggable="false" src="//cdn.jsdelivr.net/emojione/assets/svg/231b.svg"> Needs reviewed<br>
<br>
<img alt="βœ…" class="emoji smilies" draggable="false" src="//cdn.jsdelivr.net/emojione/assets/svg/2705.svg"> Merged or completed<br>
<br> [status] [disscussion link] [pull-request]<br>
<br> EXP: <img alt="🚧" class="emoji smilies" draggable="false" src="//cdn.jsdelivr.net/emojione/assets/svg/1f6a7.svg"> <a href="http://area51.phpbb.com/phpBB/viewtopic.php?f=131&amp;t=50381" class="postlink">How to handle icons</a> (<a href="http://area51.phpbb.com/phpBB/viewtopic.php?f=131&amp;t=50381"
 class="postlink">#ticket-18273</a>)<br>
<br>
<span style="font-weight: bold"><span style="text-decoration: underline"><span style="color: #FF0000">PLEASE KEEP DISCUSSION IN THIS THREAD RELATED TO IMPROVING, CHANGING OR UPDATING THE LIST ONLY</span></span>
</span><br>
<br>

<ol style="list-style-type: decimal">
	<li> StyleGuide</li>
	<li> Theme Code
		<ul>
			<li><img alt="βŒ›" class="emoji smilies" draggable="false" src="//cdn.jsdelivr.net/emojione/assets/svg/231b.svg"> <a href="http://area51.phpbb.com/phpBB/viewtopic.php?f=131&amp;t=47746" class="postlink">1. What browsers should we support?</a></li>
			<li><img alt="🚧" class="emoji smilies" draggable="false" src="//cdn.jsdelivr.net/emojione/assets/svg/1f6a7.svg"> <a href="http://area51.phpbb.com/phpBB/viewtopic.php?f=131&amp;t=50326" class="postlink">2. Why is a framework so usefull?</a> (<a href="https://github.com/hanakin/base-l"
				 class="postlink">https://github.com/hanakin/base-l</a>)</li>
			<li><img alt="🚧" class="emoji smilies" draggable="false" src="//cdn.jsdelivr.net/emojione/assets/svg/1f6a7.svg"> <a href="https://area51.phpbb.com/phpBB/viewtopic.php?f=131&amp;t=50426" class="postlink">3. Lets talk grids</a></li>
		</ul>
	</li>
	<li> Design</li>
	<li> Core Changes</li>
</ol>
right off the bat the lack of proper semantics is a red flag we are using <span style="font-weight: bold"> instead of <strong class="post-copy-bold">

I am sure the same could be said for italics with the <em>

The second big thing is the over use of <br> tags and the lack of <p> to clarify I am not against using <br> tags but they should only be used for extra indentation where as <p> should be the default for a single line return.

That means we should end up with something more like this

Code: Select all

<p>
	Creating a new theme for phpBB is a daunting task especially given the small number of individuals on the team and the fact that most of us have day jobs.
</p>

<p>
	In order to help drive this thing and generate community involvement both in discussions and development, I wanted to put together a sort of outline of what we need to help steer the individual topics as well as provide a sort of table of contents for reference and ultimately a checklist/progression chart.
</p>
<p>
	Before we start let me preface how this is laid out for better understanding.
</p>
<p>
	There are four main stages or areas of focus each with their own sub task. They are listed in order of requirement/workload.
</p>

<ol style="list-style-type: decimal">
	<li> StyleGuide ( GUI for editing, maintaining &amp; documenting themes )</li>
	<li> Themes Code</li>
	<li> Themes Design</li>
	<li> Any Core Improvements/fixes</li>
</ol>
<p>
	Each task/subtask should have its own dedicated discussion thread to avoid confusion
</p>
<p>
	sub task will be defined and added/linked appropriately as we progress.
</p>
<p>
	This should also allow for community involvement with the actual development in an easier to follow manner
</p>
<p>
	<strong>
		<span style="text-decoration: underline">KEY</span>
	</strong>
</p>
<p>
	<img alt="❓" class="emoji smilies" draggable="false" src="//cdn.jsdelivr.net/emojione/assets/svg/2753.svg"> Have not started working on it or still in discussion
</p>
<p>
	<img alt="🚧" class="emoji smilies" draggable="false" src="//cdn.jsdelivr.net/emojione/assets/svg/1f6a7.svg"> Working on it, still in progress
</p>
<p>
	<img alt="βŒ›" class="emoji smilies" draggable="false" src="//cdn.jsdelivr.net/emojione/assets/svg/231b.svg"> Needs reviewed
</p>
<p>
	<img alt="βœ…" class="emoji smilies" draggable="false" src="//cdn.jsdelivr.net/emojione/assets/svg/2705.svg"> Merged or completed
</p>
<p>
	[status] [disscussion link] [pull-request]
</p>
<p>
	EXP: <img alt="🚧" class="emoji smilies" draggable="false" src="//cdn.jsdelivr.net/emojione/assets/svg/1f6a7.svg"> <a href="http://area51.phpbb.com/phpBB/viewtopic.php?f=131&amp;t=50381" class="postlink">How to handle icons</a> (<a href="http://area51.phpbb.com/phpBB/viewtopic.php?f=131&amp;t=50381"
	 class="postlink">#ticket-18273</a>)
</p>
<p>
	<strong>
		<span style="text-decoration: underline">
			<span style="color: #FF0000">PLEASE KEEP DISCUSSION IN THIS THREAD RELATED TO IMPROVING, CHANGING OR UPDATING THE LIST ONLY</span>
		</span>
	</strong>
</p>
<ol style="list-style-type: decimal">
	<li> StyleGuide</li>
	<li>
		Theme Code
		<ul>
			<li>
				<img alt="βŒ›" class="emoji smilies" draggable="false" src="//cdn.jsdelivr.net/emojione/assets/svg/231b.svg"> <a href="http://area51.phpbb.com/phpBB/viewtopic.php?f=131&amp;t=47746" class="postlink">1. What browsers should we support?</a>
			</li>
			<li>
				<img alt="🚧" class="emoji smilies" draggable="false" src="//cdn.jsdelivr.net/emojione/assets/svg/1f6a7.svg"> <a href="http://area51.phpbb.com/phpBB/viewtopic.php?f=131&amp;t=50326" class="postlink">2. Why is a framework so usefull?</a> (<a href="https://github.com/hanakin/base-l"
				 class="postlink">https://github.com/hanakin/base-l</a>)
			</li>
			<li>
				<img alt="🚧" class="emoji smilies" draggable="false" src="//cdn.jsdelivr.net/emojione/assets/svg/1f6a7.svg"> <a href="https://area51.phpbb.com/phpBB/viewtopic.php?f=131&amp;t=50426" class="postlink">3. Lets talk grids</a>
			</li>
		</ul>
	</li>
	<li> Design</li>
	<li> Core Changes</li>
</ol>
This is a lot cleaner, more semantic and provides way more control of the contents for the theme author

Now I may be missing something that is in the works or is planned, but these are kind of crucial to proper control of the content within a post.
Donations welcome via Paypal Image

User avatar
Louis7777
Registered User
Posts: 394
Joined: Fri Apr 04, 2014 12:32 am

Re: BBCODE rendering Issues

Post by Louis7777 »

I agree that these should be changed the way you proposed.

Also, I'm sorry for going off topic, but I just noticed that the code box has double scrollbars.

It is caused by .codebox {overflow-x: scroll;}. Is there any need for that?

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: BBCODE rendering Issues

Post by brunoais »

hanakin wrote: ↑Mon May 01, 2017 10:15 pm right off the bat the lack of proper semantics is a red flag we are using <span style="font-weight: bold"> instead of <strong class="post-copy-bold">
Why not use <b> and <i> tags? They are much more concise and they have a defined meaning in the spec.
hanakin wrote: ↑Mon May 01, 2017 10:15 pm The second big thing is the over use of <br> tags and the lack of <p> to clarify I am not against using <br> tags but they should only be used for extra indentation where as <p> should be the default for a single line return.
<br> are line breaks, not indentation.
With text with no format, how do you distinguish between a line break and a paragraph? Are all line breaks paragraphs?

User avatar
JoshyPHP
Registered User
Posts: 381
Joined: Fri Jul 08, 2011 9:43 pm

Re: BBCODE rendering Issues

Post by JoshyPHP »

For future reference: to stop creating linebreaks you need to remove the enableAutoLineBreaks rule from the code. To create paragraphs, createParagraphs and/or breakParagraph rules on a per-tag basis, or enable the ManageParagraphs rules generator to create paragraphs in every context that allows them. Lists should probably avoid them though.

It also means that any rich text will be wrapped in a paragraph, including forum rules, etc...

https://github.com/JoshyPHP/phpbb/tree/ ... linebreaks

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: BBCODE rendering Issues

Post by hanakin »

Codebox probs needs fixed

B & I tags are very old spec and were replaced by strong and em

In fact b and I have been repurposed by the community
For other means
Donations welcome via Paypal Image

User avatar
JoshyPHP
Registered User
Posts: 381
Joined: Fri Jul 08, 2011 9:43 pm

Re: BBCODE rendering Issues

Post by JoshyPHP »

hanakin wrote: ↑Tue May 02, 2017 10:13 am B & I tags are very old spec and were replaced by strong and em
Replaced in XHTML but then HTML5 came along and everything old became new again. Frankly I don't think it matters. Google uses em for the bold, non-italicized keywords in their search results. DuckDuckGo uses b for the same bold, non-italicized keywords. Meanwhile, Bing uses strong.

https://www.w3.org/TR/html5/text-level- ... ng-element
The strong element represents strong importance, seriousness, or urgency for its contents.
https://www.w3.org/TR/html5/text-level- ... -b-element
The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: BBCODE rendering Issues

Post by hanakin »

My main issue is common practice with the i for icons
Donations welcome via Paypal Image

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: BBCODE rendering Issues

Post by hanakin »

JoshyPHP wrote: ↑Tue May 02, 2017 9:23 am For future reference: to stop creating linebreaks you need to remove the enableAutoLineBreaks rule from the code. To create paragraphs, createParagraphs and/or breakParagraph rules on a per-tag basis, or enable the ManageParagraphs rules generator to create paragraphs in every context that allows them. Lists should probably avoid them though.

It also means that any rich text will be wrapped in a paragraph, including forum rules, etc...

https://github.com/JoshyPHP/phpbb/tree/ ... linebreaks
Playing around with this but the changes do not seem to have any affect? is there something other than the linked changes that would need to happen?
Donations welcome via Paypal Image

User avatar
JoshyPHP
Registered User
Posts: 381
Joined: Fri Jul 08, 2011 9:43 pm

Re: BBCODE rendering Issues

Post by JoshyPHP »

You need to purge the cache from your ACP or from CLI.

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: BBCODE rendering Issues

Post by brunoais »

hanakin wrote: ↑Tue May 02, 2017 10:59 am My main issue is common practice with the i for icons
They are the ones at fault for misusing HTML.

Post Reply