Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

With a little formatting to make it feel like a fiction book, the writing style works much better for me: https://imgur.com/a/5R3x2BL

Love the article and the writing style!

  /* CSS changes for fiction book style: */

  .postbody p::first-letter {
    margin-left: 18px;    
  }

  .postbody p {
    text-align: justify;  
    hyphens: auto;  
    line-height: 29px;  
    font-family: Georgia;  
    max-width: 683px;  
    margin-top: 1px; 
    margin-bottom: 0px;
  }


Feedback on the specific CSS techniques employed:

• Instead of `.postbody p::first-letter { margin-left: 18px }`, probably use `.postbody p { text-indent: 18px }`. (Admittedly text-indent has the downside that it is inherited by any block or inline-block children, so caution is required. Y’know, maybe in the general case ::first-letter margin-inline-start is actually handier when you’re deliberately just applying it to paragraphs, so you don’t need to worry about potential block children or inserting a `p > * { text-indent: 0 }`.)

• `hyphens: auto` will generally do nothing unless the document declares its language (which this one doesn’t), e.g. <html lang="en">. As for whether you want it anyway… eh; greedy line-breaking (which is all that any browser implements at this time) and hyphenation don’t go particularly well together, you end up with significant quantities of gratuitous and unhelpful hyphenation.

• `font-family: Georgia` is unwise, as you can’t depend on people having Georgia. (Windows should, but other platforms probably won’t, though some may alias it.) You should certainly include a fallback of `serif`. (And in this specific case, the site is already using a serif, is Georgia even worth changing to?)

• Some of the numbers are a bit odd, but I’m guessing that’s because you just implemented it in dev tools and copied it verbatim. Me, I’d use em for the text-indent (and a larger value, at that, probably 1.2–1.4em), unitless for line-height (e.g. 1.5, which is a smidgeon more), em for max-width (though if the whim took me, I might devolve to ch occasionally), and 0 for margin-top and margin-bottom (or possibly 0.5em—half a line or so actually works quite nicely on a scrolling-based medium, though I wouldn’t do it on a paginated screen or any but the thickest double-sided paper).


margin-inline-start is very cool and something I didn't know about! It seems to be specifically designed for this prose-style paragraph-indentation use case. https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inli...


Would be interesting to A/B test if this formatting reduced the number of HN complainers about brevity.


That would require multiple submissions, or a fairly comprehensive bit of API tooling :/




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: