Hacker News Reader

Comment by z3t4 | Hacker News Reader

I don't agree with Hanging punctuation. I want the bullet points to be indented. Probably because that's what I'm used to. Also there's no real benefit of compact text on the web, you are not wasting paper.

View on HN

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

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.

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.

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.

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.

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.

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.

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 disagree. You always leave the edges empty or at least put non-essential information there. There are so many contexts where the edges aren't there, such as:

- print (not really applicable to the web) - projectors/TVs (my TV cuts off ~5% from each edge) - sticky notes on the edge of the monitor - anti-glare screen covers

It also feels cramped to read at the edge of the screen. I like having the negative space there to frame the text.

That's ok, it's a matter of preference and how emphasized the bullet lists need to be. I even mention this somewhere in the article.

I use bullets intentionally to break the flow. Nowadays many readers are getting tired of too long passages, and bullet points are one way to give the text visually more structure.

Yup, that's a great point. This article is based on a chapter from my book but this is chapter 6 out of 13 already. In earlier chapters, I discuss how we need to know the content, the goals of the text and what are the user's goals (read, skim, search etc.). Of course, we can't be 100% sure on their goals but we can take an educated guess based on the content we're designing with. Decisions like these should be based on that (+ personal preference of course).

> how emphasized the bullet lists need to be

Exactly. For me, the indented list emphasizes the distinct structural entity, contrasting it against the bulk of the text. This makes lists easier to recognize (especially the short ones in narrow columns, like in your example) while previewing and skimming the reading material. You mention pattern recognition at the start of the article, and this is exactly the thing that makes pattern recognition easier, for me at least. And I would prefer “practically useful” over “typographically correct” every time :-).

>And I would prefer “practically useful” over “typographically correct” every time :-).

That is a good guideline.

Spaced paragraphs are another good example of this. Apparently they "make skilled typographers cringe" but break the text up arguably more clearly, and look fine, at least to an unsophisticated rube like me.

It seems like an odd preference in the first place, though. You write "...the bullets should be hanging so they don’t disrupt the flow of the text," but isn't the point of a bullet list to disrupt the flow of text in order to focus on the individual items? Most hanging bullets I've seen have been a distraction because the content of the list is lost in the body of the text plus there's this heavy element (the bullets themselves) sticking out in the margin.

It may be what you're used to but typographers have been doing that for centuries.

Compact text is a design decision, in many but not all cases, that is unrelated to wasting paper.

Reply on news.ycombinator.com