KeyMason Devlog

June 28, 2020


The goal is to create a CSS based key rendering and layout system, and the logical way to make it intuitive is to use as little markup as possible, this means using the :before and :after pseudo elements for keycap construction.

The difficult part is to render complex keys such as ISO Enter and "Big Ass" Enter keys, those have inset corners to them, and would require multiple elements stacked on top of each other plus adding corners to it.

First try - absolute positioning

Absolute positioning works very well to construct keys, except that it's way too complicated to keep track of. The goal is to create a CSS stylesheet that has the basic structure of the key, and then one can change the size and appearance easily, but this becomes too complicated for complex keys with too many calc() expressions.

The best part about using absolute position is that there is no pixel rounding problem causing complex key misalignment - it is pixel perfect.

Second try - display grid

Display grid works better, however it has three problems:

  1. It is still quite complicated and unintuitive to construct complex keys, but much easier than absolute positioning.
  2. The hollow space on complex keys are part of the grid, which means when using hover effects that utilizes z-index changes, you can't select the adjuacent key located within the hollow space.
  3. Pixel rounding error becomes an issue, seams within complex keys are starting to show at certain zoom sizes (sub 1px thin lines) and corner becomes ever so slightly misaligned.

Third try - grid and absolute position combined

Define the regular keycap using grid, and then when creating complex keys use multiple nested keycaps and altered property to change key shape.

This yield the most intuitive method to create complex keys.

Problem - when resizing the browser, pixel rounding error will cause the corners of complex keys to be slightly misaligned at certain zoom levels however there are no seams showing. For the purpose of this tool it is deemed an acceptable issue since there's really no perfect solution.