After going to several sites and not being able to get the kind of printable paper I wanted (due to poor print quality or a lack of choices I liked), I decided to make my own. I thought it would be easy to do so but it turns out that print quality for SVG is utter rubbish in all the browsers out there, even today. If you don't believe me, read this: Using SVG to make custom paper (and why it didn't work) I was, frankly, astonished that it didn't work.
So I figured out that I could print a really big image from the browser and that looked great on paper (because everybody cares how their pictures print out) so I switched to using Paper.js to render the page image on demand and it works pretty darn well if I do say so myself. Plus, you don't have to stand up a big complicated server to generate PDF files on the fly or anything like that.
Anyway, this is the code that makes PaperQuik.com go.
Finally you need to install Karma (it's used for the unit-tests):
npm install -g karma
With all the software you need installed, you can run a couple of commands in the root of the airquotes project to get installed what you need to run or test it locally:
Then use Grunt to run a server and launch the web page in a browser where you can explore the working UI:
Sorry, there are no working tests at this time. If you're just looking for an example of some tests, you should check my project airquotes, it has 100% code coverage.
The to-do list breaks down into three major categories of functionality which are needed:
Different paper layouts, better layout of the boxes on the page, the ability for the user to modify the printing (for example, line and dot colors), and double sided printing.
IE preview looks like hell even on IE 11. After the high resolution image of the page has been generated, every other browser scales it down nicely and displays it as a preview. IE butchers it. Initially there should just be a message to tell the user that the preview is not indicative of the output, but later a replacement for the image scaling in IE would fix the problem.
- Add a message about the IE preview problems
- Fix preview rendering on IE 11, 10, and 9
- Create location calculation code
- Build 'Cornell Note-Taking' layout
- Build 'To-Do List' layout
- Create a controls page for the dotted ruled lines renderer
- Add a modal w/ printing instructions for Firefox
- Add a modal w/ printing instructions for IE
- Add a modal w/ printing instructions for Safari
- Allow for double-sided pages
- Create a 'Test Page' layout for printer testing
- i18n and l10n