Ben Crowder / Blog

Blog: #press

A short followup to what I wrote last year about Press, my abandoned typesetting engine project: I’m now fully convinced that the web platform is where I want to do typesetting. It’s open, programmatic, and capable. Source files are plain text, easy to version control, and fairly future-proof. And even though it’s not WYSIWYG — at least not the way I’m using it — it’s much more comfortable for me as a working environment.

For non-book work (charts, some kinds of documents), I’ve found that browsers already support everything I need (like @page). That’s how I’ve done all my recent genealogy design work, and it’s how I’ll do any language charts I make going forward. And for things like books where browser support isn’t quite there yet, Paged.js works well (and will presumably be phased out once browser support gets better).

Not to mention how nice it is for both print and digital workflows (EPUB, web) to all use the same technologies. I also love that the web is cross-platform. Something I ran into when I was making charts with PlotDevice (which is Mac-only) was that people on Windows couldn’t modify the charts even when I gave them the source. That’s not a problem with the web.

I’ve even started using the web platform for less webby things like making wallpaper for my phone:

Dark cloudy background with the text of Matthew 11:28 at the center.

Here’s the HTML (the 375×812px size is the CSS resolution of my iPhone 12 Mini — RIP — and also keep in mind that this was for a one-off never to see the light of day, so I took the liberty of cutting a few corners):

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="background">
    <svg id="darknoise" viewBox="0 0 375 812" xmlns="http://www.w3.org/2000/svg">
      <filter id="noiseFilter">
        <feTurbulence baseFrequency="0.5" numOctaves="8" />
      </filter>
      <rect width="100%" height="100%" filter="url(#noiseFilter)" />
    </svg>

    <svg id="lightnoise" viewBox="0 0 375 812" xmlns="http://www.w3.org/2000/svg">
      <filter id="noiseFilter2">
        <feTurbulence seed="485" baseFrequency="0.005" numOctaves="12" />
      </filter>
      <rect width="100%" height="100%" filter="url(#noiseFilter2)" />
    </svg>
  </div>

  <div class="quote">Come unto me, all ye that labour and are heavy laden, and I will give you rest.</div>

  <div class="reference">Matthew 11:28</div>
</body>
</html>

The CSS (with the font purchased from FontShop):

* {
  box-sizing: border-box;
  font-family: Clifford Pro;
}

html {
  height: 100%;
}

body {
  color: #777;
  font-size: 1.6rem;
  margin: 0;
  text-align: center;
}

.background {
  background: radial-gradient(circle at 50% 90%, #222, #111);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.background svg#darknoise {
  bottom: 0;
  filter: saturate(0);
  left: 0;
  mix-blend-mode: multiply;
  opacity: 0.9;
  position: absolute;
  right: 0;
  top: 0;
}

.background svg#lightnoise {
  bottom: 0;
  filter: saturate(0);
  left: 0;
  mix-blend-mode: soft-light;
  opacity: 0.4;
  position: absolute;
  right: 0;
  top: 0;
}

.quote {
  line-height: 1.4;
  margin: 25rem 1.5rem 0;
}

.reference {
  color: hsl(0 40% 32%);
  font-size: 1.3rem;
  font-style: italic;
  margin-top: 1rem;
}

I then used headless Chrome to export the PNG (Firefox would probably have worked as well, though I haven’t yet tested it for this):

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --disable-gpu --screenshot --window-size=375x812 index.html

It’s not the world’s most amazing wallpaper or anything, but I’m still pleased that I was able to make something I’m reasonably happy with using technologies I love. (I could have also used WebGL shaders or Canvas. Lots of options!)

Here’s to the open web.


Reply via email or office hours

Update on Press (the PDF compiler). I haven’t worked on it at all lately, but I wanted to document its current state for history’s sake, and as part of working in public. (I’ve also been sitting on this post for over a year.)

