Edgewall Software
Modify

Opened 15 years ago

Closed 3 years ago

Last modified 7 months ago

#633 closed enhancement (fixed)

Simplify fonts in css

Reported by: dju` Owned by: Christian Boos
Priority: normal Milestone: 1.3.2
Component: general Version: 0.7.1
Severity: major Keywords: layout fontsize css +testing
Cc: Martin.vGagern@… Branch:
Release Notes:

Use relative font sizes in Trac CSS stylesheets

API Changes:

Description

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}".

Attachments (0)

Change History (31)

comment:1 by Christopher Lenz, 15 years ago

Keywords: layout added
Owner: changed from Jonas Borgström to Christopher Lenz

comment:2 by Christopher Lenz, 15 years ago

Milestone: 0.8
Priority: normallow
Severity: normalminor
Status: newassigned

comment:3 by dju`, 15 years ago

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.

comment:4 by Christopher Lenz, 15 years ago

Summary: simplify fonts in cssSimplify fonts in css

[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.

comment:5 by Christopher Lenz, 15 years ago

Milestone: 0.80.9

Postponing.

comment:6 by Martin Bialasinski <agr30@…>, 15 years ago

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.

comment:7 by dju`, 15 years ago

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.

comment:8 by Christopher Lenz, 14 years ago

Milestone: 0.9

comment:9 by Christian Boos, 12 years ago

Keywords: css added
Milestone: 2.0
Owner: Christopher Lenz removed
Status: assignednew

comment:10 by Christian Boos, 10 years ago

Keywords: fontsize added
Priority: lownormal

Two other tickets in favor of relative font size:

in reply to:  7 comment:11 by Martin.vGagern@…, 10 years ago

Cc: Martin.vGagern@… added

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.

comment:12 by Christian Boos, 10 years ago

Milestone: 2.00.13

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

comment:13 by Remy Blank, 9 years ago

Milestone: next-major-0.1Xunscheduled

comment:14 by Christian Boos, 9 years ago

Milestone: unschedulednext-major-0.1X
Owner: set to 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:

in reply to:  14 comment:15 by Christian Boos, 7 years ago

Milestone: next-major-releasesnext-dev-1.1.x
Priority: normalhigh
Severity: minormajor

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.

comment:16 by lkraav <leho@…>, 7 years ago

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.

comment:17 by asaf@…, 5 years ago

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

in reply to:  17 comment:18 by Ryan J Ollos, 5 years ago

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.

comment:19 by Ryan J Ollos, 4 years ago

Milestone: next-dev-1.1.xnext-major-releases

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.

comment:20 by Ryan J Ollos, 4 years ago

Owner: Christian Boos removed

comment:21 by figaro, 4 years ago

Type: defectenhancement

Marking as enhancement as per TracTicketTriage.

comment:22 by Christian Boos, 3 years ago

Milestone: next-major-releases1.3.2
Priority: highnormal

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

comment:23 by Christian Boos, 3 years ago

Owner: set to Christian Boos
Status: newassigned

comment:24 by Christian Boos, 3 years ago

Keywords: +testing added

comment:25 by Ryan J Ollos, 3 years ago

#11387 closed as a duplicate.

comment:26 by Christian Boos, 3 years ago

Release Notes: modified (diff)
Resolution: fixed
Status: assignedclosed

Fixed in r15523.

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

(13 years old actually, time flies…)

comment:27 by Jun Omae, 14 months ago

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 }
}

in reply to:  27 comment:28 by Ryan J Ollos, 14 months ago

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.

comment:29 by Jun Omae, 14 months ago

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 */

comment:30 by Christian Boos, 8 months ago

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.

in reply to:  30 comment:31 by Christian Boos, 7 months ago

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.

Modify Ticket

Change Properties
Set your email in Preferences
Action
as closed The owner will remain Christian Boos.
The resolution will be deleted. Next status will be 'reopened'.

Add Comment


E-mail address and name can be saved in the Preferences .
 
Note: See TracTickets for help on using tickets.