Modify HTML source display script to conditionally insert white space based on whether the example page displays HTML in a pre or a div

[ZoeBijl]

The current template uses a div to display code for the example. It should use a pre element for this.

This feedback is related to issue #168.

• Update example.js so it does not insert white space or <br> tags if the HTML source code container is a <pre> element. Keep current behavior of formatting with white space if the source code container is a <div> element.

[mcking65]

@MichielBijl
MichielBijl,

I fixed this in the templates.

I will make this same change for the example pages that are currently in the review process as I close the reviews.

After I do that, do you think we should make this change to any remaining example pages that are already in master?

Does this change have any effect on the way the page is displayed? Or is it semantics. BTW, screen readers can not tell the difference between a pre and a div.

[ZoeBijl]

It’s a semantics thing. The div we currently use has styling that mimics a pre-elements style. The only difference being that white space is automatically added in a pre-element. This means that the indenting and new lines are added automatically. Those should no longer be added through the script we use.

So that is another thing that should happen when we make this change.

[mcking65]

@MichielBijl,

When you are working on example.js, let's change the behavior only if the source code container is a <pre>. If the source code container is a <div>, then let's keep inserting white space and line breaks. That way, we can gradually swap div for pre and it does not have negative effect if we miss one.

[ZoeBijl]

Sounds good.

[ZoeBijl]

So, excuse my ignorance, it seems this should actually be <pre><code>…</code></pre> or <code style="white-space: pre">…</code>.

[mcking65]

@MichielBijl wrote:

it seems this should actually be  <pre><code>…</code></pre>  or  <code style="white-space: pre">…</code>.

I would make the conditional statement in the script look for pre or code. So, leave current behavior if the container is a div, and remove the white space formatting feature when the idref passed to the sourceCode.add method refers to a pre or code.

I agree with the suggestion to put code with pre style in the template.

[mcking65]

@MichielBijl, do you think there is a possibility you could finish this before March 27? If so, it would help with the next heartbeat publication.

[ZoeBijl]

@mcking65 sorry, that will be unlikely. I need to do some research before I can fix this; I don’t know enough about manipulating strings in JavaScript to pull this off right now.

[mcking65]

@MichielBijl, note that the request here is not to add any new white space processing but rather to omit the current white space additions if the element serving as the html source display container is a pre element. Currently, the code assumes the display container is a div and so white space is added and tags are separated onto new lines, etc. We want to leave that processing in place if the display container is a div. But, if the display container is a pre, we want to simply pump out the unmodified text without changing any white space characteristics, i.e., indents or newlines.

[ZoeBijl]

@mcking65 I’ll make an overview of all the things I said I’d do before next week. I’ll see if there is any room left on that list when it’s made ;).

[mcking65]

I do not think this issue is necessary any longer. We are consistently using pre elements for source display. We've recently refactored example.js so it is more robust. Closing as won't fix.