Comments (11)
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
from tw-section.
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
from tw-section.
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
from tw-section.
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.
from tw-section.
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.
from tw-section.
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.
from tw-section.
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.
from tw-section.
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.
from tw-section.
TW-Section/source/section/viewtemplates/sections.tid
Lines 9 to 16 in bc01bba
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.
from tw-section.
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.
from tw-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
Once again, I'm not too familiar with web technologies, but the extra rendered space seems similar to:
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>
from tw-section.
Related Issues (20)
- Feature suggestion: use custom filter to split sections HOT 8
- Add list-after field to $:/plugins/kookma/section/viewtemplates/sections HOT 2
- Make editor toolbar take effect HOT 2
- Hope this can work with markdown tiddlers HOT 1
- Compatibility issues with checklist plug in HOT 2
- Update plugin library HOT 2
- Use state tiddler HOT 4
- [feature idea] Allow multiple section themes HOT 4
- Wrong this.editTitle in a section HOT 5
- Should be filterpattern HOT 4
- Overwrite others sections in case there is an empty section title HOT 3
- Conflict with tiddlywiki/freelinks plugins HOT 3
- Edit Toolbar Configuration button is ignored. HOT 2
- Set sections to collapse by default? HOT 1
- Website Errors HOT 1
- Demo is one version ahead of github code ? HOT 2
- Cat't use the keyboard shortcuts when i use the plugin editing words
- [1.2.0] Editor preview appears below instead of beside the editor text HOT 3
- Plugin Status: required tiddlywiki version differs HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tw-section.