CSS white-space: pre-wrap setting inserts lots of whitespace in se-type

[simpsoneric]

When writing my tiddlers, I like to use Semantic-linebreaks in my tiddlers:

• https://simpsoneric.github.io/grok-tw/enotes.html#Semantic-linebreaks

I have a tag called "hardlinebreaks" that I enable to force this in TW without resulting to triple-quotes.
I like to read my .tid files in text form, so wrapping everything in """ is quite noisy.

• https://simpsoneric.github.io/grok-tw/enotes.html#Custom-Tiddler-stylesheet

I've recently come across your TW-Section plugin and I'd really like to start utilizing it.
Although, it (appears) to insert many blank lines into the tiddler.
This makes the hardlinebreaks rendering somewhat unreadable due to the extra whitespace.
An example where I tried this out is below:

• https://simpsoneric.github.io/grok-tw/enotes.html#Cargo-spec-for-documentation

Note: the above is my current playground for it, so it may or may not have the example settings for hardlinebreak tag and the se-type field

I can start poking around in the source to see if this is something I can find and fix,
but I thought I'd reach out to you first to see if you had any quick tips.

[kookma]

Hi @simpsoneric
Se-Section normally does not add any extra linebreaks. It works only on headings and breaks them (heading+content between two successive headings) and shows again them as block.
It only added linebreaks for headers and buttons (a section UI).

I can start poking around in the source to see if this is something I can find and fix,
but I thought I'd reach out to you first to see if you had any quick tips.

Yes, please go ahead and let me know if anything wrong with Se-Section. By the way I doubt the hardlinebreak is the source of issue.

[simpsoneric]

I started my debugging this morning and have a couple firefox developer mode screen shots below.

If I remove the se-type field and keep hardlinebreaks CSS the display is good.

I am not a web developer, but it seems like it may be a problem with my hardlinebreaks CSS.
There are "whitespace only text nodes" inserted into the DOM before/after the se-section and se-article classes.

Current summary:

 se-types AND hardlinebreaks  = bad
 se-types AND !hardlinebreaks = good
!se-types AND hardlinebreaks  = good

I will continue investigating later this morning.

[simpsoneric]

I changed my css to be

[data-tags*="hardlinebreaks"] div.tc-tiddler-body p {
  word-break: normal; 
  word-wrap: break-word;
  white-space: pre-wrap;
}

But since the se-tc-tiddler-body is contained with the <p> element, this may be why the extra whitespace only nodes are being inserted into the DOM.

[simpsoneric]

TW-Section/source/section/viewtemplates/sections.tid

Lines 9 to 16 in bc01bba

	<$list filter="[all[current]has:field[se-type]]">
	<$reveal tag="div" class="se-tc-tiddler-body" type="nomatch" stateTitle=<<folded-state>> text="hide" retain="yes" animate="yes">
	<$list filter="[all[current]] :filter[<currentTiddler>get[se-type]regexp<filterpattern>]" variable="patchworkTid"
	emptyMessage="""<$macrocall $name=sectionizeSingleTiddler sourceTiddler=<<currentTiddler>> /> """ >
	<$macrocall $name=sectionizePatchworkTiddler sourceTiddler=<<patchworkTid>> />
	</$list>
	</$reveal>
	</$list>

I think the ListMacro is the source of the enclosing <p>...</p> tags.
I did some tests with it and the form:

<$list ...>
content here
</$list>

Results in

<p>
content here
</p>

And when the <p>...</p> tags enclose other <div> elements, the linebreaks between the HTML elements seem to be inserting "whitespace only" nodes into the DOM. These HTML elements that have newlines between them, are being counted towards rendered linebreaks.

TL;DR

As far as I can tell, not a TW-Section problem.
It is a problem with my hardlinebreaks CSS attempt.

I'm wondering if there is a way to "squash" whitespace between HTML elements, and if that would fix it.

[kookma]

I highly recommend posting in talks.tiddlywiki.org. You may look at TiddlyWiki repo on problem with generating extra p tags.
Also, @pmario has some wikitext/plugin for working with line breaks.

[pmario]

TL;DR

As far as I can tell, not a TW-Section problem.

It would be worth testing the https://github.com/kookma/TW-Section/blob/bc01bba6e52d937e7ad309d23862f793a627af70/source/section/viewtemplates/sections.tid file with \whitespace trim in the pragma section

It is a problem with my hardlinebreaks CSS attempt.

It should not be the cause of the extra whitespace and P elements in HTML output since it's CSS

I'm wondering if there is a way to "squash" whitespace between HTML elements, and if that would fix it.

As I wrote try \whitespace trim at the beginning of a template tiddler. It's not useful for content tiddlers!

---

Also the TW parser itself has a P-tag problem. ATM it does create a lot of unnecessary P-tags. See: Jermolene/TiddlyWiki5#7061

[pmario]

When writing my tiddlers, I like to use Semantic-linebreaks in my tiddlers:

https://simpsoneric.github.io/grok-tw/enotes.html#Semantic-linebreaks

That's an interesting view. Especially the quote from "1974, Brian W. Kernighan" that line breaks should be placed after commas. ... This may have been valid for 1974 text editors but immediately breaks down in times where documents are viewed on "responsive" devices.

eg: On My mobile. There are 4 runts, that are caused by hard line breaks.
I did mark them with arrows. The "wasted space" is marked with the red rectangle.

So for modern text that renders into HTML output I am OK with extra line-breaks at the end of a sentence. If and only if the next sentence deserves it.

BUT this discussion is way off-topic and should be moved over to talk.tiddlywiki.org

[simpsoneric]

It is a problem with my hardlinebreaks CSS attempt.

It should not be the cause of the extra whitespace and P elements in HTML output since it's CSS

Once again, I'm not too familiar with web technologies, but the extra rendered space seems similar to:

• https://stackoverflow.com/questions/42803663/how-can-i-remove-white-space-text-nodes-from-my-html

The extra <p> tags and whitespace-only nodes seem coupled.

For example, in the screenshot of the DOM below:

The highlighted whitespace-only DOM element is two newlines.
Since my line-spacing is currently 21px, that is what causes the 42px of extra vertical space.
Same goes for the other whitespace-only elements in the DOM on the right.

Once again though, if I remove the following CSS:

[data-tags*="hardlinebreaks"] div.tc-tiddler-body p {
  word-break: normal; 
  word-wrap: break-word;
  white-space: pre-wrap;
}

Those whitespace-only nodes do not get inserted into the DOM.
My simplified guess is something like the following is happening:

<p>
    <div>some content</div>  <!-- NEWLINE here in paragraph text is "white-space: pre" formatting honored, and inserted into DOM    
    <div>other content</div>  
</p>

[pmario]

You are probably right. That's why I wrote, that you should try to use \whitespace trim in the pragma section of the templates. So those whitespace nodes should be gone

[simpsoneric]

It would be worth testing the https://github.com/kookma/TW-Section/blob/bc01bba6e52d937e7ad309d23862f793a627af70/source/section/viewtemplates/sections.tid file with \whitespace trim in the pragma section

Sorry for the delayed response, the above change did not (seem) to the whitespace problem. I was slowly trying to understand some of the codebase and where \whitespace trim gets applied.

Going back to my previous investigation: #35 (comment), I'm leaning towards a problem with the outer <p> element again.

According to my in-experienced read of the HTML specification:

The `<p> element is a block-level element [...]
It cannot contain block-level elements inside it [...]
only inline-level elements are allowed to be nested with a `<p>` element.

Therefore, the generated DOM using the outer $list appears to be invalid HTML

<$list ...>
content here
</$list>

Specifically, since the content is arbitrary tiddlers the resulting DOM looks like

<p> <!-- from outer $list
  <article class="se-article">
      <p>nested</>          <!-- Invalid
    <section>...</section>  <!-- Invalid
    <section>...</section>  <!-- Invalid
  </article>
</p>

I am not familiar with the TiddlyWiki codebase, but I'm wondering if the correct fix is to change the <$list ..><$/list> so it doesn't insert the wrapper <p>'s.

[kookma]

As you discovered, TiddlyWiki generates extra

and invalid html code. This has been raised several times in forum and github.
This extra tag also makes trouble when you use CSS to format UI elements.