2 #Cartesian geometry Cartesian geometry

Note: Many quantities in this module (e.g. --canvas-radius-em) are meant to be given without unit (e.g. --canvas-radius-em can be set to just 10, not 10em) because they are frequently divided by each other, which couldn't be done if they had a unit. Nonetheless, that unitless number is assigned a unit internally, and that unit should be included in the name of the variable so that the reader can understand how it's used (e.g. --canvas-radius-em: 12 means that the 12 will be internally multiplied by 1em).

Source: css/modules/cartesian/cartesian.css, line 1

2.1 #Cartesian geometry.center-in-container Center element in ancestor

Example

Markup

<style>
#uffa {
  display: block;
  content: '';
  width: 1em;
  height: 1em;
  background-color: white;
}
</style>
<div style="position: relative; display: block; content: ''; width: 6em; height: 4em; background-color: black">
<div class="center" id="uffa">
</div>
</div>

Source: css/modules/cartesian/xyz-positioning.css, line 54

2.2 #Cartesian geometry.center-origin-in-container Center element's (or its ::after) origin in ancestor

Moves the origin of the target element to the center of closest positioned ancestor element.

Note: The example below includes a <style> to target the element and its pseudo-element by id, because pseudo-elements can't be created in HTML; you need not copy it, and would apply display: block, content: '', and whatever else is needed via other selectors.

Examples

Default styling

.center-origin--after

Only applies to the ::after pseudo-element of the target element.

Markup

<style>
#pseudo-element-owner,
#pseudo-element-owner::after {
  display: block;
  content: '';
  width: 1em;
  height: 1em;
  background-image: linear-gradient(225deg, white 50%, transparent 50%);
}
#pseudo-element-owner::after {
  background-image: linear-gradient(45deg, white 50%, transparent 50%);
}
</style>
<div style="position: relative; display: block; content: ''; width: 6em; height: 4em; background-color: black">
<div class="center-origin [modifier class]" id="pseudo-element-owner">
</div>
</div>

Source: css/modules/cartesian/xyz-positioning.css, line 1

2.3 #Cartesian geometry.trigonometry Trigonometry

Given --alpha-deg a variable holding the measure of an angle in degrees, this module defines --sin-alpha to be an approximation of the sine of that angle.

Note: Inspired by this.

Source: css/modules/cartesian/trigonometry.css, line 1

2.4 #Cartesian geometry.triangles Triangle

Creates a triangle according to the following inputs:

--side1-em and --side2-em: the lengths of two of the triangle's sides, let them be side_1 and side_2, the former coming "before" the latter in a clockwise sense, and the vertex between them being the orgin (that can be positioned via dedicated rulesets);
--alpha-deg: the angle between side_1 and side_2;
--offset-deg: the clockwise offset of side_1 with respect to the positive vertical direction;
--color (default: black): fill color of the triangle,
--opacity: opacity of the filling of the triangle,

Implentation: An ::after pseudo-element with the shape of a square with side equal to --side1-em is created, then scaled along the y axis and skewed (according to the ratio between --side1-em and --side2-em, and to --alpha-deg and its sine), and rotated (according to --offset-deg).

Note: The dashed square in the example below is the one from which the triangle is obtained, and it (not the triangle) is what affects the document flow. Clearly, positioning the triangle allows one to remove the spacing that the dashed square would cause. See also the .center-origin--after class.

Example

Markup

<style>
#untransformed-square {
  position: relative;
  left: 0;
  right: 0;
  width: 20em;
  height: 20em;
  display: block;
  content: '';
  border: 1px dashed black;
}
#untransformed-square + * {
  position: absolute;
  left: 0;
  top: 0;
}
</style>
<div id="untransformed-square"></div>
<div class="trigonometry triangle" style="--side1-em: 20; --side2-em: 8; --alpha-deg: 30; --offset-deg: 100; --color: red; --opacity: 100%;"></div>

Source: css/modules/cartesian/triangle.css, line 1

2.5 #Cartesian geometry.polar-canvas Polar canvas

Creates a polar canvas according to the following inputs:

--line-width: width of the grid lines,
--canvas-radius-em: multiplied by 1em is approximately the radius of the canvas,
--n-radial-lines: number of grid lines in the radial direction,
--grid-color: the color of the grid lines.

Note: The number of grid lines in the circumferential direction is 6 (or 3, depending how you look at it), and cannot be changed, because each line corresponds to a separate linear-gradient.

Note: The rule overflow: hidden; is used to prevent some nasty effects. Specifically, since the diagrams are drawn via triangles, and since triangles are rendered as rectangles with 100% transpacenty on one side of a diagonal, it can happen that the transparent half of the rectangles protrudes beyond the elements borders, which can cause the appearance of an horizontal scroll bar.

Note: The rule position: relative; is set to allow precise positioning of elements on top of the canvas.

Example

Markup

<div class="polar-canvas" style="--line-width: 2px; --canvas-radius-em: 3; --n-radial-lines: 3; --grid-color: red;"></div>

Source: css/modules/cartesian/polar-canvas.css, line 1