# How the Print Functionality for the Resume Works in resume.github.com
> Learn how the resume.github.com print functionality uses JavaScript and CSS to create a clean, printable version of your resume, hiding UI elements and optimizing typography for physical output.
- Repository: [GitHub resume generator/resume.github.com](https://github.com/resume/resume.github.com)
- Tags: internals
- Published: 2026-03-04
---
**The print functionality triggers the browser's native print dialog via a JavaScript click handler attached to the `#print` anchor, while [`css/print.css`](https://github.com/resume/resume.github.com/blob/main/css/print.css) applies media-specific rules to hide UI elements and optimize typography for physical output.**
The resume.github.com project generates dynamic résumés from GitHub profiles and includes a lightweight client-side print system. This print functionality for the resume requires no server-side processing, relying instead on standard DOM APIs and CSS media queries to transform the web view into a printer-friendly document. Three core files orchestrate the experience: the HTML template, a JavaScript controller, and a dedicated print stylesheet.
## Architecture of the Print System
The implementation follows a clean separation of concerns across three layers:
### HTML Interface in views/resume.html
The markup provides the clickable trigger inside an action bar container. In [`views/resume.html`](https://github.com/resume/resume.github.com/blob/main/views/resume.html), the Print link is defined with an `id` of `print` that JavaScript targets after page load:
```html
```
The Mustache placeholders (`{{name}}`, `{{resume_url}}`) populate at runtime, but the `#print` anchor remains static for event binding.
### Event Handling in js/githubresume.js
The controller logic resides in [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js), where the application binds a click handler after the résumé template renders. Lines 306–310 register the interaction:
```javascript
$("#actions #print").click(function(){
window.print();
return false;
});
```
This handler executes two critical actions: it invokes `window.print()` to open the browser's native print dialog, and returns `false` to prevent the default anchor navigation (since `href="#"` would otherwise jump to the page top).
### Print Optimization in css/print.css
When the print dialog opens, the browser automatically applies rules from [`css/print.css`](https://github.com/resume/resume.github.com/blob/main/css/print.css) under the `@media print` context. Key declarations include hiding the action bar entirely:
```css
#actions {
visibility: hidden;
}
```
The stylesheet also controls pagination and contrast:
```css
#jobs .job,
#about {
page-break-inside: avoid;
}
body, h1, h2, h3, h4 {
color: #000;
}
```
These rules ensure the printed résumé displays clean page breaks and monochrome text suitable for physical copies.
## Step-by-Step Execution Flow
Understanding the complete print functionality for the resume requires tracing the execution sequence:
1. **Page Initialization** – When `$(document).ready` fires in [`githubresume.js`](https://github.com/resume/resume.github.com/blob/main/githubresume.js), the application finishes rendering the Mustache template into the DOM.
2. **Event Registration** – The script selects `#actions #print` and attaches the click listener shown above.
3. **User Interaction** – Clicking the Print anchor triggers the handler, which calls `window.print()`.
4. **Browser Rendering** – The browser re-renders the document using the print media type, applying [`css/print.css`](https://github.com/resume/resume.github.com/blob/main/css/print.css) rules.
5. **Output Generation** – The final output hides the `#actions` container, adjusts margins, and displays link URLs beside anchor text (if configured), producing the printer-friendly résumé.
## Implementation Details
The following snippets demonstrate the complete technical implementation across the three core files.
**JavaScript Controller ([`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js)):**
```javascript
// Lines 306-310
$("#actions #print").click(function(){
window.print(); // Open native browser print dialog
return false; // Prevent default link navigation
});
```
**Print-Specific Styles ([`css/print.css`](https://github.com/resume/resume.github.com/blob/main/css/print.css)):**
```css
/* Hide UI chrome when printing */
#actions {
visibility: hidden;
}
/* Prevent awkward page breaks inside job entries */
#jobs .job,
#about {
page-break-inside: avoid;
}
/* Ensure high contrast for black-and-white printers */
body, h1, h2, h3, h4 {
color: #000;
}
```
**HTML Structure ([`views/resume.html`](https://github.com/resume/resume.github.com/blob/main/views/resume.html)):**
```html
```
Because the system relies solely on standard DOM APIs and CSS media queries, it works across all modern browsers without polyfills or server-side PDF generation.
## Summary
- **Three-file architecture**: [`views/resume.html`](https://github.com/resume/resume.github.com/blob/main/views/resume.html) provides the trigger, [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js) handles the event, and [`css/print.css`](https://github.com/resume/resume.github.com/blob/main/css/print.css) controls the visual output.
- **Native browser API**: The implementation uses `window.print()` rather than third-party libraries or server-side rendering.
- **CSS media queries**: The `@media print` rules in [`css/print.css`](https://github.com/resume/resume.github.com/blob/main/css/print.css) hide the `#actions` bar and optimize typography for physical pages.
- **Event delegation**: The click handler at lines 306–310 of [`githubresume.js`](https://github.com/resume/resume.github.com/blob/main/githubresume.js) prevents default navigation while triggering the print dialog.
## Frequently Asked Questions
### How is the print button event listener attached?
The event listener is attached via jQuery in [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js) after the document ready event fires. Specifically, the code at lines 306–310 selects `#actions #print` and binds a click handler that calls `window.print()` and returns `false` to suppress the default anchor behavior.
### Why does the printed résumé hide the action buttons?
The [`css/print.css`](https://github.com/resume/resume.github.com/blob/main/css/print.css) file includes a rule that sets `#actions { visibility: hidden; }` under the `@media print` context. According to the source code, this ensures that interactive elements like the Print and Email links do not appear on the physical page, keeping the output focused on the résumé content.
### Does the print functionality require server-side processing?
No. The print functionality for the resume is entirely client-side. It relies on the browser's native `window.print()` API and CSS media queries to transform the existing DOM into a printable format without AJAX requests or server-side PDF generation.
### What CSS techniques ensure clean pagination?
The stylesheet uses `page-break-inside: avoid` declarations on container elements like `#jobs .job` and `#about` to prevent awkward splits across pages. Additional rules adjust margins and enforce monochrome colors (`color: #000`) to ensure high contrast when printed on black-and-white devices.