## The current CSS Gradients mess...

By glazou on Tuesday 28 December 2010, 12:40 - Standards - Permalink

(*this article uses SVG and MathML, Safari has issues with it because of HTML mimetype ; please prefer Chrome or Firefox*)

Let's take a given square box. Height and width are the same. We want to apply a red-to-black background at let's say alpha degrees and through the center C (50%, 50%) of the box. The W3C gradients draft says we find the start and end points of the gradient that way:

Let's suppose the size of the box is 100%*100%. In that case, finding the coordinates of the end point (for instance) is easy:

- α is our user-chosen angle
- let β be the angle between the horizontal and the line between
the C and D; we have

$\textcolor[rgb]{}{tan\beta =\frac{{C}_{y}-{D}_{y}}{{D}_{x}-{C}_{x}}}$ - the distance between C and D is of course $\textcolor[rgb]{}{l=\sqrt{{({c}_{y}-{d}_{y})}^{2}+{({c}_{x}-{d}_{x})}^{2}}}$
- the distance between C and the end point is then $\textcolor[rgb]{}{l\text{'}=l\cdot cos(\beta -\alpha )}$
- and the coordinates of our end point are then $\textcolor[rgb]{}{({C}_{x}+l\text{'}cos\left(\alpha \right),{C}_{y}-l\text{'}sin\left(\alpha \right))}$

Of course, Gecko-based gradients use a start point and an angle to define a linear gradient while WebKit-based gradients use a start point and an end point.

But according to the above, we will get different absolute coordinates for our start and end points depending on the box's size even if the angle remains the same.

The above means that it's not possible, in the general case, to derive a -webkit-gradient(linear, ...) from a -moz-linear-gradient(...) - and vice-versa - without having access to the element's size.

Conclusion: sorry, BlueGriffon will not output WebKit-based
gradients outside of the trivial cases, it's just not possible.

## Comments

Là dessus on peut lire ceci : http://24ways.org/2010/everything-y... et se débrouiller pour le faire « à la main ».

Let me know if you need help optimizing this for numerical stability or for speed. I just want to make sure that you don't compute beta=tan^{-1}(...) explicitly here as it doesn't seem to be needed:

cos(b-a)=cos b cos a + sin b sin a

and you have formulas for cos(tan^{-1}(...)) and for sin(tan^{-1}(...)) involving only a square root.

@Benoit Jacob:

I think Daniel has some mathematical background, given its education