I keep my running CV on my website for a few reasons. It keeps everything in one place. It’s handy to point students towards when they have questions about how to list things on their own CV. It lets me pull in some quick stats on my blog posts using Jekyll. But I’ve always run into problems when it comes time to submit my CV as an actual document. Copying the page over to Microsoft Word brings in all the detritus of my web styling and structure, and I have to dutifully edit those elements out before submission.

I described this problem to Jeremy Boggs, our Head of R&D, and he immediately suggested that I look into making a print stylesheet for my CV page. I knew you could use CSS to style the ways your web page gets printed, but I’d never actually played around with it before. Now I’ve got things going such that I have far less to do when I go to submit my CV. This post documents that process.

The first thing I needed to do was get a way to preview what I was looking at. By default, your developer environment won’t render your print styles unless you go to print a page and look at the preview that pops up. I followed this set of instructions for getting Google Chrome to emulate my print styles in the browser as I worked.

Now that I can see my work, my first real step is to make a new print stylesheet and link it to my site in the head of my default template. This print stylesheet is fairly specialized to a single page, so I wrap the reference in an if statement so that it is only included on that particular page.

_includes/head.html

{% if page.title == "CV" %}
  <link rel="stylesheet" href="{{ site.baseurl }}/styles/print.css">
{% endif %}

Now that the stylesheet is included, I start to build up a styles/print.css file one piece at a time based on the things I want to change. First off was hiding web-only materials like the nav bar and the masthead.

styles/print.css

  /* Hide web-only content  */
  header, nav, h1.page-title, #web-title{
    display: none;
  }

But I actually do want some material as a masthead. I implement this by actually having some content on the web that is only rendered to the browser if it is printed. This becomes a part of the masthead, contained in my default layout for my jekyll site.

_layouts/default.html

<div class="print-only" id="print-title">Brandon Walsh | walsh.brandon.michael@gmail.com | @walshbr</div>

And then it only appears when printed by specifying a print-only class for those elements that I only want when printing.

styles/print.css

  .print-only{
    /* Display print-only content */
    display: block;
  }

The web version of my CV does not span the whole width of the page, which is good for readability on the web but a problem when printing. So these settings create a more typical one-inch margin for the document. Another interesting issue I ran into was that some printers by default will include metadata - date, page number, time - on the page for printing. The margin settings below cut that off.

styles/print.css

  div.container.content {
    /* normalize content sizing for printing */
    max-width: none !important;
  }

  @page {
    /* hide printer-specific information that would otherwise get added */
    margin:0;
    padding: 1in;
  }

And then finally I got down to the actual task of setting up some basic stylings that make it a little less web and a little more print. I switch fonts, change the text size, and revert to default URL text decorations for the sake of the genre. In the past I’ve found that my link styles, especially, look very strange when copied over to a print document.

styles/print.css

  html, h2, h3, #print-title{
    /* set print-ready font and text size */
      font-family: Georgia, 'Times New Roman', Times, serif; 
      font-size: 12px;
  }

  a{
    /* Normalize URL colors */
      text-decoration: underline;
      color: blue;
  }

One stretch goal that I haven’t fully implemented: I commonly need a quick way to cut my CV down. There’s no good way to do it programmatically with any real level of precision, but Jeremy showed me how to do a rough cut that works well in a pinch. I’m using Jekyll by default, which will give ID’s to all of my headers that match the titles. Jeremy showed me how to use CSS selectors to selectively hide whole batches of content based on those ID’s. The following CSS would hide all of my service commitments. Not really super useful to do a lot of, but maybe helpful to know about!

styles/print.css

/* example for how to hide specific sections */
/* 
h2#professional-service-and-affiliations,
h2#professional-service-and-affiliations+ul,
h3#local-service-washington-and-lee,
h3#local-service-washington-and-lee+ul,
h3#local-service-university-of-virginia+ul{
  display:none;
} */

That’s it for now. Much more that I could do, but this serves my needs nicely. And here’s a quick side-by-side of the first printed page to see how the new print.css sheet stacks up.

First the original print, which is a pretty close copy of the web version:

And now the new one with a print stylesheet incorporated. Much more usable as a CV! I could save it as a PDF to submit.

I’ve pasted the full contents of all the relevant files as they stand in case you’re interested in replicating.

_includes/head.html

