0 users browsing Programming. | 1 guest  
Main » Programming » Typesetter.css, make semantic HTML readable
Pages: 1 2 Next Last
Posted on 19-08-16, 08:11
Full mod

Post: #319 of 408
Since: 10-30-18

Last post: 5 days
Last view: 1 day
A long time ago, I read Robert Bringhurst's Elements of Typographic Style, and decided to make a CSS style-sheet that would try to implement as many of his recommendations as possible - limited line lengths, a consistent vertical rhythm, that kind of thing. Recently, while watching byuu jump through hoops to make his website mobile-friendly, I decided to test out *my* stylesheet and discovered it needed a bit of tweaking.

Tweaking now complete, I decided to try out GitLab pages so it would have a website, and here it is: https://screwtapello.gitlab.io/typesetter-css/

The ending of the words is ALMSIVI.
Posted on 19-08-16, 15:36
Post: #75 of 144
Since: 11-01-18

Last post: 4 days
Last view: 1 hour
that background color god awful.
Posted on 19-08-17, 14:38
Stirrer of Shit
Post: #578 of 717
Since: 01-26-19

Last post: 163 days
Last view: 162 days
that background color real nice.

I like the touch of using complementary colors for the text. However, it might be worth keeping in mind that pure black on white performs best in A/B testing. Likewise, ~100ch is evolutionarily superior, and line height doesn't matter.

Isn't the point of indenting paragraphs that you don't need the space between them? The books I have generally tend to do one or the other. Otherwise, I think it looks a bit wonky when some of the one-line paragraphs are indented, and some aren't:
That's right, both of them.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing
augue congue id pretium lectus molestie. Proin quis dictum nisl.

Let's get a definition list up in this joint.

If you want 60 chars of width, you can specify width as 60ch. I don't know what the precise benefits are, though.

What's the point of the horizontal lines? It makes it look like one of those pages which try to look 'handwritten'. It looks horrible, to be honest. It also makes it impossible to do (compact) footnotes with small text, because the line width is forced to be the same everywhere.

Compare these two, for instance:
Nor again is there anyone who loves or pursues or desires to obtain
pain of itself, because it is pain, but occasionally circumstances occur in
which toil and pain can procure him some great pleasure. To take a trivial
example, which of us ever undertakes laborious physical exercise, except to
obtain some advantage from it? But who has any right to find fault with a
man who chooses to enjoy a pleasure that has no annoying consequences, or
one who avoids a pain that produces no resultant pleasure?


Nor again is there anyone who loves or pursues or desires to obtain.
pain of itself, because it is pain, but occasionally circumstances occur in.
which toil and pain can procure him some great pleasure. To take a trivial.
example, which of us ever undertakes laborious physical exercise, except to.
obtain some advantage from it? But who has any right to find fault with a.
man who chooses to enjoy a pleasure that has no annoying consequences, or.
one who avoids a pain that produces no resultant pleasure?.



There was a certain photograph about which you had a hallucination. You believed that you had actually held it in your hands. It was a photograph something like this.
Posted on 19-08-17, 16:01
Post: #76 of 144
Since: 11-01-18

Last post: 4 days
Last view: 1 hour
Posted by sureanem

What's the point of the horizontal lines?



The stripes in the background are to check the vertical rhythm, and are not part of the Typesetter stylesheet proper. You can toggle them on and off.
Posted on 19-08-18, 01:22

Post: #48 of 49
Since: 10-29-18

Last post: 301 days
Last view: 186 days
The demo hits some of my web dev AND web design buttons, good stuff dude!
Posted on 19-08-18, 07:55
Stirrer of Shit
Post: #582 of 717
Since: 01-26-19

Last post: 163 days
Last view: 162 days
Posted by funkyass
Posted by sureanem

What's the point of the horizontal lines?



The stripes in the background are to check the vertical rhythm, and are not part of the Typesetter stylesheet proper. You can toggle them on and off.

Oops, that's a bit embarrassing.

What about bigger text? Both of the readability-focused websites I read, Bloomberg and Gwern.net, tend to be quite a bit bigger than default. Not sure by how much though, since a pixel isn't always a pixel in web design terms.



There was a certain photograph about which you had a hallucination. You believed that you had actually held it in your hands. It was a photograph something like this.
Posted on 19-08-19, 06:42

Post: #188 of 278
Since: 10-29-18

Last post: 9 days
Last view: 3 hours
Custom typefaces: There's lots of typefaces I like, but there's no way to know which would go best with which document

