Dotted paper generator in a single HTML file

Here’s the repository: agarie/dotgrid on GitHub.

And here’s the app: dotted paper generator.

Why dotted paper?

I like having scratch paper while I’m at my computer for scribbling, doodling, making quick notes & lists, or just sorting what I want to do in that particular day.

Dotted is superior to regular ruled paper for this kind of usage. It’s mostly out of the way when one is working free form, but flexible enough that you can write as if it was lined, easier to draw with proportions, etc.

I have a large pile of old printed pages (300+) I use as a scratch pad and thought it would be cool to print a dot grid on them instead of just using it as plain paper. So I began searching for a free generator online and found Rob Shearer’s webapp after stumbling upon some of the problems he mentioned in his post, like generators which left annoying watermarks on the created PDF.

I used that app for a few months until I noticed I kept (manually) adding a vertical line splitting the page into more or less 70% / 30% sections. Writing and longer lists on the left side, short reminders and minimal lists on the right one. It’s not perfect, but it works well and is similar to how I’ve organized my study notes for almost a decade now.

Modifications

So I cloned the project and made the following changes to it:

  1. I added an option to create a vertical line on top of one of the dotted columns. The input takes a percentage, which is translated to the nearest column. I suspect this might be a problem in tighter grids, but I couldn’t find any problems after a few minutes of superficial manual testing.
  2. I like to write page numbers on the top right because I archive these sheets after using them. (I don’t have a strong reason for it.) So I added another option to add a field on the top right for a page number. I didn’t adapt it to mirrored pages, so it does look weird. I might fix this someday.
  3. I updated the default values on some of the inputs so it’s closer to what I like to use.
  4. I also added a tiny bit of basic CSS and updated the HTML so it uses a form. Given this is a small, single-page app, etc, this is probably unnecessary, but I like how it looks now.

I should prepare a pull request with the HTML and CSS changes I made to thank Rob for his work, too, someday.