{% if page.title == "CV" %}
  <link rel="stylesheet" href="{{ site.baseurl }}/styles/print.css">
{% endif %}

_layouts/default.html

<div class="print-only" id="print-title">Brandon Walsh | walsh.brandon.michael@gmail.com | @walshbr</div>

styles/print.css

@media print {
  
  /* Hide web-only content  */
  header, nav, h1.page-title, #web-title{
    display: none;
  }

  .print-only{
    /* Display print-only content */
    display: block;
  }

  div.container.content {
    /* normalize content sizing for printing */
    max-width: none !important;
  }

  @page {
    /* hide printer-specific information that would otherwise get added */
    margin:0;
    padding: 1in;
  }

  html, h2, h3, #print-title{
    /* set print-ready font and text size */
      font-family: Georgia, 'Times New Roman', Times, serif; 
      font-size: 12px;
  }

  a{
    /* Normalize URL colors */
      text-decoration: underline;
      color: blue;
  }

/* example for how to hide specific sections */
/* 
h2#professional-service-and-affiliations,
h2#professional-service-and-affiliations+ul,
h3#local-service-washington-and-lee,
h3#local-service-washington-and-lee+ul,
h3#local-service-university-of-virginia+ul{
  display:none;
} */

}

(Note: Brandon is going to blog about related work! Will link here once that’s live.)

This is a post to tell yall about a neat little web development thing that’s allowed me to easily make (and keep updated!) nifty things displaying kinds of data related to both professional development (easy CV webpage and printable format generation!) and bibliography/book arts (an online type speciment book, based on an easily-updatable Gsheet backend!). If you aren’t interested in the code, do just skim to see the photos showing the neat webpage things this can make.

Figure 1: Screenshot of a type specimen webpage created with Jekyll and a CSV of data.

Figure 2: Screenshot of a CV webpage created with Jekyll and a CSV of data.

Jekyll (skip this section if you know what Jekyll is)

