Custom bullet graphic sizing

Bloke · 2021-05-18 10:57:27

Let’s say I want to render a ul/li list and use a custom graphic (transparent PNG). I prep my image and save it out as, I dunno, 100px square because I want it to render well on @2x displays. 100px might be a tad big (any guidance on what size works best – I don’t have a high-dpi device to test it on?) so I might shrink it, but the sentiment is there.

What I want to do is:

position the bullet, with hanging indent intact so the bullet text is left justified alongside it and doesn’t ‘flow’ underneath the bullet image at any point, even if the accompanying text is quite lengthy.
give the bullet a bit of breathing room in terms of padding/spacing.
make the bullet graphic responsive so it looks good on high-density displays but isn’t massive on lower ones.

I can’t find a way to use media queries to resize the image width (i.e. scale down the 100px bullet to be 50px on single-density displays) so is my only avenue to make multiple images at different widths and swap them out at breakpoints and adjust the margins/padding accordingly?

Some places recommend using:

ul {
    list-style-image: url(/path/to/image.png);
}

Others:

ul {
    list-style-type: none;
}
li {
    background: url(/path/to/image.png) no-repeat top left;
}

(the latter I can’t get working for some reason).

As a further bit of fun, I need to do this in the lowest common denominator of CSS because it’s destined for an ePub / Kindle book and they only support a subset of CSS.

Any ideas on the best approach?

Thank you!

P.S. Here’s the bullet I’m intending to use:
It’s scraped from the Animales font which is free for commercial use but only comes in TTF flavour so I can’t embed it in the ePub as they only support OTF. Not sure where I stand legally if I convert the TTF to OTF. If that’s a better route and I can embed the font in the ePub/mobi/kf8 file legally and cross-device then I might be able to use content: and paste in the symbol (capital letter D in the font). It’s unclear whether Kindle supports content: but they don’t support element:before so that route is out, regardless.

The final result I’m after is something like this, which appears in breakout panels throughout the book:

Last edited by Bloke (2021-05-18 11:16:13)

colak · 2021-05-18 12:04:10

Does kindle support svg? If so, you could convert the font into outlines and then svg. Better than png, and I’m sure that you will be allowed to do that re the licence.

philwareham · 2021-05-18 13:31:30

Try:

ul {
    list-style-image: url("/path/to/image.png");
    list-style-image: -webkit-image-set(url("/path/to/image.png") 1x,url("/path/to/image@2x.png") 2x);
    list-style-image: image-set(url("/path/to/image.png") 1x,url("/path/to/image@2x.png") 2x);
}

I’ve not used it for list-style-image before myself, rather background-image – but it should work the same. Note that the first declaration is a fallback for older browsers that don’t support image-set (and will only get the 1x version), the second line is for older WebKit and may or may not be needed (I don’t know, as I use autoprefixer).

Or, as Yiannis says, you can use SVG which would be better (you’d need to specify the size within the SVG). Even better, base encode the SVG into your CSS directly and save an extra HTTP request.

Bloke · 2021-05-18 13:33:40

Thanks guys. I’ll try your solution in a wee while Phil. Not sure if Kindle support image-set but I’ll check.

Hadn’t considered SVG. I’ll see if ePub supports it. Not that I know how to make one but there’s probably a png-to-svg converter somewhere.

Last edited by Bloke (2021-05-18 13:34:22)

jakob · 2021-05-18 15:14:23

Bloke wrote #330189:

Hadn’t considered SVG. I’ll see if ePub supports it. Not that I know how to make one but there’s probably a png-to-svg converter somewhere.

FWIW, you can create an svg by converting the font character to an outline in your favorite vector editing program and exporting to svg. No need to go from vector to pixel to vector.

Not sure if SVG bullets are possible in EPUB, though. Perhaps as graphics in front of indented paragraphs rather than list items.

Another (untested) idea: Create an icon font for your book with just the icon characters you want (e.g. with fontello.com or icomoon.com) and then embed that in your EPUB. Those services also make you woff/2 type fonts which I believe also work in EPUBs. (Note: You probably also need to ensure screenreaders don’t “speak” them). Again, I’m not sure if custom bullet glyphs are supported in E-book readers.

EDIT: For TTF/OTF/WOFF conversions, see also Glyphr Studio and possibly also glyphhanger.

