List links CSS question

[David Gifford]

Hi all

Is there a way to use CSS to reduce the space above and below the list-links macro? It might just be the space of the p element, but there are times I would like the bulleted list appear right below the title I give to the list...

[Tobias Beer]

Hi Dave,

Not sure, but I believe you may have spotted a(nother) short-comming of the paragraph handling in TiddlyWiki... being, that — at least I wouldn't know how —  you cannot assign a class name to such a paragraph (and use css to style it appropriately). Or can you?

Best wishes,

Tobias.

[Mat]

aaa
<<list-links filter:"[prefix[N]]" class:"foo">>
bbb

<style>
.foo {
background-color:blue;
margin-bottom:0;
margin-top:0;
}
</style>

<:-)

[Tobias Beer]

Hi Mat,

Works, indeed.
However, note that you are not addressing a paragraph
that may be created around a list-links macro,
you can only force it to be inline in order to fix the margin.

Best wishes,

Tobias.

[Mat]

Tobias Beer wrote:

Note that you are not addressing a paragraph that may be created around a list-links macro,

you can only force it to be inline in order to fix the margin.

Tobias, I'm not sure what you mean. Could you give an example of what is not possible?

<:-)

[Thomas Elmiger]

Hi Dave, Tobias and Mat

Well, in principle one could remove spacing after e.g. p in general and add it again, where it is missing – omitting to add it to ul/ol preceded by a p. Something like this:

p {
  margin-bottom: 0;
}

p + p, h1 + p, h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
  margin-top: 1em;
}

ul {
  margin-top: 0;
}

But this could become a lot of work, I am afraid …

EDIT: I had to look up the syntax and use of https://css-tricks.com/almanac/selectors/a/adjacent-sibling/ – this is an indirect approach to the problem. There is no way in CSS to define a rule like "no space after a p if it is followed by an ul" so you would have to do it the other way round like I tried to show above.

Have a great day!
Thomas

[PMario]

Hi Dave,

Just use the built in mechanism, like this:

<<list-links filter:"[prefix[J]]" class:myClass>>

see: http://tiddlywiki.com/#list-links%20Macro

tiddler: myStyles  tag: $:/tags/Stylesheet

.myClass {
  margin-top: 0px;
  margin-bottom: 0px;
}

Just adjust the margin pixel values to your liking.

If your text looks like this it should work as expected.

lorem ipsum dolor sit amet.
<<list-links filter:"[prefix[J]]" class:myClass>>
lorem ipsum dolor sit amet.

have fun!
mario

[David Gifford]

Wow thanks Mario!

On Sun, Dec 25, 2016 at 5:04 PM, PMario <pmar...@gmail.com> wrote:

Hi Dave,

Just use the built in mechanism, like this:

<<list-links filter:"[prefix[J]]" class:myClass>>

see: http://tiddlywiki.com/#list-links%20Macro

tiddler: myStyles  tag: $:/tags/Stylesheet

.myClass {
  margin-top: 0px;
  margin-bottom: 0px;
}

Just adjust the margin pixel values to your liking.

If your text looks like this it should work as expected.

lorem ipsum dolor sit amet.

<<list-links filter:"[prefix[J]]" class:hugo>>

lorem ipsum dolor sit amet.

have fun!
mario

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/mqwHsx8ChOk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+unsubscribe@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/81d6d0fa-128a-40ef-833e-0cf08ac8b2d1%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

David Gifford
Christian Reformed World Missions, Mexico City

[Tobias Beer]

Hi Mario,

 

Just use the built in mechanism, like this:

<<list-links filter:"[prefix[J]]" class:myClass>>

Of course, it's the simplest way and the one to make this particular case work atm.

However, this somewhat counter-intuitively forces us to have the wikitext parsed in inline mode and then address the style of that list.

However, I would very much appreciate a method that would force block mode parsing, but still let me specify a class to be applied to a rendered paragraph, if only to work for more than just the list-links macro. Atm, I wouldn't quite see how that could be done, though.

Best wishes,

Tobias. 

[PMario]

On Tuesday, December 27, 2016 at 1:01:43 PM UTC+1, Tobias Beer wrote:

Hi Mario,

 

Just use the built in mechanism, like this:

<<list-links filter:"[prefix[J]]" class:myClass>>

Of course, it's the simplest way and the one to make this particular case work atm.

However, this somewhat counter-intuitively forces us to have the wikitext parsed in inline mode and then address the style of that list.

Actually, there is no difference if you have 3 paragraphs rendered or just one. use these CSS values

margin-top: -13px;
margin-bottom: -13px;

and this text:

lorem ipsum dolor sit amet.

<<list-links filter:"[prefix[J]]" class:myClass>>

lorem ipsum dolor sit amet.

The result is the same.
 

However, I would very much appreciate a method that would force block mode parsing, but still let me specify a class to be applied to a rendered paragraph, if only to work for more than just the list-links macro. Atm, I wouldn't quite see how that could be done, though.

In this case the paragraphs "have no right" to modify the behavior of the list. The list needs to define its behavior. If the paragraphs do it, it's a side-effect, which basically is just "weak" CSS.

IMO the solution is, to completely redefine how the CSS defines margins in a consistent and nestable way. At the moment that's not the case. So we encounter problems with some edge cases and we need to design workarounds instead of solutions.

The problem with solutions is: They are not backwards compatible, which is a no go for Jeremy.

I think, there is no easy way to fix it atm.

-m

[Tobias Beer]

Hi PMario,

 

In this case the paragraphs "have no right" to modify the behavior of the list. The list needs to define its behavior. If the paragraphs do it, it's a side-effect, which basically is just "weak" CSS.

My response was not about paragraphs doing unexpected things in different circumstances, but rather the ability to have paragraphs be of a defined type, rather than "fixing" whatever they contain.

 

IMO the solution is, to completely redefine how the CSS defines margins in a consistent and nestable way. At the moment that's not the case. So we encounter problems with some edge cases and we need to design workarounds instead of solutions.

I would think, being able to address a given paragraph directly, instead of its contents, will do away with a few inconsistencies... and whenever you use a negative margin, chances are you were just not able to properly address the element you actually wanted to define.

 

The problem with solutions is: They are not backwards compatible, which is a no go for Jeremy.

Not entirely convinced there isn't a backwards-compatible way to assign classes to paragraphs.

However, playing a bit more with paragraphs and their margins, I've come to think that using the list-links macro inline as you have with a class is actually the only way to handle this. Otherwise, the problem is not only the margin of the paragraph that wraps some output, but rather the bottom margin of a preceding paragraph. So, to avoid that, you are forced to have your content parsed inline, with all the consequences, e.g. having to use actual html rather than wikitext. What do I mean? Try these two, and you know what I mean:

title: Test

Some list... {{Foo}}

title: Foo

* foo
* bar
* baz

So, Ideally, we would want to be able to have content parsed in block mode, but without the paragraphs ...and perhaps only linebreaks.

Maybe there would be a way to have wikitext rendered that way, as opposed to either inline mode or block mode. Fwiw, using triple quotes doesn't do the job.

This could be a syntax to trigger that behavior:

@@!
Always render in block mode but do not render paragraphs, but linebreaks instead.
@@

Best wishes,

Tobias.

[PMario]

On Wednesday, December 28, 2016 at 1:49:25 PM UTC+1, Tobias Beer wrote:

However, playing a bit more with paragraphs and their margins, I've come to think that using the list-links macro inline as you have with a class is actually the only way to handle this. Otherwise, the problem is not only the margin of the paragraph that wraps some output, but rather the bottom margin of a preceding paragraph.

That's right. ... We have the same problem as every word processing software has.

You have to define the "formating rules" in the right way, to get a consistent behavior. .. That's the reason, why most people spend hours to "design" the look of a text document (with the default settings), instead of writing content. ...

I think TiddlyWiki does a reasonable good job for many usecases and it has some trouble with edge cases. ... With TW the default "element" for text is a paragraph. So elements, that are covered in paragraphs inherit its styles. Sometimes this is not what we want, so we need to work around it.  ...

The problem with the existing CSS is that it has been grown over several years. So the structure is "organic" and has some flaws.

Now that (we think) we know the flaws, it would be possible to do a redesign, which may solve most problems. (And probably introduce new ones :) ...

just some thoughts.

-mario