5 ms·

I also thought so (about hanging bullet points), but it's true that in this example: https://codepen.io/matejlatin/full/dRLRpW/ https://codepen.io/matejlatin/fu

I also thought so (about hanging bullet points), but it's true that in this example: https://codepen.io/matejlatin/full/dRLRpW/ https://codepen.io/matejlatin/full/dRLRpW/ they IMO look better.

topoftheforts 8y ago
Wait, this example is different, the first list has a 40px left padding, which adds unnecessary space at the left of each bullet point. With a 20px left padding it looks way better than the example below in my opinion.
- Sharlin 8y ago
  That's unfortunately the default on browsers (with the default `list-style-position: inside`). So we basically have three choices: 1. The bullets itself are indented. This is ugly and rarely what you want but for some reason the default. 2. The bullets line up with the left edge of the rest of the content; the bulletpoint text is indented, naturally. 3. The bullets are hanging; the bulletpoint text lines up with other paragraphs, as recommended in the article.
  - zzzcpan 8y ago
    Note, that the article's recommendation is wrong, we pretty much never need 3, as article suggests. We make lists for a reason, we want them to be easily distinguishable from the rest of the text. We don't want to disrupt the flow by confusing people when they read a next line and don't yet realize it's a list, because a bullet is not placed where they pay attention to. We want people to realize they are about to read a list and process it appropriately, not as a paragraph. Maybe they even want to skip it entirely for now and continue with the text below to avoid breaking context.
Stratoscope 8y ago
The second example looks terrible on my Note 8. The bullets are in the curved screen edge and actually touch the black bezel, making it look like the bezel has little protrusions encroaching into the screen.
- tenaciousDaniel 8y ago
  I'd actually say the blame here should be on the Note. It would seem fairly insane for web designers to have to consider that the margins of their pages may be on some bezeled edge.
  - Stratoscope 8y ago
    It's not the curved edge that is causing the problem. The bullets are actually partly off the actual edge of the screen and are being clipped. If I rotate the device to landscape mode, then the page adds some margin and the bullets aren't clipped any more. I didn't look at the page source in detail - perhaps it is using some kind of media query on the width and reducing the left margin on a narrow screen. I think the real lesson here is that many of these tricks to achieve some kind of "typographical correctness" are simply a bad idea. Users don't expect it, and it's very likely to break on some device you haven't tested. People who view your page aren't looking for typographical correctness. They are looking for something easy to read that is familiar and comfortable and works on whatever device they happen to be using. The more tricks you put in, the less likely you are to achieve that. And honestly, some of this just seems weird, even for print. I don't read much on paper any more, it's all phone/PC/Kindle. But I just thumbed through a bunch of my old books, and none of them follow the "correct" conventions. Bullet lists, (a) (b) (c) lists, and 1. 2. 3. lists are all indented much like the default web formatting. They don't outdent a quote mark at the beginning of a paragraph, the quote mark just appears in the first column like any other character. I don't know where the author got these ideas about "correctness", because I sure don't see it in my professionally typeset books.
  - hunter2_ 8y ago
    In Chrome, open the dev tools, click the Device Toolbar button near the top left, and in said toolbar set it to Responsive and play with the viewport width (or set it to iPhone 5). It's this particular example page at fault for not realizing that "list-style-position: outside" means that it _will_ overflow which means that for said overflow to not fall outside the viewport, you need a container (which in the case is the body element) having some absolute (not relative to the viewport like this example's small percentage) padding/margin at least as large as the overflow. A properly executed version of the hanging technique would do exactly that.

I also thought so (about hanging bullet points), but it's true that in this example: https://codepen.io/matejlatin/full/dRLRpW/ https://codepen.io/matejlatin/full/dRLRpW/ they IMO look better.

topoftheforts 8y ago

Wait, this example is different, the first list has a 40px left padding, which adds unnecessary space at the left of each bullet point. With a 20px left padding it looks way better than the example below in my opinion.

Sharlin 8y ago
That's unfortunately the default on browsers (with the default `list-style-position: inside`). So we basically have three choices: 1. The bullets itself are indented. This is ugly and rarely what you want but for some reason the default. 2. The bullets line up with the left edge of the rest of the content; the bulletpoint text is indented, naturally. 3. The bullets are hanging; the bulletpoint text lines up with other paragraphs, as recommended in the article.
- zzzcpan 8y ago
  Note, that the article's recommendation is wrong, we pretty much never need 3, as article suggests. We make lists for a reason, we want them to be easily distinguishable from the rest of the text. We don't want to disrupt the flow by confusing people when they read a next line and don't yet realize it's a list, because a bullet is not placed where they pay attention to. We want people to realize they are about to read a list and process it appropriately, not as a paragraph. Maybe they even want to skip it entirely for now and continue with the text below to avoid breaking context.

Stratoscope 8y ago

The second example looks terrible on my Note 8. The bullets are in the curved screen edge and actually touch the black bezel, making it look like the bezel has little protrusions encroaching into the screen.

tenaciousDaniel 8y ago
I'd actually say the blame here should be on the Note. It would seem fairly insane for web designers to have to consider that the margins of their pages may be on some bezeled edge.
- Stratoscope 8y ago
  It's not the curved edge that is causing the problem. The bullets are actually partly off the actual edge of the screen and are being clipped. If I rotate the device to landscape mode, then the page adds some margin and the bullets aren't clipped any more. I didn't look at the page source in detail - perhaps it is using some kind of media query on the width and reducing the left margin on a narrow screen. I think the real lesson here is that many of these tricks to achieve some kind of "typographical correctness" are simply a bad idea. Users don't expect it, and it's very likely to break on some device you haven't tested. People who view your page aren't looking for typographical correctness. They are looking for something easy to read that is familiar and comfortable and works on whatever device they happen to be using. The more tricks you put in, the less likely you are to achieve that. And honestly, some of this just seems weird, even for print. I don't read much on paper any more, it's all phone/PC/Kindle. But I just thumbed through a bunch of my old books, and none of them follow the "correct" conventions. Bullet lists, (a) (b) (c) lists, and 1. 2. 3. lists are all indented much like the default web formatting. They don't outdent a quote mark at the beginning of a paragraph, the quote mark just appears in the first column like any other character. I don't know where the author got these ideas about "correctness", because I sure don't see it in my professionally typeset books.
- hunter2_ 8y ago
  In Chrome, open the dev tools, click the Device Toolbar button near the top left, and in said toolbar set it to Responsive and play with the viewport width (or set it to iPhone 5). It's this particular example page at fault for not realizing that "list-style-position: outside" means that it _will_ overflow which means that for said overflow to not fall outside the viewport, you need a container (which in the case is the body element) having some absolute (not relative to the viewport like this example's small percentage) padding/margin at least as large as the overflow. A properly executed version of the hanging technique would do exactly that.