Bloke · 2021-05-18 16:37:10

jakob wrote #330190:

You probably also need to ensure screenreaders don’t “speak” them

Oooh that’s a good point. Maybe that’s why they don’t support SVG. I’ll check though. Thanks for the conversion tips.

Maybe a pair of images is the way to go and just try to figure out a decent size that works on both low- and high-density displays. I don’t have experience with them so I’m just guessing at widths. Maybe if I figure out what looks okay on a single-density display I can then just double the width and make an image for use in the media query. And hope it works!

giz · 2021-05-18 18:28:47

Untested, but how about controlling the width of the icon via the clamp function: clamp(MIN, VAL, MAX) ?

Bloke · 2021-05-18 18:32:30

If clamp() works in ePub and Kindle, sure! Not considered that. I think it’s a fairly new invention, but I’ll check support, thanks.

jakob · 2021-05-18 19:31:59

If EPUB can handle the SVG or OTF icon font, it’ll be rendered at whatever resolution the device supports.

If you end up using a graphic, this is such a tiny and comparatively simple graphic that I’d suggest just including the double-sized graphic and using background-size (which your list says is supported) to specify its actual display size. Your device will display it in the resolution it can achieve and the extra size will likely be negligible. In fact, including two graphics for different device resolutions increases the EPUB size (albeit very marginally) as an EPUB is pre-bundled.

If you find it’s not possible to do for a list item because element:before is not supported as your list suggests, perhaps include it as an actual inline span element or pad your text away from the icon as detailed in this German article from 2012.

michaelkpate · 2021-05-18 20:22:25

Bloke wrote #330186:

As a further bit of fun, I need to do this in the lowest common denominator of CSS because it’s destined for an ePub / Kindle book and they only support a subset of CSS.

I really dug into learning Kindle and epub formats a few months ago. What a mess. Amazon really wants people to submit epubs into their content pipeline – but won’t support them directly.

And epub3 is the current standard but there are still people hesitant to make the switch.

You can do some really neat things with Calibre and Sigil but it is sometimes hard to tell what.

Bloke · 2021-05-18 21:45:03

I think a single scaled-down image is definitely simplest. I’ll use that I think. Thank you for all the suggestions.

michaelkpate wrote #330195:

I really dug into learning Kindle and epub formats a few months ago. What a mess. Amazon really wants people to submit epubs into their content pipeline but won’t support them directly.

Absolutely. It’s seriously irritating that they’re abusing their monopoly by foisting proprietary tech on people when the open standard is so much better – it supports more HTML and CSS from what I can tell – but then piggybacking on ePub and limiting some of its features with their own format.

I’ve been updating smd_ebook which is what I’m using for this project. The InDesign book I put together is a two-column layout with floating panels (anchored) and images (not anchored) and graphical elements that span columns that I don’t really want in the ePub in that form.

Exporting it using InDesign was a dog’s breakfast when it smooshed it all into a single column. Mainly my fault for not setting it out properly with this goal in mind in the first place (plus I’m using an old version) but unpicking it was going to take more time than just copying out the text per chapter to paste into a series of Textpattern articles, upload all the images and insert the captions, then just add them to the article image fields using com_article_image. After that, it’s just a bit of template skulduggery and it’s beautiful.

smd_ebook does a pretty decent job of making the ePub file, but since Amazon discontinued kindlegen in favour of standalone Mac+PC only desktop software Kindle Create and Kindle Previewer (combined over 1GB of disk space) compared to the simple executable at 30MB – which also worked on Linux – it’s a pain to support both formats. This is especially true since the last version of kindlegen only supports mobi/kf8 and not kfx files, meaning newer Kindles like Fire can’t be handled by my plugin.

The upshot is that I might just use smd_ebook to generate a really solid ePub file and then throw that through Calibre to spit out a valid Kindle format file. Let them do the heavy lifting for me!

I’m getting happier with smd_ebook with each revision. It might need updating for ePub3 – I can’t remember how far I got with supporting it – but I’d forgotten how comprehensive the plugin was for creating and managing ebooks using Txp’s publishing power. Coming back to it after, what, nine years, I’m amazed at how much I packed into it!

Last edited by Bloke (2021-05-18 21:49:48)

Textpattern CMS

Textpattern CMS support forum

#1 2021-05-18 10:57:27