The height of a button in a CSS theme is determined by the height of the titlebar, which in turn is determined in most cases by the height of the titlebar font, but occasionally explicitly. The height of buttons cannot be set explicitly.
For the width of the button, however, there are two common cases:
- The artist wants it to be a specified number of pixels, millimetres, ems, etc.
- Much more often, the artist wants it to be a specified multiple of the button’s height, often 1:1.
There has been some controversy about how we should represent this in CSS:
- In the first draft of the themes specification, the width and height properties could be set on a button, but were only used to calculate the ratio. Explicit widths could be set using max-width and min-width. Screwtape called this abuse of the semantics “a bit cruel”.
- We could honour width directly for absolute values, but then there comes the question of how to handle ratios. If you set the width to a percentage, we could use that, but traditionally that has meant a percentage of the width of the enclosing element, not of the height. We could make an exception in this case, of course.
- The universal solution of width: -cowbell-button-ratio(0.25), or whatever, which is ugly.
- Or alternatively allow width to be set directly for absolute widths, and as an alternative have -cowbell-width-ratio: 0.25.
- Invent a new unit! width: 0.25ht. This idea should probably be avoided.
Your chronicler is stumped as to the solution which would be clearest to theme artists. Gentle reader, do you have a suggestion?
How about CSS3 calc expression?
According to spec you can add a new constant, say, named “height” or “button_height” and set width with something like this:
width: calc(button_height * 0.25)
It’s perfectly valid CSS and rather easy to read and understand.
CSS in general is really, really bad about aspect ratios, as you’ve outlined.
As I said before, making width: and height: mean something totally different is a nasty trick to play on theme designers. CSS3 is pretty rigorous about percentage units always referring to the width of the containing block (except in very special circumstances like font-size). Leaving “width:” set to “auto” and setting the actual width with another property like “-cowbell-width-ratio:” seems redundant.
Really, what we want to do is set the “width:” property, and we want to set it to a special value that means “multiply this by the height of the button to get the actual dimension”. Whether that’s a special unit, a special function, or, say “negative percentages mean a percentage of the enclosing block’s height, instead of width”, all boils down to which is easiest to implement.
I should note that CSS3 expressly says that negative percentages are illegal, so it should be a safe extension.
How about using “em” to mean the height of the button? It is usually used CSS to mean the height of a letter (and historically the width of character “m”), but it kind of is the same thing anyway…
I don’t much like the idea of redefining the em; it feels like it ought to mean the width of the em of the titlebar font.
Negative percentages just feel a bit hacky.
A special function is certainly workable.
My favourite idea of these is calc expressions, but I’m a little worried we’d have to implement the entire spec of calc expressions just to get this very basic functionality. I think what we might do is have “width: calc(height)” and “width: calc(height*n)” being special cases that are accepted, and add the rest of the calc expressions spec as it’s needed.
I did not realise there was a CSS spec for calculated values. That’s pretty great news, and if it’s easy enough to implement “calc(height)” and “calc(height*n)” in libccss, that would be pretty grand.
The Metacity v2 theme format defines a number of useful built-in constants; perhaps more of them would be useful in the Brave New World of Cowbell than just button height.
If there is a need to specify style like this, not the metric units (pixels, mm, inch), than my suggestion is to use something like that: { width n*ex, height m*ex }, which usually means { width (2-1)m*ex, height m*ex }, than will be bond to the height of the tittle bar, and/or to the selected font. For example, I do not have mind to see some extra spaces bellow buttons, if the title font is a bit too height, but I gues I am in minority here :).
It’s always hard to program this wel. For me it’s also new that there are specs for calculations heights/widths of the buttons. Tried it in galleries, but not in css yet, thanks for noticing..
@doc_ds: There’s never any risk of extra spaces below buttons. The height of the button is determined by the height of the title font.