W3C home > Mailing lists > Public > www-style@w3.org > June 2013

[css3-images] Helping implementers with math

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

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:

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

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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:31 UTC