0

enter image description hereI am trying to save an ellipse, it's really small. 5px by 5px. I save it as PNG-24 but on mobile the ellipse is showing pixeleted. I've tried SVG but the file size is too large. Any advice would be greatly appreciated!!!

  • Hi David, welcome to GDSE! Could you add some screenshots of the ellipse and the pixelation you are talking about? 5px is very small - I'm not sure how you can have anything 5px wide without pixelation. Mentioning what programs you are using would help too. – Cai Mar 11 '16 at 12:19
  • Thanks CAI, So what we are trying to do is put an ellipse in as a bullet in markdown in HTML. We're using the list-style-type: "image"; The bullet.png image is 5px by 5px. So as its a bullet it needs to be really small. The other option is to use the standard markdown bullet but that has to be the same colour as the text. We want to use a orange bullet. – David Morris Mar 11 '16 at 14:43
  • Also how do I add a screenshot? – David Morris Mar 11 '16 at 14:44
  • You can edit your question and use the image uploader to add a screenshot. You can set a bullet to be a different color using CSS. There are a number of posts on Stack Overflow that should show you how. This for example. – Cai Mar 11 '16 at 14:50
  • uploaded a screenshot now. We were having a problem with indentation when we changed the color of the bullet using css – David Morris Mar 11 '16 at 15:03
1

The problem is that you are viewing the image on a high pixel density screen which - as the name suggests - has a higher pixel density than normal. So what you think is a 5px x 5px image is actually rendering in an area that is 10px x 10px (or 15px x 15px) - hence the pixelation.

Normally you would create different sized assets for different pixel densities - usually x1, x3 and x3. But this won't work with list-style-type: 'image'; as none of the usual CSS workarounds will work with it.

You have a few options to get around this.

CSS with Images

Instead of using list-style-type: 'image'; use a background image on the li and set the list-style-type to none. You can then use the background-size property and a larger image to compensate for the high pixel density display.

ul {
    list-style:none;
}

ul li {
    background:url('bullet10px.png') no-repeat left;
    background-size:5px 5px;
}

CSS without images

You can use the :before selector to create a pseudo-element and set its content to a bullet. You can then change the color or positioning of that element however you want.

ul {
    list-style: none;
}

li { 
    padding-left: 1em; 
    text-indent: -.7em;
}

li:before {
    content: "•";
    color: red; /* or whatever color you prefer */
}

Font Icons

Another option may be to use an icon font. I use Font Awesome but there are plenty of alternatives.

From the font awesome examples:

<ul class="fa-ul">
    <li><i class="fa-li fa fa-check-square"></i>List icons</li>
    <li><i class="fa-li fa fa-check-square"></i>can be used</li>
    <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
    <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.