css3 hyphens

[e12e]

Hi,

very nice work. In case I don't get around to making a pull-request -- this should probably enable css3 hyphens, in order to reduce the ragged-right on columns (and behave more like TeX/LaTeX):

https://css-tricks.com/almanac/properties/h/hyphenate/

I'd also like to see (do) some work on how the design respons to small screens -- the side-bar should collapse some how things like the Note 3. It's not immediately clear what the best way to do this is, though.

[daveliepmann]

I should make clear that while I'm in favor of reducing ragged-right, specifically mimicking TeX/LaTeX behavior is not a project goal.

What are your thoughts on text-align: justify without hyphenate?

[daveliepmann]

Putting a quote from Butterick's Practical Typography here for my own reference, emphasis mine:

Jus­ti­fi­ca­tion is a mat­ter of per­sonal pref­er­ence... Keep in mind that the jus­ti­fi­ca­tion en­gine of a word proces­sor or web browser is rudi­men­tary com­pared to that of a pro­fes­sional page-lay­out pro­gram. So if I’m mak­ing a word-proces­sor doc­u­ment or web page, I’ll al­ways left-align the text, be­cause jus­ti­fi­ca­tion can look clunky and coarse.

After some investigation I think browser support for hyphenation is still too spotty for our purposes. I'd still like to hear your thoughts.

[ghost]

There seems to be evidence to show unjustified text improves readability on the Web:

• http://www.adamsdrafting.com/justified-text-versus-ragged-right-text
• https://kaiweber.wordpress.com/2010/05/31/ragged-right-or-justified-alignment
• https://graphicdesign.stackexchange.com/a/16146
• https://encrypted.google.com/search?q=justified+vs+unjustified+text

[e12e]

First, note that the quote above uses hyphenation (jus-tification). Second, I haven't had time to look over the papers; but note that I'm talking about columns 20 ems and narrower in particular (with a collapsing side-bar the common mobile use-case isn't quite as pathological). At any rate, "newspaper"-width columns - as that's all that'll fit (physically) on a normal, non-phablet, phone.

Third, justification without hyphenation is generally strictly worse INMHO.

Fourth: not sure about support - do you mean: "chrome team refuse to support it"?

http://caniuse.com/#feat=css-hyphens

At any rate it degrades nicely?

Personally I'd prefer hyphenation (even without justification! - left-alignment looks better with hyphenation). In fact, I might recommend against justified alignment.

See also:

http://alistapart.com/article/the-look-that-says-book (note:written before css3-hyphens)

I have a bookmark of a book published in html somewhere, which uses hyphens and looks dramatically better in ff than chrome; unfortunately I can't find it right now :/

As an aside, http://alistapart.com/article/building-books-with-css3 might also be of some interest for general ideas.

[e12e]

Bah, it just occurred to me that hyphens might not do anything without justify set... which makes degration a bit more tricky.

[e12e]

Note: the quote above (as I discovered on cut-and-paste) actually uses hard-coded soft-hyphens ("rudi-men-tary com-pared") -- so could be seen as an argument for using hyphenation (in some form or other, be that hyphen.js or css3 hyphens).

I did a bit of testing, and css3 hyphens can indeed be used with regular left-alignment -- have a look in Firefox at: https://rawgit.com/e12e/f04740fd143f18ea69ef/raw/2da1b1860e6697eed3c023680874839412f4ba65/hyphen-test.html

The difference is subtle (between non-hypenated and hyphenated left-aligned text) -- but in general I prefer the one with hyphenation. And that does not really give any trouble to chrome users.

Justification+hyphenation generally also looks good and reads well -- but in that case one would probably want to only enable justified alignment for browsers that also support hyphenation. In my testing way back, js-based hyphenation was flaky -- so I'd recommend against trying to use a hyphenation shim.

[ruricolist]

JavaScript hyphenation is quite reliable and quite fast (if you use Hypher, at least). And even browsers that support CSS hyphenation vary in which languages they support hyphenation for -- so if you all do decide to go with hyphenation, JavaScript hyphenation is still necessary as a fallback.

[daveliepmann]

For the moment, I consider the ragged-right default to be an acceptable choice for Tufte CSS.

Justifying and hyphenating with CSS or JS should be considered a totally valid way to modify Tufte CSS for one's own purposes, but it is not core functionality I'm interested in supporting right now.

[ghost]

good call. :yum: