Formatting menus
Update 1/20/2023: So the bar manager decided to try to use it, but in the end gave up. Chrome has a rendering bug in print media that pushed the gin list to the next page immediately after the title. Given the css and html is so simple there isn't anything I could do to fix it. Even without that the process of generating HTML, then printing to PDF, then running it through a bootklet generator before finally sending it to the printer is just too much hassle.
I was at the pub a few weeks ago and saw the bar manager updating the drinks list. The process seemed tedious and error prone, he seemed to be positioning page elements by hand, so that alterations required more work. I don't even know what software he was using - he later mentioned google docs but it would have to have been the slideshow program because none of the others work like that. Looking closer at the menu there were multiple formatting issues - inconsistent margins, indenting, even a few typos ("Rosè" being the most onerous).
Seemed there should have been a better way ...
But after working on the problem quite a bit over the last few weeks i'm not sure there really is. I have some solutions but they require different skills to use.
Latex2ε
My first thought was using latex to generate the menu. I've played with it over the years but never used it much so it took a bit of trial and error but eventually I came up with something that worked pretty well. It could read the price lists from tab-separated-values files, I had some macros to control layout of individual items, I used the options package to allow fine-tuning on individual sections and so on. I even wrote a minimal table editor in Java to simplify its use and worked out how to get it all running in windows.
Latex can be frustrating as fuck, there's some weird environments that don't nest, arithmetic is messy, it's hard to read. But you can also do some cool shit, e.g. I created a brand logo that will properly typeset in any font because it can work with the glyph metrics directly.
I had to disable or work around many of latex's typesetting facilities such as hyphenation and paragraph layout but it produced high quality output and could create an A4 booklet print directly.
But to be honest, it's just not a good enough user-experience. It demands far too much knowledge to modify anything but the list of prices and even though it's simple to adjust things like font sizes the absolutely useless error reporting from latex just doesn't make it practical. And I also found out they don't really have the setup anyway (although i'm not sure if that's just a miscommunication since I seem him using laptops with windows all the time).
HTML5?
So I went back to the drawing board. I tried using HTML+CSS but Firefox didn't seem to support enough fine control on formatting for the task - and always added unacceptable headers and footers at print time.
I discovered that texlive has an online formatting service so started working toward a solution that would utilise that. I installed a local copy of the server software (seems unmaintained and insecure but it works well enough) and worked out how to invoke it.
Then I basically went on an epic side-quest to catch up on about 20 years of web development that i'd thankfully missed during my software engineering career. What a weird collection of technology, bizarre toolkits, and shitty jargon (e.g. pollyfills = fills cracks in walls vs pollyfilla fills cracks in a browser's javascript implementation).
Along the way I learnt about a bunch of technlogy:
- LocalStorage;
- IndexDB (neat ... but not really suitable);
- Modules;
- Custom Components (because of the way templates work they're not anywhere as useful as they could be);
- DOJO (Wwhy? Just ... why?);
- PetiteVue (It's sort of cool but the documentation is miserable).
Although I still skipped some of the more prominent stuff like node.js or jQuery.
In the end I chose to use PetiteVue and modules came up with all the parts I'd need to make an application of it:
- A spreadsheet-like table editor;
- A graphical layout editor using drag and drop;
- Various I/O like saving/loading locally, cut and paste;
- Tabbed panels.
But then I ran into a mess trying to combine these parts into a single scope with petite vue and the lack of documentation became a real problem. I did manage to solve the problems but it became tedious and boring and I simply lost interest. Another issue is it still requires hosting somewhere.
Google Apps Script
So I looked into various was of using google apps. I'd rather just use Free Software but it would be interesting to contrast with something proprietary anyway. This was still frustrating as fuck as there are two apis for everything (e.g. Spreadsheets vs SheetsApp) and trying to navigate the documentation just sends you around in circles. Worse is that the documentation page renders wrong in firefox and with the fonts I use so it's hard to even read.
I spent about a week creating an apps script project that could talk to a collection of files - a spreadsheet with data, a doc with templates for items and a doc with the overall layout - only to find that it's simply impossible to insert a column break in a document programatically. This is a total deal-breaker as there is no other way to control the layout so it would break the formatting - e.g. splitting a pair of rows that should be presented together like the drink name and a description.
A workaround would be to have put both columns into a table and then use the javascript to distribute the values across both tables but I was trying to avoid having to special case template handling in the code. And I was so pissed off with finding out the limitations I basically turned it off and went for a walk and haven't revisited it.
One thing I found is that the google docs api isn't really geared to this type of thing - it's solving the very different problem of a distributed multi-user editing environment. This impedence mismatch made it a pain to work with.
The other pain is the abysmal fucking editor you're forced to use in Apps Script projects. It fucking pops shit up over your text almost every time you press a key, and even if you learn to ignore that incredibly irritating obstruction you have to hit escape all the time anyway as otherwise the cursor keys aren't moving the cursor but sliding down a menu - so you're CONSTANTLY hitting escape to close that shit out of the way. And then when you try to use it the Javascript autocompletion is also a complete joke and the popup documentation is either missing or hard to read. The formatting tools are miserable. It doesn't seem to know what the fuck a tab character is. It doesn't handle primary selection at all.
And anything apart from editing is so slow and takes too many clicks.
And I still I was wasn't sure how to turn it into a standalone app, hosting, and the authentication stuff is weird.
Google Sheets and Apps Script and HTML5
I decided to revisit HTML and see if i could get enough control to generate a good printed output via CSS. And it turned out you could - well mostly could anyway. It fucking also has issues with column breaks but they could be worked around. And you need to edit about:config to stop Firefox adding headers and footers - but hardly anone uses Firefox these days anyway.
I first implemented it as a web-app associated with the spreadsheet. I ran into all sort of issues because the apps are run inside a sandboxed iframe. Made it hard to debug and completely breaks printing.
But I suppose the long story short is I got it to work. In the current version the apps script pops up a dialogue box which inserts a html file. The HTML file does all the processing to insert the data into the page template which is a html template. A button opens a new window with a printable version or lets you save it a a standalone pre-formatted html file.
It's pretty slow - it takes longer to retrieve the data than it did to run latex - but the output is acceptable.
The Result
Summary
Latex is still king for generating printed output, but the user experience just isn't there for anyone not prepared to spend a lot of time learning how to use it which is an unreasonable expecation for the general public outside of authoring books.
Web development still sucks donkey dicks. It's slow and frustrating. The debugging experience is crummy. The online tools are a pain to use. Everything is too blindingly white - or if they have an alternative theme it's both too black and psychedelic. Javascript is a weird language - you can certainly do some pretty interesting stuff with it but it's so easy to abuse. CSS is very powerful but still let down by implementation issues no doubt due to it's complexity.
I'm mostly astounded at the amount of human effort that has been put into 'Web 2.0' then 'HTML5', and this is what they came up with? But that's what I think about C++ too.
Having said that, it had it's moments of fun like any coding exercise - through exploration, implementation, and finally refining the implementation and details.