Paragraph tags in layout

[Arlen Beiler]

Hi Everyone,

I'm running into a puzzling problem and am curious if someone could explain it to me. I'm trying to change the layout of the TiddlyWiki UI using CSS but I keep running into p tags at random places that completely break the proper flow of the layout. I can't figure out what's causing it but it's all over the core, not just in my code, so I'm not sure what they're for. 

Thanks

Arlen

[JD]

Hi Arlen,

I'm so curious about this, too. I wish the <p> tags had been removed from page templates ( I understand they're needed in the body content )... Can anyone enlighten?

-jd

[BurningTreeC]

Hi Arlen, JD

those paragraphs apparently are generated by the wiki parser when it encounters new-lines / whitespace

that's useful when writing text within a tiddler to get actual new lines in the rendered result when:

```

text

more text

```

but for ui parts it's not always desirable. at some points the core ui actually uses it without explicitely adding span or div or p elements

just consider that if it's a vnd.tiddlywiki tiddler and there's no \whitespace trim pragma on top, such new lines will generate paragraphs

you can however put a \whitespace trim on top of the tiddler (and separately within macro definitions inside that tiddler) .. I don't know if there's a \rules pragma which can be used to switch paragraphs off

[BurningTreeC]

ah no, the \whitespace trim doesn't remove those new lines, so forget about this tip ;)

 

[JD]

Hi BTC,

Ahaha! I used to add  \whitespace trim everywhere because I once assumed it will limit <p> generation on that tiddler... But I was wrong and now I have little idea on what it actually does :(

Inspecting the dom through Google Chrome, I see that tc-page-controls is styled to have margin-top:14px, which isn't necessary because it is inside a <p>... In this case I wonder if tc-page-controls was originally not intended be wrapped inside <p>.. and so I wonder if there are other page templates that have this curious thing... Turns out that yes, tc-drafts-list also is within a paragraph tag, although it isn't noticeable because it is position:fixed anyway...

 

I'm probably just rambling now hehe

-jd

[Jeremy Ruston]

TiddlyWiki Classic didn’t generate proper paragraph tags; it just rendered a <br> tag wherever there was a line break. In response to criticisms about that, from the beginning I tried to make TW5 generate paragraph tags in the same way that Markdown does. (Hence the requirement for double line break to terminate a paragraph).

It was then a bit later that I was successful in my experiments to use wikitext to generate the UI of TW5 as well as just the bodies of tiddlers. By that time the generation of <p> tags was entrenched and so I just worked around it with a combination of CSS and carefully crafted wikitext.

Best wishes

Jeremy.

-- 
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5f1f86c3-54ce-4e1d-9f03-22924d898797%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[PMario]

Hi,

The problem with the existing mechanism is, that "whitespace matters" for a good reason, as Jeremy explained. The backside of the coin bites us with UI generation. ...

The TW UI has grown over time quite a bit. We have about 300 shadow tiddlers, that match the search term $:/core/ui. At the early stages, there was no possibility to trim whitespace, which helps to make UI code more readable - now. .. But it's only available in the latest versions.

The main problem now is, that the base CSS contains a lot of hardcoded paddings and margins, that are needed to fix exactly this problem. ... So if we change the UI code, we would also need to modify the base.css code, which will create a compatibility problem.

I think it should be done, but it's a process and it won't be fast. It's a lot of work, to do it right. ... BUT it would be worth it in the long run

have fun!

mario

[BurningTreeC]

hear my wise words:

"only removing the new lines removes the new lines"

[JD]

hehe I'm probably not wise enough to understand the deeper meaning of this advice!

-jd

[JD]

Oww, It's very interesting how this <p> query reveals TW5's history. 

I can intuit sometimes where a <p> will be generated, but if within and/or around a <$list> it seems pretty unpredictable.  Still workable though and not really that bothersome. In fact it helps sometimes when I'm too lazy to add top and bottom paddings to divs.

-jd

[PMario]

On Tuesday, March 12, 2019 at 3:17:10 PM UTC+1, JD wrote:

...

Still workable though and not really that bothersome. In fact it helps sometimes when I'm too lazy to add top and bottom paddings to divs.

Yea, That's the culprit. I wich it would have been a much "uglier" side effect. We would have been forced to deal with it ;)

-m

[Arlen Beiler]

It turns out that the fix requires only six lines of code! 

Well, OK, six lines spread across six files. It's pretty obvious that all user-generated content is inside a tiddler body in the story river, so we just turn on auto-generated paragraphs inside the tiddler body in the story river (and in the edit preview). If someone is advanced enough to use it anywhere else, they definitely know how to use the set widget to set one variable. You can also turn it off for one tiddler in the story river using the same method. 

https://github.com/Jermolene/TiddlyWiki5/pull/3854

Tada!

Well, OK, I will grant you that it might require a tiny bit of tweaking to adjust the CSS styles, but now that we're liberated, that should be fun! :)

Enjoy!

Arlen

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/ad5d3369-616d-448d-8cb8-69ccaada3c9e%40googlegroups.com.

[Arlen Beiler]

If you're curious, I exported the tw5.com data folder and uploaded it to my GitHub page to give you an idea of what it looks like.

https://github.com/Arlen22/arlen22.github.io/blob/master/tiddlywiki-auto-paragraph.html

It's supposed to work at this URL as well, but it isn't yet for me.

https://arlen22.github.io/tiddlywiki-auto-paragraph.html

Arlen

[PMario]

Hi Arlen,

None of the links work for me. using FF latest.

-m

[Arlen Beiler]

Ok, fixed it. It should work now. Sorry for the trouble. 

https://arlen22.github.io/tiddlywiki-auto-paragraph.html

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/8bd667f6-b4d3-4f74-aeeb-2cd5488ec024%40googlegroups.com.

[Arlen Beiler]

Ok, they should be working now. 

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/8bd667f6-b4d3-4f74-aeeb-2cd5488ec024%40googlegroups.com.