Back in 2017 I did end up re-architecting Press to use Low Ink as an intermediate page description language. In the process, Low Ink changed from a JSON-based idea to this:

:page 11x8.5in
:bleedbox x=0.125in y=0.125in w=5.75in h=8.75in
:fontmap family=helv weight=regular style=normal standard=Helvetica
:yinvert
:push
:translate x=72 y=72

# ascender
:push
:translate x=0 y=1040
:strokecolor hex=#999
:linewidth 0.25pt
:line x1=0 y1=0 x2=1080 y2=0
:stroke
:push
:fillcolor hex=#999
:font family=helv size=14pt
:text x=1085 y=-3 text="ascender"
:pop
:pop

# filled glyph
:push
:translate x=1320 y=240
:fillcolor hex=#000
:moveto x=0 y=0
:pathto x=400 y=300 cx1=120 cy1=300 cx2=140 cy2=300
:pathto x=320 y=200 cx1=540 cy1=300 cx2=320 cy2=180
:lineto x=350 y=350
:lineto x=450 y=250
:lineto x=150 y=0
:moveto x=200 y=200
:lineto x=200 y=250
:lineto x=250 y=250
:lineto x=250 y=200
:lineto x=200 y=200
:fill
:pop

It was intended to be a fairly low-level wrapper on the PDF format, with the idea being that other libraries/apps would provide more ergonomic abstractions on top of it.

I initially used Python because Press started out as a library, but with the pivot to a compiler model, I think Go or Rust would probably end up being a better choice (Rust would make integrating HarfBuzz a bit easier, at any rate).

Potential improvements

To my 2021 eyes, the language design isn’t particularly elegant. I like that the parameters are named (clarity), but for most of the commands there aren’t actually that many parameters, because many of the settings that would normally be parameters are separate commands. For parameters that are clearly unambiguous, the names hamper readability. For example, I think something like this might be better:

:line 0,0 to 1080,0
:fillcolor #345

I’ve also thought that push and pop could potentially be clearer as curly braces, and that the initial colons aren’t really necessary:

{
  translate 0,1040
  strokecolor #999
  linewidth 0.25pt
  line 0,0 to 1080,0
  stroke

  {
    fillcolor #999
    font 14pt helv
    text 1085,-3 "ascender"
  }
}

The future

My initial reason for building Press was to have an easy, programmable cross-platform way to create language chart PDFs (so I could move away from PlotDevice/DrawBot), and what I’ve realized (acknowledging that I haven’t really been making language charts in recent years) is that there are some other, better options now.

One that seems decent is SVG, converted to PDF by way of Inkscape. Initial tests here seem like it would probably work fine.

Another promising option that I admittedly haven’t looked into very much yet is Paged.js. HTML and CSS are already great for declarative typesetting, and the more I’ve thought about programmatic typesetting, the more this model seems to be the future I’d want to work with (and not just because of parity with web, though that makes it much more compelling).

tl;dr I don’t see myself continuing on with Press, so we may as well call a mortem on it.


Reply via email or office hours

Some quick thoughts about the project space I see myself working in (meaning personal coding projects that aren’t the productivity tools I mentioned before), both now and for the foreseeable future. To be honest, it’s mostly a roadmap for myself, posted here as part of working in public.

Bookmaking tools

One of the areas in the project space is bookmaking tools: tools that help with making either print books or ebooks. What I’ve worked on in that area (and some of these are still in progress or in the future):

  • Press — low-level typesetting (PDF compiler)
  • Ink — higher-level typesetting
  • Curves — programmatic type design
  • Typlate — type design templates
  • md2epub/Caxton — ebook compiler
  • epubdiff — ebook differ
  • Fledge — text processing shell
  • Storybook — writing tool (covered under the productivity tools, yes, but I feel it fits in here)

Creativity tools

The next area, somewhat related, is creativity tools: tools for making art, music, etc. I do realize that there’s a bit of overlap between the two areas — art can be used in books, for example. This is not a rigorous taxonomy.

What I’ve worked on:

  • Trill — music composition REPL
  • Grain — command-line tool for texturing art

While I haven’t done much in this area so far, the intersection of software and art has been calling to me more lately. I expect creativity tools to become much more of a focus for me, probably even more so than the bookmaking tools.

Human-Computer Interaction

Last but not least, HCI. My master’s thesis is in this area, and much of my other work also touches on it in limited ways. (What I mean by that, I think, is that with projects like Trill, Curves, and Press, the parts that have most interested me are the interfaces. Also, those interfaces have been textual in these particular cases, but I’m also interested in other kinds of UIs.) So I plan to start building more proofs of concept and interface experiments — like the spatial interface ideas I mentioned several weeks ago.


Reply via email or office hours

Blogging is low on the priority list at the moment, thanks to school. The preliminary classes for the master’s degree are going well. I’m writing assembly for my computer systems class, and I have to say, I really like assembly. (No sarcasm.) It’s beautiful and simple in a way I didn’t expect. I don’t see myself using it much, but it’s a good tool for the belt.

Oh, with Press, I realized a few days ago that it’s a good candidate for the first implementation of Low Ink (a JSON-based page description language that compiles to PDF). I’ll be re-architecting that part of Press so that it uses Low Ink. Also hoping to finish up the text part of Press (HarfBuzz, etc.) soon so that it’s usable for more than just basic drawing. (I’m dealing with font subsetting and encoding stuff at the moment.)


Reply via email or office hours

After a break of several months, I’m getting back to working on Press. Status is pretty much the same as last time I posted about it. (It’s actually even a little more behind than that, since I had HarfBuzz Python bindings working then, but now — after upgrading to macOS Sierra — I’m running into issues with PyGObject’s introspection module. I may end up having to write my own HarfBuzz bindings with CFFI. We’ll see.)

The high-level roadmap right now: get font embedding to work correctly, add support for embedding images (which should be fairly easy, I think), integrate ICU for language analysis and HarfBuzz for shaping, and add color space support.

As of now, I plan to use Press for making language charts (which I’ve been using PlotDevice for) and picture books. Once it’s to the point where I can do that, then I’ll start on Ink (low-level typesetting engine, intended for typesetting books, and higher-level rule-based engine for making it easier to work with).


Reply via email or office hours

Progress on Press has been a bit slower lately. I’ve fixed most of the errors I discovered by running the exported PDFs through the 3-Heights PDF validator. I also refactored the code and reorganized the package per Kenneth Reitz’s advice.

I’ve implemented initial support for embedding subsetted fonts (doing the subsetting via fontTools.subset), and while the fonts (including uninstalled fonts) display fine on my macOS box, the PDFs don’t validate properly and the fonts don’t show at all on iOS, which means the embedding isn’t actually working right. Current suspects include the /Differences array (which I’m not generating properly yet) and the CMap (which I haven’t implemented at all yet). I still have to implement ToUnicode as well, so that copying and pasting does what it should, but I’m fairly certain that isn’t what’s causing the fonts to not embed properly.

I’m also trying to figure out color spaces. In general I believe I want the output to be either DeviceRGB or DeviceCMYK, with some way of specifying an output intent, and also an option for the user to embed an ICC profile if they want. I’m part of the way there.

Anyway, the font stuff is far more complicated than I expected going in, but I’m still making progress, and I’m learning a lot.


Reply via email or office hours

Press can now generate PDFs. For example:

from press import Press

with Press('press-demo.pdf', size=Press.LETTER, margin=1*Press.INCH) as p:
    # Top and bottom borders
    p.pen(0.25)
    p.line(p.page_min_x, p.page_min_y, p.page_max_x, p.page_min_y)
    p.line(p.page_min_x, p.page_max_y, p.page_max_x, p.page_max_y)

    # Rotated colored rectangle
    p.push()
    p.pen(15)
    p.stroke(hsl=(0, 0.5, 0.5))
    p.fill('#fd0')
    p.translate(p.page_min_x + 4*Press.INCH, p.page_max_y - 4*Press.INCH)
    p.rotate(45)
    p.rect(0, 0, 2*Press.INCH, 2*Press.INCH)
    p.pop()

    # Lines of varying thickness
    p.translate(p.page_min_x + 1*Press.INCH, p.page_min_y + 1*Press.CM)
    for i in range(1, 20):
        p.pen(i / 2)
        p.line(0, 0, 30, 0)
        p.translate(0, 20)

That code generates the following PDF (linked):

press-demo.png

I’m working on text/font support now, which is by far the most complicated thing about this project.

Since there isn’t a clean, cross-platform way to select a font via code, I’ve decided to use font maps (inspired by @font-face in CSS):

fontmap = {
    'paths': [ './fonts', '/Library/Fonts', ],
    'Minion Pro': [
        { 'weight': 300, 'italics': False, 'filename': 'MinionPro-Regular.otf', },
        { 'weight': 300, 'italics': True,  'filename': 'MinionPro-It.otf', },
        { 'weight': 600, 'italics': False, 'filename': 'MinionPro-Bold.otf', },
        { 'weight': 600, 'italics': True,  'filename': 'MinionPro-BoldIt.otf', },
    ],
}

with Press('output.pdf', size=Press.LETTER, fontmap=fontmap) as p:
    p.font('Minion Pro', size=24, weight=300, italics=True, dlig=True, smcp=True, tracking=50)
    p.align(Press.LEFT)
    p.text("This is a test.", 50, 50)

Font maps are admittedly extra work, but they do have some advantages as well: you can use fonts you haven’t installed, for example, and you can specify exactly which font files you want to use. And I can’t see any good way around the lack of a cross-platform font selection mechanism (meaning, a way to pass in ‘Minion Pro’ with specific weight and styles, and get a font filename in return).

Anyway, I’m in the middle of reading the PDF spec on CIDFonts and CMaps. It’s … complicated. It makes my head hurt. But it’ll be awesome when it’s done.


Reply via email or office hours

I’ve renamed inkpdf to Press (as in printing press).

I reached the point where creating the PDF manually is no longer feasible, so I’ve been working on getting Press to a point where I can implement the PDF generation. The basic structure is in place, sans the PDF part. (That’s next.)

Here’s what a Press script looks like right now:

from press import Press

p = Press('output.pdf', width=6*Press.INCH, height=11*Press.INCH,
          margin=1*Press.INCH)

# Horizontal borders at top and bottom of page
p.stroke('#000')
p.pen(1.0)
p.line(p.page_min_x, p.page_min_y, p.page_max_x, p.page_min_y)
p.line(p.page_max_x, p.page_min_y, p.page_max_x, p.page_max_y)

# Page 2
p.page(2)
p.layer('base')
p.stroke(rgb=(1, 0, 0))
p.line(150, 150, 300, 300)
p.layer('fg')
p.stroke(hsl=(0, 0.5, 0.8))
p.line(300, 300, 450, 150)

# Go back and add another line to page 1
p.page(1)
p.stroke('#025')
p.line(p.page_min_x, p.page_min_y, p.page_min_x, p.page_max_y)

p.save() # this doesn't work yet

You can also do something like this:

with Press('output2.pdf', size=Press.LETTER,
           margin=(0.5*Press.INCH, 1.0*Press.INCH),
           inner_margin=0.5*Press.INCH,
           outer_margin=1.25*Press.INCH,
           bleed=.125*Press.INCH) as p:
    p.line(50, 50, 250, 50)
    # And so on

(Context manager, inner/outer margin, bleed, built-in paper sizes.)

Up next: adding more primitives, designing the font selection mechanism, getting it to generate an actual PDF, embedding fonts, using arbitrary Unicode code points, integrating HarfBuzz, etc.


Reply via email or office hours