Jekyll is a tool for making websites that sit in a middle ground between using a complex tool like WordPress or Drupal (a content management system, aka CMS) or completely coding each page of your website in HTML by hand, and I think easier to create and manage than either extreme. It’s set up to follow principles of “minimal computing” (aka #mincomp), which is a movement toward making technical things more manageably scoped with an emphasis on accessibility for various meanings of that. For example, using website development tools that keep the size of your website files small lets folks with slow internet still access your site.

If you want to know more about Jekyll, I’ve written peer-reviewed pieces on the what, why, and how to learn to make your own Jekyll-generated DH websites—suitable for folks with no previous web development experience!—as well as (with co-author Brandon Walsh) how to turn that into a collaborative research blog with a review workflow (like how ScholarsLab.org manages its blog posts). Basically, Jekyll requires some webpage handcoding, but:

• takes care of automating bits that you want to use across your website so you don’t have to paste/code them on every page (e.g. you header menu)
• lets you reuse and display pieces of text (e.g. blog posts, events info, projects) easily across the website (like how ScholarsLab.org has interlinked blog posts, author info, people bio pages, and project pages linking out to people and blog posts involved with that project)

DATA PLOP TIME

The cool Jekyll thing I’ve been enjoying recently is that you can easily make webpages doing things with info from a spreadsheet. I am vaguely aware that may not sound riveting to some people, so let me give you examples of specific uses:

• I manage my CV info in a spreadsheet (a Gsheet, so I have browser access anywhere), with a row per CV item (e.g. invited talk, published article)
• I also keep a record of the letterpress type and cuts (letterpress illustrations) owned by SLab and by me in a Gsheet

I periodically export these Gsheets as a CSV file, and plop the CSV file into a /_data folder in a Jekyll site I’ve created. Then, I’ve coded webpages to pull from those spreadsheets and display that info.

Figure 3: Screenshot of my letterpress specimen Gsheet

Data Plop Op #1: Online Letterpress Type Specimen Book

You don’t need to understand the code in the screenshot below; just skim it, and then I’ll explain:

Figure 4: Screenshot of some of the code pulling my letterpress Gsheet data into my Jekyll webpage

I include this screenshot to show what’s involved to code a webpage that displays data from a CSV. What this shows is how I’m able to call a particular spreadsheet column’s data by just typing “”, rather than pasting in the actual contents of the spreadsheet! LOTS of time saved, and when I edit the spreadsheet to add more rows of data, I just need to re-export the CSV and the website automatically updates to include those edits. For example, in the above screenshot, my CSV has a column that records whether a set of letterpress type is “type high” or not (type high = .918”, the standard height that lets you letterpress print more easily with different typefaces in one printing, or use presses that are set to a fixed height). In the code, I just place “” where I want it in the webpage; you can see I’ve styled it to be part of a bullet list (using the “<li>” tag that creates lists).

In the screenshot, I also use some basic logic to display different emoji, depending on what’s in one of the CSV columns. My “uppercase” column says whether a set of letterpress type includes uppercase letters or not. My code pulls that column (“”) and checks whether a given row (i.e. set of letterpress type or cut) says Uppercase = yes or no; then displays an emoji checkmark instead of “yes”, and emoji red X instead of “no”.

Here’s how one CSV line displayed by my specimen book webpage looks (I haven’t finished styling it, so it doesn’t look shiny and isn’t yet live on my very drafty book arts website):

And I was also able to code a table version, pulling from the same data:

If the code discussion is confusing, the main takeaway is that this method lets you

1. manage data that’s easier to manage in a spreadsheet, in a spreadsheet instead of coded in a webpage file; and
2. easily display stuff from that spreadsheet, without needing to make a copy of the data that could become disjoint from the spreadsheet if you forget to update both exactly the same.

Data Plop Op #2: Keeping your CV updated

I used to manage my CV/resume as Google Docs, but that quickly turned into a dozen GDocs all with different info from different ways I’d edited what I included for different CV-needing opportunities. When I had a new piece of scholarship to add, it wasn’t clear which GDoc to add it to, or how to make sure CV items I’d dropped from one CV (e.g. because it needed to focus on teaching experience, so I’d dropped some less-applicable coding experiences from it) didn’t get forgotten when I made a CV that should include them.

UGH.

A happy solution: I have 1 CV Gsheet, with each row representing a “CV line”/something I’ve done:

I periodically export that CSV and plop it into a Jekyll site folder. Now, I can do 2 cool things: the first is the same as the letterpress specimen book, just styling and displaying Gsheet data on the web. This lets me have both webpages showing a full version of my CV, and a short version of my CV, and theoretically other pages (e.g. code a page to display a CV that only includes xyz categories):

And! I’ve also coded a printable CV. This uses a separate CSS stylesheet that fits how I want a printed CV to look different from a website, e.g. don’t break up a CV line item between two pages, don’t include the website menu/logo/footer. Same text as above, styled for printing:

When I need a whittled down CV that fits a page limit, or that just shows my experience in one area and not others I’m skilled in, I can just make a CSV deleting the unneeded lines—my spreadsheet ahs category and subcategory columns making it easy to sort these, and also to tag lines that could appear in different sections depending on CV use (e.g. sometimes a DH project goes under a peer-reviewed publication section, or sometimes it goes under a coding section as I want my publication section to only include longform writing). But I add new lines always to the same core Gsheet, so I don’t get confused about what I’ve remembered to record for future CV inclusion where.

I currently don’t have this CV website online—I just run it locally when I need to generate a printable CV. But I’ll be adding it to my professional site once I have a bit more time to finish polishing the styling!

In conclusion

Jekyll + CSV files =

(One of the letterpress cuts recorded by my specimen book Gsheet/webpage, as discussed above!)

I coded a quick web app for a particular book arts need: Limited Letterpress Synonym Finder. If you too also only have 1xA-Z letterpress type on hand (ie just the 26 characters of the alphabet, 1 sort per letter) and what to figure out what you can print without needing to carefully position (register) your paper and do multiple pressings between moving the letters around, you can enter words here to see only those synonyms you’re able to print (i.e. only synonyms using no more than 1 of each A-Z letter).

Some future work I’m planning for my Zine Bakery project researching, collecting, and amplifying zines at the intersections of tech, social justice, and culture.

Critical collecting

• Ethical practices charter: how do I collect and research?
  • Finish drafting my post on ethics-related choices in my project, such as
    • not re-hosting zines without creator informed, explicit consent, so that catalogue users use zine creator’s versions and see their website; and
    • taking extra care around whether zines created for classes gave consent outside of any implicit pressures related to grades or the teacher serving as a future job reference
  • Read the Zine Librarians Code of Ethics in full, and modify my charter wit citations to their excellent project.

• Collecting rationale: why do I collect, and what do I/don’t I collect?

• ID areas I need to collect more actively, for Zine Bakery @ Scholars’ Lab goals of a welcoming, diverse collection reflecting SLab’s values and our audience

• Contact zine creators: I already don’t display, link, etc. zines creators don’t positively indicate they want people to. But I could also contact creators to see if they want something added/edited in the catalogue, or if their preferences on replication have changed since they published the zine; and just to let them know about the project as an example of something citing their work.

• Accessibility:
  • Improve zine cover image alt text, so rather than title and creators, it also includes a description of important visual aspects of the cover such as color, typography, illustration, general effect. Retry Google Vision AI, write manually, or look at existing efforts to markup (e.g. comics TEI) and/or extrapolate image descriptions.
  • Look into screen-reading experience of catalogue. Can I make a version (even if it requires scheduled manual exports that I can format and display on my website) that is more browsable?
  • Run website checks for visual, navigational, etc. accessibility

Data, website, coding

• Better reader view:
  • Create a more catalogue-page-like interface for items
  • Make them directly linkable so when I post or tweet about a zine, I can link people directly to its metadata page

• Self-hosted data and interface: explore getting off AirTable, or keeping it as a backend and doing regular exports to reader and personal collecting interfaces I host myself, using data formats + Jekyll

• Make metadata more wieldly for my editing:
  • I wish there were a way to collapse or style multiple fields/columns into sections/sets.
  • I might be able to hackily do this (all-caps for umbrella field for a section? emojis?); or
  • Using an extension allowing styling view (unsure if these are friendly for bulk-editing);
  • the self-hosted options mentioned above might let me better handle this (use or make my own, better viewing interface)

• Crosswalk my metadata to xZINECOREx metadata?: so is interoperable with the Zine Union Catalogue and other metadata schema users

• File renaming:
  • I started with a filename scheme using the first two words of a zine title, followed by a hyphen, then the first creator’s name (and “EtAl” if other creators exist)
    • I quickly switched to full titles, as this lets me convert them into alt text for my zine quilt
    • I need to go back and regularize this for PDFs, full-size cover images, and quilt-sized cover images.
• Link cover images to zine metadata (or free e-reading link, if any?) from zine quilt vis

Metadata & cataloguing

• Create personal blurbs for all zines that don’t have one written by me yet

• Further research collected zines so I can fill in blank fields, such as publication date and location for all zines

Community

• Explore setting up for better availability to the Zine Union Catalogue, if my project fits their goals

• Further refine logo/graphics:
  • finish design work
  • create stickers to hand out, make myself some tshirts :D
• Learn more about and/or get involved with some of the
  • cool zine librarian (Code of Ethics, ZLUC, visit zine library collections & archives) and
  • zine fest (e.g. Charlottesville Zine Fest, WTJU zine library) efforts

Research & publication

• Publication:
  • In addition to
    • multiple blog posts and
    • my Zine Bakery site and
    • public zine catalogue,
  • I’ve published
    • one peer-reviewed article and
    • given one conference talk about my zines research
  • I’ll be giving another public talk this fall.
  • I’d like to explore ways to further publish and receive peer review, such as submitting a project statement to Reviews in DH.
• More visualization or analysis of metadata fields, e.g.
  • timeline of publication
  • heatmap of publication locations
  • comparison of fonts or serif vs. sans serif fonts in zines
• Digital zine quilt: play with look of the zine quilt further:
  • Add way to filter/sort covers?
  • Add CSS to make it look more quilt-like, e.g. color stiching between covers?

Making

• Thermal mini-receipt printer:
  • Complete reads/zines recommendation digital quiz and mini-receipt recommendation printout kiosk.
  • Possibly make a version where the paper spools out of the bread holes of a vintage toaster, to go with the Zine Bakery theme?
  • Thanks to Shane Lin for suggesting a followup: possibly create version that allows printing subset of zines (those allowing it, and with print and post-print settings that are congenial to some kind of push-button, zine-gets-printed setup.

• Real-quilt zine quilt: Print a SLab-friendly subset of zine covers as a physical quilt (on posterboard; then on actual fabric, adding quilt backing and stitching between covers?)

• More zine card decks: create a few more themed subsets of the collection, and print more card decks like my initial zine card deck