How to make blockquote look as expected?

#1

If I have some quote material like this:

> ik belde
> jij belde 
> hij belde
> zij (she) belde

I expect it to look like this (from Obsidian) :

image

Instead, in TW I get:

image

This is quoted material – I expect the spacing to be retained. I can make it look normal by using a single > and then putting a line break <br/> between each entree. But this is really awkward to type and read in the raw text:

> ik belde<br/>jij belde <br/> hij belde<br/> zij (she) belde

How can I use quoted texts easily and have them render sanely?

Thanks!

#2 
<style>
blockquote div {margin:0px;}
</style>

> ik belde
> jij belde
> hij belde
> zij (she) belde

Screenshot 2023-04-29 5.01.03 PM

#3

Thanks Charlie!

. . . . . . . . . . . . . . . .

#4

Say you don’t necessarily want all blockquotes to look that way, you could do this:

<style>
mbq blockquote div {margin:0px;}
</style>

<mbq>

> ik belde
> jij belde
> hij belde
> zij (she) belde
</mbq>

Say you want the style available across your entire TW, then setup the style in a stylesheet tiddler.

Or however else you want to implement the style.

#5

If you you want to change the behaviour globally Charie’s solution is valid.

If you want to be more flexible you should use a custom class for the blockquotes you want to change. eg:

<style>
.mb {
  margin: 0;
}
</style>

>.mb quote 1
>.mb quote 2

The screenshot shows, how the created HTML output looks like. You can see, that every DIV inside the BLOCKQUOTE element got a class named: mb, which can be used to style the element.

This gives you maximum flexibility.

image
image1847×983 78.3 KB

This mechanims works for most TW block elements, like headings, lists and so on. eg:

*.xx test

!.ab heading

which creates

<ul><li class="xx">test</li></ul>

<h1 class="ab">heading</h1>

image
image1847×820 58.4 KB

1 Like
#6

Oh wow, I didn’t know you could just make up a html tag like that and use it with CSS! Might be useful to force specificity. Thanks!

#7

Before posting I reviewed the docs at Tiddlywiki dot com on CSS and formatting. There was no mention that classes could be added to individual elements like >. Just the triple <<<

I did try

""".myclass

And found it didn’t work. Maybe I’ll have to test that again.

Thanks!

#8

@Mark_S it works for many but not all, but there are other ways to get similar results, so do spell the exceptions out.

I have used classes for done = d cancel c

* task item
*.d another task cone (line through green)
*.c A task canceled in red text
#9

Hi Mark,

In case you are interested in options: I found two variants to achieve the same result. The first is simple, the second might be semantically interesting for your example that reminds me of a list.


<<< 
"""
ik belde
jij belde
hij belde
zij (she) belde
"""
<<<

---

<<<.nolist
* ik belde
* jij belde 
* hij belde
* zij (she) belde
<<<

<style>.nolist ul { list-style:none; padding: 0; }</style>

All the best,
Thomas

1 Like
#10

Oooh. I like that second option, because Code Mirror knows how to make bullets automatically, though it doesn’t know how to make > automatically.

1 Like