List Bullet css, but in PDF Print

[Atair]

after a lot of trial and error I managed to get custom bullet points with this post:

Changing bullet list markdown into personalized list

i think snippet below is sth u looking for? anyway, some effects like box shadow (when hover and collapsed not coded here, but it’s possible, so u can try meddle with it). on that note, post obsidian v1.x, the bullets are using background color with height and width control to achieve the bullet effects. as such e.g. width 5px, height 5px and radius 100% gives u a nice round disc look. hence why ur “chevron” bullet is flushed to the lower part (when u replace the content. /* replace the …

The problem is: wrapping the same code up in @media print still shows old bullets in the pdf.

I haven’t full grasped the bullet points css, but it looks like it changed a lot over time and currently does not use any unicode characters, but some generic css object, hiding the default html bullet point?

current code:

.list-bullet::after {
	content:'»';
	width: unset; height: unset;
	background-color: unset;
}

and my naive print:

@media print {
	.list-bullet::after {
		content:'»';
		width: unset; height: unset;
		background-color: unset;
	}
}

Anyone has a good understanding of how (custom) bullet points work and how to print them?
thanks!

[geoffb]

I’ll have to take a look at the post you linked to, but it’s not clear to me how that’s accomplishing what you’re after. If you want to change the bullet of an unordered list, is there a reason you’re not just doing this?

.list-bullet {
  list-style-type: "» ";
}

This should automatically apply to all media types (i.e, both screen and print).

[Atair]

unfortunately it does not (anymore?)… The bullet rendering changed apparently in the newer versions - i am very new to obsidian, so I still don’t have an overview

[geoffb]

It appears that Obsidian is using non-semantic HTML (i.e., a bunch of spans and divs) in editing view, but both reading view and exported PDFs are using semantic HTML (e.g., ul and li elements to render unordered lists).

I would try the following in your CSS—not as a replacement to the .list-bullet::after declarations, but in addition to them, as they’re still needed to render what you’re after in editing view.

@media print {
  li {
    list-style-type: "» ";
  }
}