I think we can safely exclude this one...

My current setup: Super Famicom ("2/1/3" SNS-CPU-1CHIP-02) → SCART → OSSC → StarTech USB3HDCAP → AmaRecTV 3.10
Posted on 19-08-19, 08:39
Full mod

Post: #323 of 408
Since: 10-30-18

Last post: 5 days
Last view: 1 day
Posted by funkyass
that background color god awful.

Harsh.

I was trying to go for contrast without being boring and monochromatic, so I picked a nice, pale yellow. If there's some reputably-recommended readable colour-scheme I'm interested, but honestly, there's a reason I put all the colouring in a separate CSS file. For my own site, I just went with Solarized because that's my go-to answer for anything colour-scheme related.

Posted by sureanem
However, it might be worth keeping in mind that pure black on white performs best in A/B testing.

It's nice to see people putting effort into measuring such things, but if I read the first bit of that page correctly, "success" means "the user stayed on the page for at least 40 seconds. I'm sure they're accurately measuring *something*, but I'm not sure it's a metric I personally care about.

Isn't the point of indenting paragraphs that you don't need the space between them?

Yeah, somebody else mentioned that. I'll definitely change it.

If you want 60 chars of width, you can specify width as 60ch.

According to MDN, 1ch is the width of the 0 glyph, so measuring line-length in ch is nearly as arbitrary as measuring it in em. The book I'm cribbing from says "On a conventional book page, the measure, or length of line, is usually around 30 times the size of the type", so that's why I use the em unit.

It also makes it impossible to do (compact) footnotes with small text, because the line width is forced to be the same everywhere.

I assume by "width" you mean "height". Keeping a consistent line-height is very deliberate, and is the main thing I wanted to achieve when I set out - text feels more consistent with a vertical rhythm, and less like a bunch of separate blocks pasted together.

The book I'm working from is very consistent about vertical rhythm in the main body, but it does use a smaller line-height for footnotes (at the bottom of the page) and side-notes (in the left or right margins). Unfortunately, HTML doesn't really have footnotes as such, and although I use the HTML5 <aside> for side-notes, if the browser is narrow enough they get folded back into the main body. I'll think about using a smaller line-height for side-notes that actually appear on the side, but I'll tackle paragraph spacing first.

Posted by sureanem
What about bigger text?

Unlike the default background and foreground colors, it's actually quite practical for a user to change their default font-size without breaking web-pages, so I respect that instead of trying to choose something myself.

The ending of the words is ALMSIVI.
Posted on 19-08-19, 09:03
Custom title here

Post: #647 of 890
Since: 10-30-18

Last post: 4 days
Last view: 14 hours
Re: indenting vs blank line...
I happen to actually like the combination of both for large paragraphs.

--- In UTF-16, where available. ---
Posted on 19-08-19, 09:51

Post: #79 of 100
Since: 10-30-18

Last post: 182 days
Last view: 23 days
Blank line plus REVERSE indentation. Fight me.
Posted on 19-08-19, 16:45
Stirrer of Shit
Post: #585 of 717
Since: 01-26-19

Last post: 163 days
Last view: 162 days
Posted by Screwtape
I was trying to go for contrast without being boring and monochromatic, so I picked a nice, pale yellow. If there's some reputably-recommended readable colour-scheme I'm interested, but honestly, there's a reason I put all the colouring in a separate CSS file. For my own site, I just went with Solarized because that's my go-to answer for anything colour-scheme related.

How about black (dark gray) on (light) salmon, like business newspapers?

The Financial Times use #33302e / #fff1e5. That looks very nice, I think, although it shouldn't be ideal - reddish text on salmon background isn't exactly optimal from what I gather.

