Fossil User Forum

Various skins have different diff font size
Login

Various skins have different diff font size

Various skins have different diff font size

(1) By sean (jungleboogie) on 2021-09-13 15:19:25 [source]

Hi,

I have observed the following skins have a slightly difficult to read diffs on computers (non-mobile browsers) when the browser is 100% zoom. Meaning, the diffs are smaller than on the default skin.

I am only raising this post because drh recently made diffs slightly smaller for the default skin, which makes the diffs nice to read.

These are the skins with slightly small diff font:

  1. Black & White
  2. Dark Mode
  3. Khaki
  4. Original
  5. Plain Gray
  6. Xekri

Maybe Eagle as well.

I reviewed in side-by-side and unified and both views seem to be equally difficult to read.

I will say the font size is likely more legible than before, but still not quite as nice as it is in the default skin.

Maybe this is my design and we want differing sizes for diffs?

Thanks!

(2.1) By Stephan Beal (stephan) on 2021-09-13 21:51:26 edited from 2.0 in reply to 1 [link] [source]

Maybe this is my design and we want differing sizes for diffs?

This is caused by the default skin on fossil-scm.org having a specific font size set on the body (14pt), and the diff font size being 80% of that. The built-in skins use the browser's default body font size and the diffs are 80% of that default.

In short, that's as designed.

The reason i couldn't reproduce this locally is because that 14pt font is part of the fossil-scm.org site-level customization, which my copy doesn't have: (not true - corrected in a down-thread response)

/***********************************************************
** Skin-specific CSS for default
***********************************************************/
/* Overall page style */

body {
  margin: 0 auto;
  background-color: white;
  font-family: sans-serif;
  font-size: 14pt;
     -moz-text-size-adjust: none;
      -mx-text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

(3) By sean (jungleboogie) on 2021-09-13 20:09:05 in reply to 2.0 [link] [source]

So the workaround is to remove the 80% part in default.css, if you want to use other skins and have the diffs be legible?

(4) By Stephan Beal (stephan) on 2021-09-13 20:31:49 in reply to 3 [link] [source]

So the workaround is to remove the 80% part in default.css, if you want to use other skins and have the diffs be legible?

i don't see the other diffs as being noticably smaller: the 80% makes only a tiny difference to my eyes, but my browsers may be using a larger font than yours by default. To make all of the skins have larger diffs at once, yes, changing the default.css is the way to do itmisref. Simpler than fishing out the correct line to change, simply appending to that file will work:

table.diff { font-size: revert }

or similar.

misref = That's unfortunate, though. We might want to add a way to configure CSS which will be applied between the default CSS and the skin-level CSS, for this type of global override (noting that a given skin may, in turn, override it, but none currently override that particular property).


  1. ^ a b Misreference

(5.1) By sean (jungleboogie) on 2021-09-13 20:44:44 edited from 5.0 in reply to 4 [link] [source]

i don't see the other diffs as being noticably smaller

Picture comp: https://imgur.com/a/012dcEf

Yeah, the new one is still legible and can always be made bigger by zooming in on the diff or increasing your browser font size. FWIW, mine is the default of 14pixels.

(6) By Stephan Beal (stephan) on 2021-09-13 21:10:00 in reply to 5.1 [link] [source]

mine is the default of 14pixels.

14px or 14pt? 14px will be much smaller than 14pt.

Picture comp: https://imgur.com/a/012dcEf

If you would please test against the current trunk, it might resolve remaining line alignment mismatches and color gaps caused by the fix for that.

(7) By sean (jungleboogie) on 2021-09-13 21:44:39 in reply to 6 [link] [source]

14px or 14pt?

Ah, yes, points!

it might resolve remaining line alignment mismatches and color gaps caused by the fix for that.

Yes, color gaps appear to be all blended together. It's noticeable on a commit with many contiguous lines. https://fossil-scm.org/home/info/674da6424a5a5faf as an example.

(8) By Stephan Beal (stephan) on 2021-09-13 21:50:23 in reply to 2.0 [link] [source]

The reason i couldn't reproduce this locally is because that 14pt font is part of the fossil-scm.org site-level customization, which my copy doesn't have:

Correction, the built-in default skin does have an explicit font-size:14pt. i can't reproduce it locally simply because my environment apparently scales that 80% differently than on yours and the difference is too subtle for me to see at a glance.

(9) By sean (jungleboogie) on 2021-09-13 22:51:32 in reply to 8 [link] [source]

Correction, the built-in default skin does have an explicit font-size:14pt.

Good info. I like the table.diff { font-size: revert } hack.