liveBook · Manning

Origin

As explained in Math for Web Design

The origin is the point where the reference axes of a coordinate system intersect.

The origin is the point where a coordinate system’s reference axes intersect. In two dimensions, it is typically written as (0, 0), and every other point is measured from it. section 1.4.9

For web interfaces, the viewport origin sits at the browser window’s top-left corner. The x-coordinate increases to the right, the y-coordinate increases downward, and pixels are the default unit. section 1.4.9 section 10.1

Reading a pointer position

When the pointer is 120 pixels right and 80 pixels below the viewport’s top-left corner, its viewport coordinates are (120, 80). A mousemove handler exposes those values through e.clientX and e.clientY. section 1.4.9

Use the origin as the reference point for common interface calculations:

  • Measure an element’s position with getBoundingClientRect(); its returned edges are relative to the viewport origin. section 1.4.9
  • Represent movement as coordinate offsets: adding [50, 20] moves a point 50 pixels right and 20 pixels down. section 10.1
  • Allow negative coordinates to place an element partly or entirely above or left of the viewport. section 1.4.9
Table 1.9 Some uses of coordinate systems in CSS and JavaScript

Task

Code

Explanation

Get an element’s current viewport position in JavaScript.

const rect = element
.getBoundingClientRect();

The getBoundingClient­Rect()method returns the positions of an element’s top, right, bottom, and left sides relative to the viewport origin.

Return the mouse pointer’s current viewport position in JavaScript.

window.addEventListener("mousemove", (e) => {

console.log(e.clientX, e.clientY);

});

For a mousemove event e, the properties e.clientX and e.clientY represent the pointer’s current position relative to the viewport’s origin.

Scale a heading based on the viewport width in CSS.

h1 { font-size: 5vw; }

As the viewport widens or narrows, the font size of each h1 heading will grow or shrink proportionately.

Compare how the viewport origin supports element measurement, pointer tracking, and responsive CSS sizing. section 1.4.9

How Math for Web Design covers it

How deep it goes
Defines the origin and explains browser axes, signs, units, and measurements, while stopping short of higher-dimensional systems.
Examples
Uses viewport pointer coordinates, getBoundingClientRect(), negative positions, vector offsets, and responsive viewport dimensions.
What it assumes
Assumes basic points and coordinates, while introducing axes, origin, signs, and viewport measurement directly.
What you can do after
Apply it via CSS and JavaScript to position elements, interpret pointer events, and calculate viewport-relative geometry.
How it connects
Connects coordinate systems with axes, coordinates, vectors, bounding boxes, viewport measurements, and DOM geometry.
Cover of Math for Web Design
liveBookmanning.com
Read Math for Web Design on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Math for Web Design. The section links point to the parts of the book it draws on.