Simplify fonts in css

[dju`]

there are many (redundant) font-family definitions in the css files. it makes hard to override styles in per-project templates, i.e. with a simple "body {font-family: Tahoma}".

[dju`]

i suggest not using px in font-size, as it breaks accessibility. the best is to use relative font-size, for example:

h1 { font-size: 1.9em }
h2 { font-size: 1.45em }
h3 { font-size: 1.2em }
h4 { font-size: 1em }
...

and set a default body font-size:

body { font-size: 13px }

or better, font-size: medium, but IE's medium size is bigger than Netscape's one. A trick to fool IE might be used here.

[Christopher Lenz]

[943] removes superfluous font-family declarations from browser.css. That leaves us with three font-family declarations in trac.css. Those three differ and cannot be removed without altering the presentation.

I'm not so sure about using relative font-sizes throughout the style sheets. That's a bigger change that would need quite a bit of testing between different browsers/platforms.

[Christopher Lenz]

Postponing.

[Martin Bialasinski <agr30@…>]

If relative font sizes are to be used, the proper way is to set the size in body to 100% and then set h1 to 200% etc. Thus respecting the font size the user has defined as his prefered normal font size.

Using em sizes instead of percentages should theoretically be no difference, but IE screws it up with sizes smaller than 1em and font set to "Smaller" in the browser.

[dju`]

I often use something like:

body {
   [...]
   font-size:smaller;	/* font size for IE */
}
html>body { font-size:small; } /* escaping IE, font size for others */

to unify font sizes in mozilla browsers and IE. Then I use relative (em) font sizes.

[Christian Boos]

Two other tickets in favor of relative font size:

• using em/ex, #7410
• using pt, #3575

[Martin.vGagern@…]

Replying to dju`:

I often use something like […] to unify font sizes in mozilla browsers and IE.

I don't believe that unified font sizes are a desirable goal. In both browsers, users can configure their default font size. Users that do so should find their expressed preference honoured. Users that don't configure their browser might choose one or the other because of its default configuration options.

So I'd say the main goal should be to bulk of the text content displayed in the configured default font size, and to use relative font sizes (be it em or percent) for parts to be displayed differently.

[Christian Boos]

#6771 (IE rendering h4 larger than h3) should be verified and addressed while reworking this.

[Christian Boos]

I'd like to keep this one on the radar. This can be part of a general overhaul of the CSS:

• use trac- prefix more consistenly
• use variables for fonts, sizes, colors:
  • use templates to generate CSS,
  • or use ​CleverCSS (​clevercss.py)

[Christian Boos]

CleverCSS didn't seem to have gone past 0.1… There are much better options available (​Stylus, ​LESS, ​...) and picking one will go a long way for enabling us to rationalize and restructure our stylesheets.

[lkraav <leho@…>]

So is this ticket also going to find a girlfriend and move out of the house when it reaches 18 years of age? That'd be an interesting resolution name to register in Trac :> "agelegal", or something.

I'd say let's pick LESS and just roll with it. This is mostly based on what I've heard people talk about the most. I doubt there's a significant % of difference in the technical overhead of either choice.

[asaf@…]

I'm thinking of adopting this issue as my first task in Trac,

Less CSS support can be implemented using this, for example: ​https://github.com/robotis/Lesscpy/

this works on python 3

[Ryan J Ollos]

Replying to asaf@…:

I'm thinking of adopting this issue as my first task in Trac,

Less CSS support can be implemented using this, for example: ​https://github.com/robotis/Lesscpy/

this works on python 3

It looks like there may be some overlap with #10672.

For your first task in Trac, I might suggest starting with a smaller ticket. The bitesized tickets offers are some good choices.

[Ryan J Ollos]

Retargetting tickets to narrow focus for milestone:1.2. Please move the ticket back to milestone:next-dev-1.1.x if you intend to resolve it by milestone:1.2.

[figaro]

Marking as enhancement as per TracTicketTriage.

[Christian Boos]

Sorry, this ticket probably won't reach 18 years before completion (we tried hard though ;-) ).

[Christian Boos]

See [504bf74ae/cboos.git].

[Ryan J Ollos]

#11387 closed as a duplicate.

[Christian Boos]

Fixed in r15523.

Who said 10 years old tickets never get done? ;-)

(13 years old actually, time flies…)

[Jun Omae]

The font-size is decreased by body { font-size: .9em } in r15561. However, I'm getting too small font on my browser which configures 14px as default font size. We should use absolute font size rather than relative font size.

-html { overflow-y: scroll }
+html { overflow-y: scroll; font-size: 16px }

Currently, as the workaround, the following style is configured using <profile>/chrome/userContent.css.

@-moz-document domain(edgewall.org), domain(trac-hacks.org)
{
  html { font-size: 16px }
}

[Ryan J Ollos]

Replying to Jun Omae:

We should use absolute font size rather than relative font size.

Your suggested change looks fine in my browsers, for which I see no change. I think your idea make sense - set the font size at the root of the document and scale everything relative to it.

[Jun Omae]

Thanks for the comment. Currently, I'm using the following to use 14px rather than 14.4px (16px * 0.9em):

@-moz-document domain(edgewall.org)
{
  body { font-size: 14px !important }
}

 body {
- font-size: .9em;
+ font-size: 14px;
  background: #fff; /* body_bg */

[Christian Boos]

Well, if you set the font size to be fixed like that, the browsers will ignore the font size selected by the user in the options, which harms accessibility. At least that seems to be the case in FF and Chrome.

If you think it's more sensible to restore the body size to 100% (so that it would respect your 14px default font size) and rebalance the rest accordingly, we can try to do that. Well, initial testing shows that it's not too bad, and the actual font size will indeed match the specified size in the options. I can add that to #13116.

[Christian Boos]

Replying to Christian Boos:

… I can add that to #13116.

Committed as r16871.

Now if your browser configures the default font size to 14px, that's what you should get.