Hacker News new | ask | show | jobs
by Pmop 2221 days ago
> To make matters even more exciting, the last two coordinates might not be what you'd expect; when absolutely positioning items in CSS, right and bottom indicate the distance from the right and bottom edges respectively. In image maps, this holds no water. Instead, both horizontal coordinates are counted from the left edge and vertical coordinates from the top edge.

Interesting. This order is commonly used by libraries like SDL and SFML to declare rectangular shapes.

7 comments

They're x, y pairs for the top-left and bottom-right corners of the rectangle. They're coordinates in the fourth quadrant of the Cartesian plane (i.e., with the origin conceptually in the top-left corner), which is also the way coordinates are given in most windowing systems (including X). This is more obvious when using the "poly" attribute rather than "rect," where you can have an arbitrary number of x, y pairs (and the browser automatically closes the shape by drawing a line between the last coordinate and the first).

The way CSS orders border, margin, and padding values is clockwise starting from the top. But these aren't coordinates since they represent sides, not points, so I think the author is confusing things by comparing them.

something I always wondered since the age of programming mode 13h, is the use of the fourth quadrant so that loop would fill video memory in the order the scan line goes reading it?
This is pretty much it. Scan lines are numbered from the top down, as they happen, everything else is numbered accordingly.

The real question is why scan top down and not bottom up? (I don't have any idea). Horizontal scan lines makes sense given a wider than tall screen, because it results in fewer scan lines, lowering the frequencies required ( a bit). Wider than tall makes sense for TV given common movie film aspect ratios and computer monitors started as TVs with different control circuits and cases.

I think it’s just designed to match the English order for text. This way your text mode can go through memory linearly. Graphics mode can just reuse the same order.
Almost everyone uses them like that. It's the index of the right point in the graphics buffer when treating it as a 2D array.
Back when image maps were common on websites, it was also easy to find the coordinates in your image by placing your Paint Shop Pro crosshairs at the desired points in your image and then transposing those coordinates to the html. Using a relative number for the second point would have added a lot of work for complex image maps. Maybe that's just a coincidence because it was actually driven by the underlying array, but it was super helpful on the design side too.

PS - This brings back my memory of server side image maps which were fun for treasure hunt type images because you couldn't view the page source to figure out where the hotspots in the image were. Good times.

I think the ordering of coordinates for map regions makes more sense than the css margin/padding order:

rect: left, top, right, bottom

circle: cx,cy,r

poly: x1,y1,x2,y2,...

They both make sense for their respective use cases. An image has a fixed size. An HTML element does not necessarily. You can't measure the the right border from the left of an element if you don't know how big it is.
Same in WinAPI, note the order of fields: https://docs.microsoft.com/en-us/windows/win32/api/windef/ns...

WinAPI is much older than 1995, these things were inherited from 16-bit Windows 3.x.

Interesting to perhaps no one else but those others that have suffered with it, the PDF specification allows drawing rectangles and other in-line graphical elements inside a 'sort of' canvas from a bottom right co-ordinate space only. I wondered for a while why that was.
Do you mean the bottom left corner? That's what ReportLab (python PDF authoring package) uses. It kinda makes sense wrt the cartesian coordinate system where x coordinate increases to the right and the y coordinate increases upwards, thus the origin is at the bottom left. But yeah, from a UX perspective it's one of those cases where practicality would have been better than purity.
English is written left to right and top to bottom. Text mode terminal is addressed this way.
That order has been used since the dawn of time. Well, since the dawn of graphics. I'm surprised at the author's surprise and I find it a little concerning.