- From: Simon Sapin <simon.sapin@exyr.org>
- Date: Tue, 18 Jun 2013 17:46:15 +0100
- To: www-style@w3.org

Hi, Implementing CSS gradients in WeasyPrint a few months back involved doing a bit of trigonometry. Refreshing stuff learned in high school wasn’t so bad, but there is a particular result that I found tricky to get and not intuitive. This paragraph of the spec defines the gradient line for linear-gradient() > Starting from the center of the gradient box, extend a line at the > specified angle in both directions. The ending point is the point on > the gradient line where a line drawn perpendicular to the gradient > line would intersect the corner of the gradient box in the specified > direction. The starting point is determined identically, but in the > opposite direction. This is a flawless definition, but it doesn’t give much clue on how to find that point with math and code in the general case rather than with pen and paper in a given case. I was just about to use an horrible formula involving arc-tangents and four cases before I got this one. I’d like to add it to the spec as a note, hopefully helping future implementers: Implementation note: Given: * <var>A</var> the angle (in any quadrant) defining the gradient line’s direction such that 0 degrees points upwards and positive angles represent clockwise rotation, * <var>W</var> the width of the gradient box, * <var>H</var> the height of the gradient box, The distance between the center and the gradient box and the ending point (ie. half the size of the gradient line) is: <code>abs(W * sin(A)) + abs(H * cos(A))</code> I’m confident this is correct after triple-checking my proof, but I could write it up if necessary. Cheers, -- Simon Sapin

Received on Tuesday, 18 June 2013 16:46:36 UTC