Home
The Grid Inspector Highlighter is an overlay that displays information over a grid element. Those information included numbers as well for each line (implicit and explicit). The position and the amount of the lines' numbers to display, impact on both the outside available space (the space between the grid element and the document) and the inside available space (the space in the cell adjacent to the lines).
-
The space available to display such information (inside and outside) can be limited. For example, a grid could be aligned to the viewport's edge, or it could have small cells's height or width (e.g.
1em) -
The element's grid can be transformed. The rotation is the tricky transformation to handle, since we don't want apply the same transformation to the line's number but we want to position them correctly.
-
The top left corner is the starting point of both the first row and the first column - it's a specific case that doesn't happen with the rest of the rows and columns, that have to be considered.
- We position the number's box center, at the intersection point of the lines. In this way, we save more spaces and we limit the case where they're not visible. However, we still need to handle the case where the grid is aligned to the viewport (it was, but we have a regression on this).
- Since the box's center is positioned at the intersection point, once we can easily keep the proper alignment without rotate the numbers as well.
- We show only one number,that represent both the first column and the first row.
Beside the facts that this approach doesn't display negative numbers, it can't work as is. Since, we could have a situation where the first column start explicitly at the second, creating confusion since the first row number will be still aligned at the same way:
Or we could also have empty spaces, since there aren't positive number for that position:
[[https://github.com/ZER0/grid-negative-numbers/blob/master/img/grid-05 .png]]
Since both saving spaces and alignment (with and without transformation) are priorities, my suggestion is saving some spaces adding the negative numbers on bottom and on the right of the grid:
Notice that the box now has a pointer shape, that indicates the direction (e.g. rows or columns) and the point.
We could also use different colors to identifying negative numbers too (as something close to complementary color of the main one):
This approach also scales well in case of element's rotation:
Of course, nothing is perfect, and in some cases we have to do a trade off:
This is how it looks the current patch on an Jen's example:
This is how it should look:
And this is how it looks like when the grid has a rotation:
