CSS font fixes

[felipec]

A few cleanups, plus fixes for Linux systems, which don't have any of the fonts listed.

This basically adds Roboto Slab, and DejaVu Serif to the list of font-family, which makes it readable in Linux systems. Plus the fallback to sans-serif (we are not in 90s anymore).

I tested this in Arch Linux, Android 9, and Windows 10. Everything looks the same, except Arch Linux.

This fixes issue #469.

[chriscool]

which how hello world pages look like

Do you mean "which is how hello world pages look like"?

[felipec]

Do you mean "which is how hello world pages look like"?

Yeap.

[chriscool]

Thanks @felipec !

This looks good to me, but I don't know much about CSS, fonts and Windows, so if someone else could take a look especially at the "css: remove redundant font-family" commit, I would feel better about merging this.

[felipec]

There is not much to know. Basically CSS is a cascade of overriding styles (thus the name Cascading Style Sheets).

When you have two conflicting styles, CSS always picks the last one.

You can test that this way (test.html):

<style>
body { color: red; }
body { color: blue; }
</style>
<p>Hello world</p>

So, when you have a font-family rule that comes after a previous font-family rule, it will override the first one. But in the specific case of font-family, the list is a list of alternatives: Foo, Bar, Arial, Comic Sans. If Foo is not found, it will trial Bar, if bar isn't found it will try Arial, and if Arial is found it will stop there.

You can read the descripription at MDN: "Values are separated by commas to indicate that they are alternatives. The browser will select the first font in the list that is installed or that can be downloaded using a @font-face at-rule."

So there's no point in overriding Adelle, Georgia with Georgia, because if Adelle is not found, Georgia will be tried next.

Where it starts to get complex is when you add the DOM structure, for example "p" is a descendant of "body". But this doesn't change the initial analysis, if "body" has Adelle, Georgia, and "p" has Georgia, if the system doesn't have Adelle, it doesn't matter; both would resolve as Georgia.

It doesn't matter if the overriding rule for "p" is only activated for Windows systems. The result would still be Georgia.

That being said, the thing that is actually worth considering is the asterisk in the selector ".windows.chrome body *", because that means it would override the font-family of all tags. Which means even "code" or "pre" tags will show with this font (and not monospace as it was previously specified).

But I don't see this happening in practice. In Windows 10 all the code shows with monospace (for example @@ -k,l +n,m @@ TEXT). Which means this selector is not being applied.

In fact, googling about this mythical ".windows.chrome" selector, I can't find anything. So it's probably some vestigial selector that was activated with some JavaScript code. Moreover, right after that there's a ".windows.ie8" selector, IE8 was released in 2009, IE9 was released in 2011.

I tried to paint this rule red, and it didn't show in IE11 (the last and final release of IE), and it didn't show in Microsoft Edge (the one IE urges you to download). So I think it's safe to say it's not actually used.

Long story short; I'm pretty sure this is some vestigial code that doesn't do anything, and it was wrong in the first place.

[PhilipOakley]

Dumb question: Is there a way of seeing, say, a previous Git Rev News formatted using the changes to see how it looks?

[sivaraam]

Dumb question: Is there a way of seeing, say, a previous Git Rev News formatted using the changes to see how it looks?

Yeah, that should be possible if @felipec enables GitHub pages for the forked repository using the branch with the changes as the source. Alternatively, we should set-up one ourselves in our fork using a branch with the changes.

[sivaraam]

So, when you have a font-family rule that comes after a previous font-family rule, it will override the first one.

Except when some rule uses !important, in which case that "declaration overrides any other declarations". [MDN ref]

In fact, googling about this mythical ".windows.chrome" selector, I can't find anything.

I don't think Googling it is going to help given that .windows.chrome and similar are just class based CSS selectors. So, you're better-off searching in the code if there are changes for the <html> tag (the only tag that could be a parent of <body>) could ever have the .windows.chrome and similar classes added to it. I couldn't find anything that does that which is good for the change in this PR.

So it's probably some vestigial selector that was activated with some JavaScript code.

This is quite possible. I took a little dive into history and found that it's been lifted from the libgit2's CSS file in which it seems to be present ever since the initial commit in that repo.

To conclude, I also believe there's no harm with removing the .windows.* selectors. Even if we missed something (which to me feels very unlikely), it's not going to do us harm more than changing the font in a few cases 😉

[chriscool]

Thanks @felipec for your detailed explanations and thanks @sivaraam for your review!

[felipec]

Except when some rule uses !important, in which case that "declaration overrides any other declarations". [MDN ref]

That's important, not !important. Essentially if you don't specify !important then by default it's important. I think.

But then, the next sentence says "using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets". Bold is by them.

And the most relevant rule of thumb: "never use !important on site-wide CSS."

It seems pretty clear the current CSS is a bunch of bad practices one after the other.

It doesn't look like anybody with knowledge of CSS has taken a good look at it.

[felipec]

Dumb question: Is there a way of seeing, say, a previous Git Rev News formatted using the changes to see how it looks?

You can follow the instructions on the about page to install the github-pages gem on your machine, and run an instance of a Jekyll server.

[sivaraam]

Except when some rule uses !important, in which case that "declaration overrides any other declarations". [MDN ref]

That's important, not !important. Essentially if you don't specify !important then by default it's important. I think.

I don't think it works that way in CSS. I've only ever heard of !important which tells the browser that this declaration overrides any other declarations [ref].

But then, the next sentence says "using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets". Bold is by them.

Yeah. I was pointing out about !important just because the CSS rules that were being removed used them particularly for the font. So, they have an effect which we should've taken into account. But we don't have worry about it as the rule itself turned out to be useless.

I tested this in Arch Linux, Android 9, and Windows 10. Everything looks the same, except Arch Linux.

BTW, I'll just note for the record that after this change I did notice a different in my Windows 10 machine. It actually makes sense given that I didn't have the Adelle font installed but had Georgia and DejaVu Serif. Looks like I've been reading Rev News using Georgia until recently and it got rendered in DejaVu Serif after this change (which I didn't like so much). I then installed Roboto Slab to get a more pleasant look.

[felipec]

I've only ever heard of !important which tells the browser that this declaration overrides any other declarations [ref].

But this is literally what the documentation says:

"When an important rule is used on a style declaration, this declaration overrides any other declarations."

So the documentation is very unclear, because first it mentions important, and then !important, but apparently !important says "this rule is important", which is the opposite of what anyone in computer science would instinctively think.

BTW, I'll just note for the record that after this change I did notice a different in my Windows 10 machine.

It's weird that you have DejaVu Serif installed on Windows, and even so personally I think DejaVu Serif looks better than Georgia. But if others disagree the order can be changed.

The important thing is to have DejaVu Serif on the list, for most Linux users.

[sivaraam]

So the documentation is very unclear, because first it mentions important, and then !important, but apparently !important says "this rule is important", which is the opposite of what anyone in computer science would instinctively think.

Yeah. It's contradictory syntax indeed [ref].

It's weird that you have DejaVu Serif installed on Windows,

I'm guessing that's because I have LibreOffice installed. Though, I'm not sure if I manually installed it at some point. I don't remember doing that, though.

... and even so personally I think DejaVu Serif looks better than Georgia.

Your personal taste seems different from mine 🙂

But if others disagree the order can be changed.

Yeah. I'm likely an exception. In case someone else reports we could think about changing the order. Otherwise, I don't mind it being left as it is.