The blue in your page (#333350 / #fffcf0) is a bit overpowering, I also think. You should almost be able to use color theory to pick FG color given BG color, or vice versa. Keep in mind to use a 'corrected' model like CIE. How dark is a judgement call though. But if you use FT's BG color, and pick the color opposite on the corrected color wheel with the same lightness as their foreground color, that suggests #25323b should be a good choice for them. For you, #33363f in the same manner.

I have no way of testing this, since I'm using an extremely poorly calibrated TN panel. It does look a bit less blue, that's my only observation.

Perhaps if you wanted to avoid picking a foreground color as well, maybe you could use the Pantone definition of salmon, although it seems really dark and saturated.

It's nice to see people putting effort into measuring such things, but if I read the first bit of that page correctly, "success" means "the user stayed on the page for at least 40 seconds. I'm sure they're accurately measuring *something*, but I'm not sure it's a metric I personally care about.

I think it's all the same. If people stay longer, they stay longer. But it's definitely a bit crude.

He did do better testing with the ad blocking experiments, when he split the days up semi-randomly and measured traffic - this also takes into account increases in the virality, returning traffic, etc.

It's a shame there isn't a more 'scientific' approach to this - we do have A/B testing, but rarely with results made public.

Yeah, somebody else mentioned [paragraph indent/spacing]. I'll definitely change it.

Which one will you get rid of?

I assume by "width" you mean "height". Keeping a consistent line-height is very deliberate, and is the main thing I wanted to achieve when I set out - text feels more consistent with a vertical rhythm, and less like a bunch of separate blocks pasted together.

Fair enough.

The book I'm working from is very consistent about vertical rhythm in the main body, but it does use a smaller line-height for footnotes (at the bottom of the page) and side-notes (in the left or right margins). Unfortunately, HTML doesn't really have footnotes as such, and although I use the HTML5 <aside> for side-notes, if the browser is narrow enough they get folded back into the main body. I'll think about using a smaller line-height for side-notes that actually appear on the side, but I'll tackle paragraph spacing first.

It has smaller text, though. Some books put paragraphs of lesser importance in smaller text, without demoting them to footnotes per se.

The book I am reading right now usually has 37 lines/page, but 41 for translator footnotes, comments, inline footnotes, and paragraphs of lesser importance. The relative line heights look to be about the same, so the font size should differ by around 10%.
Posted by wareya
Blank line plus REVERSE indentation. Fight me.

This looks OK, but it's a bit inefficient. Imagine indent for (almost) each line, that's a lot of wasted space.

There was a certain photograph about which you had a hallucination. You believed that you had actually held it in your hands. It was a photograph something like this.
Posted on 19-08-19, 17:09

Post: #112 of 163
Since: 10-30-18

Last post: 12 days
Last view: 4 hours
Posted by sureanem
I'm using an extremely poorly calibrated TN panel.

Then you have absolutely no credibility.

Seriously, though, if you're not on a laptop (in which case, throw it away), you can get a decent 24" IPS monitor for ~100 USD now, all thanks to overproduction. TN doesn't even have better motion clarity anymore.
Posted on 19-08-19, 20:28
Stirrer of Shit
Post: #588 of 717
Since: 01-26-19

Last post: 163 days
Last view: 162 days
It does everything else I want, so why bother? Only gripe is that the RAM is a bit thin, but I don't think 4GB of laptop RAM is too expensive anyway.

I have tried IPS monitors, and I couldn't tell a difference to my (much nicer) 1080p TN monitor. Personally, I think they're overrated, just like SSDs. For desktop use, a nice cable (the one I have now is too low-resolution) is on the shopping list, eventually.

Why don't you take your expensive monitor and verify whether that color scheme looks better instead?

There was a certain photograph about which you had a hallucination. You believed that you had actually held it in your hands. It was a photograph something like this.
Posted on 19-08-19, 21:18
Post: #78 of 144
Since: 11-01-18

Last post: 4 days
Last view: 1 hour
Posted by sureanem
For desktop use, a nice cable (the one I have now is too low-resolution) is on the shopping list, eventually.


Posted on 19-08-19, 21:29

Post: #189 of 278
Since: 10-29-18

Last post: 9 days
Last view: 3 hours
Posted by sureanem
overrated, just like SSDs

......

My current setup: Super Famicom ("2/1/3" SNS-CPU-1CHIP-02) → SCART → OSSC → StarTech USB3HDCAP → AmaRecTV 3.10
Posted on 19-08-19, 21:38

Post: #113 of 163
Since: 10-30-18

Last post: 12 days
Last view: 4 hours
Posted by sureanem
Personally, I think they're overrated, just like SSDs.

Say what!? Now I know you're trolling. If there's one advancement in computing that isn't overblown it's SSDs. The performance difference from less latency in random access is very significant. On top of that they don't make noise, consume less power, and aren't susceptible to head crashes.

I wouldn't seriously throw a laptop away, but IPS and VA are objectively better than TN. It's perfectly fine if the difference just doesn't seem like a big deal to you, personally. To each his own.

Posted by funkyass


Ditto.
Posted on 19-08-19, 22:23
Stirrer of Shit
Post: #589 of 717
Since: 01-26-19

Last post: 163 days
Last view: 162 days
Posted by BearOso
Say what!? Now I know you're trolling. If there's one advancement in computing that isn't overblown it's SSDs. The performance difference from less latency in random access is very significant. On top of that they don't make noise, consume less power, and aren't susceptible to head crashes.

They're also more expensive, which is the #1 determinant of anything and by default makes them far inferior to regular hard drives.
Performance is fine with HDD, and noise is easily dwarfed by anything else (e.g. CPU fan). Power is never an issue.
Also, they have creepy chips inside them. Who knows if you can trust them? Granted, I use FDE, but it's still creepy.
I do have one inside my laptop and it works fine, but it's bloody tiny. For that price you could have a 1TB HDD, which is far more useful.
(inb4 "why not both" - I don't have infinity dollars)

I wouldn't seriously throw a laptop away, but IPS and VA are objectively better than TN. It's perfectly fine if the difference just doesn't seem like a big deal to you, personally. To each his own.

Yeah, if I had infinite time and money I would obviously buy an IPS monitor - I don't play video games much anymore, so the downsides are negligible. But at present, it feels like an utter non-issue which brings no tangible value to the table, unlike mechanical keyboards and good mice which are at least nicer to use. Although touchpads are fine when you get used to them.

Posted by funkyass
[Image of Fry squinting]
Ditto.

I have a monitor, it has DVI (both kinds) and HDMI ports. HDMI port was broken since I bought it - could have RMA'd, but I was only interested in DVI anyway. Laptop has VGA and HDMI out. Had another monitor too, a smaller VGA one. So I got a VGA <-> VGA cable, but it turned out to be too low-resolution for that one too. I'm not even sure if it works with the DVI adapter, I think I tried it and there was some sort of issue. So I'd need a DVI <-> HDMI adapter, or a better VGA cable.

To be honest, I feel kind of like Jack here. When you buy computer hardware, you tell yourself, that’s it. That’s the last GPU I’ll need. Whatever else happens, got that GPU problem handled. I had it all. I had a monitor that was very decent. A Steam library that was getting very respectable. I was close to being complete.

There was a certain photograph about which you had a hallucination. You believed that you had actually held it in your hands. It was a photograph something like this.
Posted on 19-08-20, 00:23
Post: #79 of 144
Since: 11-01-18

Last post: 4 days
Last view: 1 hour
The video part of HDMI is dvi.
Posted on 19-08-20, 06:41 (revision 1)

Post: #190 of 278
Since: 10-29-18

Last post: 9 days
Last view: 3 hours
Posted by sureanem
They're also more expensive, which is the #1 determinant of anything

Except for people who have the cash and want a faster system.
- The SSD in the PC I'm currently at has an access time of 0.225ms.
- A SSD in another PC has an access time of 0.095ms.
- A HDD in yet another PC has an access time of 13.9ms (146 times slower than the SSD).
- An external HDD (via USB2) has an access time of 17.6ms (185 times slower than the SSD).

Posted by sureanem
and by default makes them far inferior to regular hard drives

Except that I have literally given old office machines an 'extra life' by installing a SSD. And no, they don't need more that 128GB of space. (Even 64 would've been enough, though maybe a bit tight after a while.)

Posted by sureanem
Performance is fine with HDD

Except for access times. (Perhaps you have a SSHD and just don't know any better?)

Posted by sureanem
noise is easily dwarfed by anything else (e.g. CPU fan)

Except for systems like my home PC that doesn't have any fan activity (CPU, GPUs, PSU) in idle. (I also have two 10TB drives in my home NAS; they're easily more audible when they're not parked than the fan.)

Posted by sureanem
Power is never an issue

Except in laptops.

Posted by sureanem
Also, they have creepy chips inside them. Who knows if you can trust them?

lol what

My current setup: Super Famicom ("2/1/3" SNS-CPU-1CHIP-02) → SCART → OSSC → StarTech USB3HDCAP → AmaRecTV 3.10
Posted on 19-08-20, 07:46 (revision 1)
Custom title here

Post: #648 of 890
Since: 10-30-18

Last post: 4 days
Last view: 14 hours
I think he's saying that flash drives are full of spyware and ratting him out to the KGB.

The problem, of course, is that there is KNOWN spyware for ARM-based hard disks and as of yet no known flash drive spyware, so he's trading an unknown security fear for a known security risk.

--- In UTF-16, where available. ---
Pages: 1 2 Next Last
Main » Programming » Typesetter.css, make semantic HTML readable
Yes, it's an ad.