[HN Gopher] Typeset: An HTML pre-processor for web typography
___________________________________________________________________
Typeset: An HTML pre-processor for web typography
Author : todsacerdoti
Score : 114 points
Date : 2024-10-27 05:12 UTC (17 hours ago)
(HTM) web link (typeset.lllllllllllllllll.com)
(TXT) w3m dump (typeset.lllllllllllllllll.com)
| jdnsndnjd wrote:
| Ironic that the website is unreadable on mobile due to improper
| flow
| thangngoc89 wrote:
| The correct term would be non-responsive. I think if the second
| column be moved to the bottom, it would be hard to read on
| mobile.
| knallfrosch wrote:
| My iOS/Safari on a 13 mini detects bad CSS immediately.
|
| You can easily tell some sites are unresponsive or Chrome-only.
| pglevy wrote:
| Have to agree. With as much reading that's done on small
| screens these days, I find it discouraging that a project about
| good web typography looks broken on my phone.
|
| I see adapting parameters like size, measure, and line height
| to different screen sizes (and the related reading distances)
| as one of the main challenges of web typography.
|
| Not as sophisticated of a project but I've tinkered with a
| stylesheet to address some of these issues here:
| https://pglevy.github.io/typeset.css/
| drawfloat wrote:
| I see this dates back a decade, which makes sense given this is
| now achievable in modern CSS without a preprocessor.
| nicbou wrote:
| Not quite. Hyphenation is rather unreliable in my experience.
| dietr1ch wrote:
| Yeah, last time I experimented with it `hyphens: auto;` and
| `word-break: auto-phrase;` were simply not ready to try even
| in beta/nightly browsers.
|
| - https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
|
| - https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
| nicbou wrote:
| In my case, it really struggled with over-hyphenation when
| a line break would be completely fine.
| 8bitsrule wrote:
| Achievable, I suppose. But 10yo CSS is a big-enough PITA that,
| if the machine can learn to do it, it should.
| red_trumpet wrote:
| Support for ``hanging-punctuation`` is not there yet.
| coolio1232 wrote:
| Sorry if I'm sounding harsh, but do people aside from hardcore
| typographists really care about this and similar font/text
| tweaking projects? I felt no noticeable difference in readability
| in either of the modes and for a second I even thought the before
| example is the "better" version they are advertising because it
| felt more streamlined in my eyes.
|
| Maybe this might help people with dyslexia but don't proper
| dyslexia focused fonts and aids exist already?
| ianstormtaylor wrote:
| One way to gain a different perspective could be to ask a
| similar question, but replace typographic adjustments with
| something in your domain of expertise that requires deeper
| experience to see the value in. Assuming programming, it might
| be things like linting, refactoring, testing, version
| controlling, etc.
| coolio1232 wrote:
| Linting, refactoring and testing all have obvious benifits
| for anyone who has done any small to medium sized project and
| has had to rewrite and debug some amount of code, even if
| they don't know the concepts by name. Even version contolling
| is ubiquitous in almost any entry-level programming job, even
| if it wasn't before.
|
| Most people who have made a website with CSS before would at
| best change the font size, the line spacing and the font face
| and tweak it to a point that feels easily readable and call
| it a day. Introducing variable widths between the characters
| of the font, digraphs and so on feels like more like
| exercising artisanship that only the experts would see value
| in rather than solving a technical problem.
|
| Perhaps advanced web design/typesetting is the main
| application of this and it has a chance of inducing a better
| subconscious effect on the viewer. Sort of how magazines and
| books were designed back in the day I suppose.
| miunau wrote:
| You missed the point entirely. This is basic stuff that all
| designers work with.
| flir wrote:
| > feels like more like exercising artisanship that only the
| experts would see value in
|
| Same as linting and refactoring, then.
| bryanrasmussen wrote:
| >Linting, refactoring and testing all have obvious benifits
| for anyone who has done any small to medium sized project
| and has had to rewrite and debug some amount of code, even
| if they don't know the concepts by name
|
| I'm curious but have you ever heard of anyone that works as
| a programmer that has not been especially keen on linting
| and testing (as in automated testing)?
|
| I thought that examples of not being overly keen were quite
| abundant.
|
| And it is often lamented on this site about how much work
| it is to get even people who have made a small to medium
| sized project and have the word programmer or developer in
| their job title to actually want to do linting and testing.
|
| So what I'm saying is that at least for linting and testing
| yes, these really might seem like
|
| >exercising artisanship that only the experts would see
| value in rather than solving a technical problem.
| turnsout wrote:
| Yeah, I've been coding for 30 years, and _to me,_ linting
| seems like alphabetizing the tools on your peg board.
| There are plenty of times where I want to break an
| expression into multiple lines--or not--in the service of
| readability. And there are no clear rules I could dictate
| to codify how I make that call.
|
| I get that it helps people who are collaborating on large
| codebases. But to me, typography is orders of magnitude
| more important, because it's facing the end-user.
| chiefalchemist wrote:
| And the answer is still no. Users / visitors don't care. We
| keep writing tools for ourselves and products, UIs, UXs, etc.
| *from the user's POV* aren't any better.
|
| No one wakes up in the morning, looks in the mirror, and
| says, "I want to use an application build with React, has no
| tech debt, and has great commit msgs...".
|
| I'm not suggesting the tech and stack don't matter. They do.
| But they are a means, not the ends. The sad fact is, the ends
| aren't - from the users' POV - noticeably better. More
| bloated? More buggy? Probably.
| camillomiller wrote:
| As a Web Typography fan and practitioner of good typographic
| web standards the answer is no. You're right. This stuff is
| cruft. Displays are fundamentally different from paper, and it
| is OK that we don't transfer every typographic standard 1-to-1.
| miunau wrote:
| You can print things off the web.
| peebeebee wrote:
| Think of the trees! ;)
| spookie wrote:
| People have been dealing with garbage word processor programs,
| publishing editors, and even doing documents in vector graphics
| editors. Imagine using an editor that just uses HTML + CSS
| under the hood, it's not that far from proprietary XML formats.
| If these features were standard, one could create such an
| editor and allow its output to be viewed everywhere.
|
| Besides, I think this is cool. Someone saw a problem and solved
| it. I think it looks better too. Now, if only italics were
| properly spaced from normal text... but that's available in
| CSS.
| ecuaflo wrote:
| I don't know much about typography but was schooled to be a
| grammar perfectionist, and this seems great to me. It'd
| probably help out machine translators too.
| abyssin wrote:
| I was a hardcore book reader in the first part of my life, and
| reading on the web keeps hurting my eyes. Every typography
| mistake triggers me the same way a grammar one does. I'd love
| to have such a tool to fix typography on the fly for every
| webpage, including in French.
| TrevorAustin wrote:
| I tell my web development students that typography is
| Lovecraftian cursed knowledge. You can't delve too deep, or
| it will drive you mad.
| lemonberry wrote:
| My opinion: there are some objective truths about typography
| and readability. But some people push beyond the objective and
| try to enforce their personal preferences on the others as if
| they're fact.
| dimal wrote:
| I'm autistic and find that well crafted typography helps me to
| read things more easily with less distraction. It's not just
| dyslexics who might struggle with bad typography. I also know
| some ADHD people with similar issues to me. And 20% of the
| population is highly sensitive. I'm not saying it would matter
| for all of them, but for some, it surely does.
|
| Whether this tool makes it "better" is another question. I tend
| to think there are general rules for "better" typography but
| when you get to the details, it depends on the individual and
| how they perceive and process information. One friend who is
| ADHD likes very cramped text which looks jumbled and messy to
| me, making it difficult to pick out individual letters. If the
| before case looks better for you, that's a valid criticism.
| sgc wrote:
| I am by no means a typography expert, nor is it a major focus
| of mine. I have however spent a lot of time reading non-
| technical prose, and I had a visceral reaction to your comment
| because of how wrong it seemed. To me the after is so obviously
| better it struck me as though you were somebody who had never
| done much deep reading and mainly consumes code or short-form
| text.
|
| Now, I am completely aware there is nothing behind this other
| than my visceral reaction. I do not know you at all. I share it
| only to communicate that to somebody with my background it is
| an obvious and fundamental improvement.
| morpheuskafka wrote:
| The most noticeable change is the substitution of " for ",
| which doesn't require this package--this package just does it
| for you instead of you actually changing the character in the
| HTML text. (The more interesting parts of the package are some
| alignment and spacing stuff that is less noticeable.)
|
| If you work with monospace terminal/code/markup a lot, you are
| probably very used to seeing " . But it is definitely well
| established that " is appropriate for human text, Word has
| automatically corrected this for many years.
| pfortuny wrote:
| Ask yourself: do people really care about rounded corners in
| furniture? Do people really care about flowers in their
| balconies? Do people really care about keeping their car
| polished and clean? ...
| Closi wrote:
| I suspect this isn't about making something look 10% better -
| it's about making something look 0.1% better in some
| circumstances.
|
| Which is totally great! The world needs lots of 0.1%
| improvements because 100's of them can add up to make something
| look or feel better when applied at the right time in the right
| way.
| dietr1ch wrote:
| I'm not into fonts, but reading anything on the web sucks after
| you get used to LaTeX. - Justification is not
| there and it just looks bad. - Paragraph width is
| arbitrary, which makes reading some emails (from folks who
| apparently think the earth is not only flat, but 1D) awful to
| read. I'm shown a 2000px+ wide, 60+ word line for a message.
| - Long words or non-English destroy line breaks and lines break
| at odd places. - There's widows and orphans around. I
| think I didn't even saw this one until I was told to fix my
| stuff during peer review, but now I see it everywhere and it
| only took a couple minutes to explain the issue and kind of
| ruin me. - Non-english keeps breaking the web. -
| Probably not just on typography, but many websites are still
| unable to deal with not so special characters like a, a, a o,
| PS and you get to read gibberish.
| mvdtnz wrote:
| I'm with you. This makes zero difference to me.
| dngit wrote:
| Now, it's been a very long time since I see a mention of
| "Internet Explore 5". Kudos for highlighting the support for it
| but does it matter, who in the world are still using Internet
| Explorer 5?
| swiftcoder wrote:
| The website is nearly a decade old. presumably folks did still
| care about IE5 in that time period.
| nick__m wrote:
| A decade ago (2014) IE5 was completely dead. Some people were
| still force to care about IE6 but it was marginal. The
| default browser from that period was IE9 !
| ninalanyon wrote:
| The most annoying thing about the page is that the before and
| after are not presented side by side making it difficult to see
| all the changes at once.
| hexo wrote:
| Web "typography" is so awful I had to disallow web fonts a long
| time ago. Now its time to write some greasemonkey lube to fix
| line heights and font weights, as thin fonts are nonreadable and
| finally somehow fix gray text low-contrast nonsense.
| nosioptar wrote:
| I really like the Stylus plugin for that. I think it takes a
| bit less effort than changing CSS with greasemonkey.
| kibibu wrote:
| Be aware that this appears by default to swap character pairs
| with unicode ligatures, which is fine, but those characters
| aren't included in many web fonts.
|
| It's better today (both for the above issue and also for
| usability) to disable the ligature substitution and let browser
| engines manage ligature replacement.
| starkparker wrote:
| This also breaks naive/literal search. For an example, copy and
| paste the "After" text into VSCode and try to search for
| "taking", "coladas", or "Exhibits". It won't match because of
| the ligatures.
|
| Browser search can typically parse Unicode ligatures, so it's
| not a huge usability problem. But saving, copying, or scraping
| the output and using tools that don't process ligatures into
| their component letters will fail.
|
| This also (very slightly, but still notably) abuses empty
| contentless <span>s to inject space through CSS margins.
|
| Also, the attempt to brute-force small caps by applying a font
| subset via a span doesn't work at all for me, in either Chrome
| or Firefox.
|
| It's a good effort, but I also can't think of a use case where
| the result is worth what this does to the markup.
| v1ne wrote:
| Nice to see we're getting there again and that people care about
| typography.
|
| Yet, the optical margin correction looks mechanistic and only
| concerned with symbols, not with characters: The "Y" at the start
| of the first line doesn't move a bit, even though it's clearly
| optically too light on the left. The next three lines all start
| optically pretty heavy with a bar. So I'd nudge to "Y" to the
| left.
|
| I think it's just a pity that LaTeX with microtype is still the
| pinnacle of automatic typesetting, after all these years. I
| really enjoy good typography, but the Web, App and even Desktop
| world seems not to care about such details, apart from a few
| programs like Ableton.
| throw_pm23 wrote:
| Also the " in the second paragraph feels a bit too far out to
| me, microtype does these things more subtly a bit.
| taikon wrote:
| I think this package can reduce readability. The content under
| Before looked better than the After to me. For example, it
| changes the word "duplex" to "du-plex" split over two lines,
| which is less readable.
| JadeNB wrote:
| > I think it's just a pity that LaTeX with microtype is still
| the pinnacle of automatic typesetting, after all these years. I
| really enjoy good typography, but the Web, App and even Desktop
| world seems not to care about such details, apart from a few
| programs like Ableton.
|
| I have only a tyro's appreciation for typography, so please
| forgive my uninformed question. Is it a pity that
| LaTeX+microtype is the pinnacle of automatic typesetting
| because it's not good enough, or because it's non-web-focused
| and there is no web analogue of equivalent quality?
| thangalin wrote:
| > Desktop world seems not to care about such details
|
| My free, open-source, desktop text editor, KeenWrite,
| integrates my quote curling typographic library, KeenQuotes.
| KeenQuotes curls straight single quotes, double quotes, swaps
| in the multiplication symbol, corrects low opening double
| quotes (,,), and handles numeric primes, all while respecting
| code blocks. KeenWrite replaces some ligatures, but proper
| ligatures need to account for etymology, which has no simple
| solution. (Aside, even curling straight quotation marks
| properly requires part-of-speech processing.)
|
| KeenWrite[1] exports to text, XHTML, or PDF files.
| Architecturally, the XHTML format doubles as an XML format that
| is passed to ConTeXt[2] for typesetting into PDF. ConTeXt
| developers care deeply about typography.
|
| [1]: https://keenwrite.com/
|
| [2]: https://contextgarden.net/
| PaulDavisThe1st wrote:
| What does "Ableton" (which is a company that makes a piece of
| software called "Live" among other things) do with typography
| on the desktop?
| pier25 wrote:
| There's a bug on mobile (Android). For some reason the page is
| twice a wide as it needs to be.
|
| Edit: I missed that on the top of the page there's an example
| section on a second column which is not responsive.
| gr4vityWall wrote:
| I feel bad that, after looking at the Before/After comparison, it
| wasn't clear to me which one looked better to my eyes.
|
| But I wouldn't mind having such a feature built-in in browsers if
| it brings value to other people.
| WillAdams wrote:
| Any prospect of getting this into an ePub reader?
|
| They are ripe for any sort of typographic improvement --- the
| only things which keep me reading on my Kindle are the
| convenience and the ability to report errors.
___________________________________________________________________
(page generated 2024-10-27 23:01 UTC)