Basic arithmetic in GWT CssResource - css

Question

I'm looking for a way to do something like this:
// style.css
#def borderSize '2px';
.style {
width: borderSize + 2;
height: borderSize + 2;
}
where the width and height attributes would end up having values of 4px.

Answer 1

Sometimes I use the following:
#eval BORDER_SIZE_PLUS_2 2+2+"px"; /* GWT evaluates this at compile time! */
Oddly, this only works, if you don't put any spaces between the + operator and the operands. Also, in #eval you can't use constants that were previously defined by #def. You can however use constants that are defined as static fields in one of your Java classes:
#eval BORDER_SIZE_PLUS_2 com.example.MyCssConstants.BORDER_SIZE+2+"px";
Or you could let the calculation be performed completely by Java:
#eval WIDTH com.example.MyCssCalculations.width(); /* static function,
no parameters! */
#eval HEIGHT com.example.MyCssCalculations.height();
.style {
width: WIDTH;
height: HEIGHT;
}
But what I would actually like to do is very similar to your suggestion:
#def BORDER_SIZE 2;
.style {
width: value(BORDER_SIZE + 2, 'px'); /* not possible */
height: value(BORDER_SIZE + 3, 'px');
}
I don't think that's possible in GWT 2.0. Maybe you find a better solution - here's the Dev Guide page on this topic.

Answer 2

Mozilla kind-of-sort-of-not-really supports this with it's CSS calc() function.
This example shamelessly stolen (with attribution!) from Ajaxian
/*
* Two divs aligned, split up by a 1em margin
*/
#a {
width:75%;
margin-right: 1em;
}
#b {
width: -moz-calc(25% - 1em);
}
It's not cross-browser, and it's probably only barely supported by even bleeding-edge versions of Firefox, but there's at least being progress made in that direction.

Answer 3

You could also calculate in your provider method, if you put a parameter in the function:
#eval baseFontSize com.myexample.CssSettingsProvider.getBaseFontSize(0)+"pt";
#eval baseFontSize_plus_1 com.myexample.CssSettingsProvider.getBaseFontSize(1)+"pt";
com.myexample.CssSettingsProvider would look like this:
public static int getBaseFontSize(int sizeToAdd) {
if (true) {
return 9 + sizeToAdd;
}
return baseFontSize;
}

Answer 4

I would also love somehting like that, but it's not possible.
Even in CSS 3 their is nothing planned like this.
If you really want to make something like that, one possibility is to use
php and configure your webserver, so that .css files are parsed by php.
So you could do something like
<?
$borderSize = 2;
?>
.style {
width: <? borderSize+2 ?>px;
height: <? borderSize+2 ?>px;
}
But as this is no 'standard' way, i think its better to not do it.