Pageman for Text Processing

Few weeks ago I had to write a report for UNDP on HeatStudio and I didn’t want to use any of my available text processors. I wanted to have my own theme with side comments and great control over the layouts and typography. TeX was exactly what I wanted but I didn’t have the time to go over all of its complicated language and styling rules. Previously I had developed this project called Legend which was an addition to Markdown with its own compiler that could layout side comments for each paragraph. After that I developed a preprocessor called Pageman and we used it a lot, for instance Kary Foundation’s pages are complied using Pageman + @Legend. This is the research page of Kary Foundation :

And it proved to be really helpful, because more than having legend in our files, we could have had C style comments and therefore KFCS but also a mix of HTML, Markdown, Legend and Jekyll in one file.

When it came to that UNDP report I wanted to do it easily. But I wanted to have a sophisticated layout. I had tools like Pages/iA Writer which were super easy to use however they sucked at styling, in the other side was TeX: a super over qualified tool for my task but with a really hard styling system so still not good.

The theme used in Kary Foundation’s main topic pages was great for white papers and it already used legend and was based on the side comments. So why not making something with web? I searched a lot to find systems that could compile HTML to PDF and yet, they all sucked too. My final solution was a bit more strange, I created another mini preprocessor that piped the result of Pageman into an HTML file and that HTML file was specially designed to be in the size of an A4 page and optimized for right page segmentation on the print besides it contained style sheets based on cm and page breaks. It is a bit of a hack but just look how awesome the resulting PDF looks:

The solution is a hack and you show know the internals to know how to use it but well I guess in the future I can make it a standalone thing and let people use the system to write their papers.

Righteous for CSS formatting

While styling the report I found out that I have a personal CSS coding style: First is that I always write my properties in a column and then using tabs I make sure all values start at another column. Also properties are always sorted and also I really like my rules to be all separated with even white space from one another.

Back in the development of Graph, I developed a code formatter for TypeScript/JavaScript called Righteous so that Micha and Sina could easily follow the coding standards of Kary Foundation. Now I though well why not using the same package and adding more formatters for more languages to it?

I wrote a new formatter for CSS. This formatter parses the code and then ignores the initial style and rerenders the whole document regardless of how it looked before. It creates the table like columns and then sorts everything and fixes the white spaces and stuff. This is a rule formatted with Righteous.CSS:

When the first prototype was done a fun style for variables came to my mind: To write variables separately and in two lines, one for the name and one (with additional indentation) for the value. So why not? I added this too to the style and it now looks like something like this in the bigger picture:

Many of the people who looked at this formatting style told me they loved it and many told me that it is ugly and uncomfortable so I guess there is a very big taste factor involved but wether you like it or not it somehow is undeniable that this style is way more readable than normal CSS, you can easily navigate and read values and well because of good tooling as you save you can have your codes formatted.

This new formatter is being shipped with the Righteous for Visual Studio Code plugin and you can start using it today.