obsidian-leaflet
obsidian-leaflet copied to clipboard
javalent
Markers wrongly displayed in PDF export
My map markers in Obsidian look like this:
When exporting to PDF (using Obsidian), the PDF looks like this:
Hmm, I see the markers correctly in Adobe Acrobat and Chrome (both on Windows). Could you try a different PDF viewer? Map Testing.pdf
Edit: I realize if it is your viewer, opening that PDF example probably won't help.
Oops, you’re right! Turns out Linux Mint’s default PDF reader "Xreader" seems at fault. Sorry for bothering you with this.
Other PDF readers (including Firefox’ built-in one) display your and my PDF okay!
Coming back to this one, currently at Obsidian 0.12.12 & plugin 3.24.0.
Seems on PDF export (the Obsidian built-in) now even Firefox displays the "blocky" markers, except for the waypoint markers on the GPX layer, and the default marker:
PDF export:
Original view:
A GPX Waypoint marker:
Looking at the markers on the GPX layer, transparency seems not to be the problem.
It seems whenever "Layer icon" is set to ON on a marker (resulting in a combined marker), this results in a non-transparent block, except for markers on the GeoJSON layers, which display in their original form but without the layered-on-top symbol "shining through".
Other apps can use the craziest Leaflet markers, and they still look good in the PDFs.
This leads me to believe that it’s not the fault of the PDF readers but might have something to do with how the markers are constructed, or the CSS used to display them. Maybe it’ll pay to investigate a little here.
It’s so bad not being able to just "throw" a PDF at friends, and show them a note with a nice map.
So my guess is PDFjs doesn't like the clip-path and the mask being urls, which is why they export as rectangles. The clip-path gives the SVG the base layer shape, the mask layers the icon. I'll need to think of another way to build these (although this is just the default way Font Awesome builds them). The SVG for a layered marker looks like this:
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="exclamation"
class="svg-inline--fa fa-exclamation fa-w-12 full-width-height"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 384 512"
style="color: rgb(15, 40, 163);"
>
<defs>
<clipPath id="clip-S9H14qwojySi">
<path
fill="currentColor"
d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z"
></path>
</clipPath>
<mask
x="0"
y="0"
width="100%"
height="100%"
id="mask-w7HMMXCNUCfb"
maskUnits="userSpaceOnUse"
maskContentUnits="userSpaceOnUse"
>
<rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
<g transform="translate(192 256)">
<g
transform="translate(0, -64) scale(0.375, 0.375) rotate(0 0 0)"
>
<path
fill="black"
d="M176 432c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80zM25.26 25.199l13.6 272C39.499 309.972 50.041 320 62.83 320h66.34c12.789 0 23.331-10.028 23.97-22.801l13.6-272C167.425 11.49 156.496 0 142.77 0H49.23C35.504 0 24.575 11.49 25.26 25.199z"
transform="translate(-96 -256)"
></path>
</g>
</g>
</mask>
</defs>
<rect
fill="currentColor"
clip-path="url(#clip-S9H14qwojySi)"
mask="url(#mask-w7HMMXCNUCfb)"
x="0"
y="0"
width="100%"
height="100%"
></rect>
</svg>
Edit: It is interesting that this used to work, however. The SVGs haven't changed from the original version. Hmm.
Yep, must have something to with clipping path & mask.
I "repaired" above by moving the > back to the line ends, only then Obsidian would display it.
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="exclamation"
class="svg-inline--fa fa-exclamation fa-w-12 full-width-height"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 384 512"
style="color: rgb(15, 40, 163);">
<defs>
<clipPath id="clip-S9H14qwojySi">
<path
fill="currentColor"
d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z"></path>
</clipPath>
<mask
x="0"
y="0"
width="100%"
height="100%"
id="mask-w7HMMXCNUCfb"
maskUnits="userSpaceOnUse"
maskContentUnits="userSpaceOnUse">
<rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
<g transform="translate(192 256)">
<g
transform="translate(0, -64) scale(0.375, 0.375) rotate(0 0 0)">
<path
fill="black"
d="M176 432c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80zM25.26 25.199l13.6 272C39.499 309.972 50.041 320 62.83 320h66.34c12.789 0 23.331-10.028 23.97-22.801l13.6-272C167.425 11.49 156.496 0 142.77 0H49.23C35.504 0 24.575 11.49 25.26 25.199z"
transform="translate(-96 -256)"></path>
</g>
</g>
</mask>
</defs>
<rect
fill="currentColor"
clip-path="url(#clip-S9H14qwojySi)"
mask="url(#mask-w7HMMXCNUCfb)"
x="0"
y="0"
width="100%"
height="100%"></rect>
</svg>
Firefox displays it, but even Inkscape has problems—shows only the filled contour, although one can extract the clipping mask (manually). Suggest trying to generate an SVG first that at least renders correctly in Inkscape? Think that might be a step forward.
P.S.: The ones I use in my note’s descriptions I also created in Inkscape, here is a sample, maybe you can detect something: