# CSS for Markdown, printing

**URL:** <https://discourse.devontechnologies.com/t/css-for-markdown-printing/73106>\
**Category:** Tips\
**Created:** [October 13, 2022, 3:20pm UTC](https://discourse.devontechnologies.com/t/css-for-markdown-printing/73106 "2022-10-13T15:20:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![chrillek](https://discourse.devontechnologies.com/user_avatar/discourse.devontechnologies.com/chrillek/32/29340_2.png) [@chrillek](https://discourse.devontechnologies.com/u/chrillek)\
**Post date:** [October 13, 2022, 3:20pm UTC](https://discourse.devontechnologies.com/t/css-for-markdown-printing/73106/1 "2022-10-13T15:20:39Z")

</div>

This is the tenth part of [some posts on using CSS](https://discourse.devontechnologies.com/t/css-for-markdown-the-series/71424) in and with DT/DTTG. Though I wrote it as a single piece, I broke it up in smaller installments to keep the posts (barely) manageable. Please let me know (preferably by a PM) if you find errors of any kind or are missing details. I’ll correct the first ones and try to help with the second ones.

[Previous post](https://discourse.devontechnologies.com/t/css-for-markdown-dark-mode/71422)

## Styles for printing

To print a Markdown document, the environment will most probably first convert it to HTML and then print that. If that is the case, you can use CSS to style the printed document. Like for dark and light mode, you’ll use a media query for that like so:

```css
@media only print {
/* all print styles go here */
}

```

In addition to all the style definitions you can use in CSS for screen devices, `print` media provides some attributes to fine-tune the output on paper. **Beware** , though: not all browsers support the same set of attributes. To find out more about (un)supported attributes, checkout [Caniuse.com](https://caniuse.com).

### Preventing and forcing page breaks

A page break after a first or second level heading looks bad. For example, a page break directly after a first or second level heading looks bad in print, as does a page break in the middle of a table or between an image and its caption. To achieve page breaks directly after first, second, and third level headings, use

```css
h1, h2, h3 {
  break-after: avoid;
}

```

Similarly, the attribute `break-inside` prevents page breaks _within_ an HTML element:

```css
table, pre, figure {
  break-inside: avoid;
}

```

ensures that tables, code blocks (`pre`) and `figure` elements are not disrupted by a page break. This is, of course, only respected if the respective HTML element does not require more space than one page. A table that is too large to fit on a single page will always be split so that one part is printed on one and the next part on the following page.

Preventing page breaks is one thing, another is to force them, for example just before every level two heading. That makes sure that all parts of the document beginning with a level two heading begin at the top of a new page:

```css
body > h2:not(:first-child) {
  break-before: page;
}

```

The selector `body > h2:not(:first-child)` matches all `h2` elements but the first one. That is useful if the first 2nd level heading comes relatively soon after the first `h1` element: having a new page start after only a very short piece of text might look weird. If you don’t think so, simply use `h2` as the selector here to have a break before _every_ `h2` element.

### Make links visible

On screen and in a PDF, links are simply clickable text. The user does not need to know the URL associated with them. In a printed document, that is quite different, since there’s nothing to click on. So, it might be a good idea to have the URL printed together with the link text. Which can be achieved with a simple CSS rule:

```css
p a::after {
  content: " (" attr(href) ") ";
  color: #9999ff;
}

```

This adds the parenthesized URL after the link text in a light blue color. Note that this will only work for links _inside_ paragraphs. That restriction should be ok for most Markdown documents. Here, the function `attr()` returns the value of the HTML attribute passed as its argument, namely `href`. That is the URL. The `::after` pseudo-selector matches the place just behind the `a` element, and `content` specifies the text to be inserted at the place. Which in this case is the link’s URL in parentheses with a leading and a trailing space.

### Enough text at the top and bottom

Having only one or two lines of a paragraph appear at the top or bottom of a page does not look very nice. This kind of trailing or leading text is called „widow“ or „orphan“ in typesetter lingo, and you can easily prevent both of them appearing in your printed Markdown documents:

```css
p {
  orphans: 3;
  widows: 3;
}

```

Here, the numbers represent lines so that a page break can only occur when at least three lines of a paragraph are printed at the top or bottom of a page.

### Other things relevant for printed documents

You can specify the page dimensions of your document using a `@page` rule:

```css
@page {
  size: A4 portrait;
}

```

sets the size of the box representing a page in your document. It does _not_ say anything about the physical dimensions of the paper you print to. If you have letter paper in your printer, only the A4 part of the sheets will be used for printing. Similarly, if you use `size: legal portrait` in your CSS but have letter paper installed in your printer, part of your document might not get printed.

Similarly, you can use the `@page` rule to specify different margins for left and right pages:

```css
@page :left {
  margin-left: 2.5cm;
  margin-right: 2cm;
}
@page :right {
  margin-left: 2cm;
  margin-right: 2.5cm;
}

```

That way, the inner margin of a double-sided document is always 2.5 cm.

You can also use the `@page` rule to specify other CSS attributes for left (odd) or right (even), the first or blank pages. As said before, perhaps not all browsers do already support all CSS attributes in this context. For example, as of October 2022, neither Firefox nor Safari supported the `size` property. And there might be little use for changing fonts or colors depending on the page that is printed.

---

<div class="post-metadata">

**Author:** ![SlickSlack](https://discourse.devontechnologies.com/letter_avatar_proxy/v4/letter/s/74df32/32.png) [@SlickSlack](https://discourse.devontechnologies.com/u/SlickSlack)\
**Post date:** [October 13, 2022, 3:34pm UTC](https://discourse.devontechnologies.com/t/css-for-markdown-printing/73106/2 "2022-10-13T15:34:56Z")

</div>

This is amazing. Huge thanks.  
To clarify

> [@chrillek](#):
>
> ```auto
> @media only print {
> /* all print styles go here */
> }
> 
> ```

Does this mean all the styling in there ONLY applies when printed via the print dialogue, whether printing to PDF or paper?  
If so that is a great thing to have at ones disposal.  
Make a crazy colourful screen based CSS but have a more straight forward output built in for printing. Especially if you prefer the simplicity of B&W documents and monochrome printers.

---

<div class="post-metadata">

**Author:** ![chrillek](https://discourse.devontechnologies.com/user_avatar/discourse.devontechnologies.com/chrillek/32/29340_2.png) [@chrillek](https://discourse.devontechnologies.com/u/chrillek)\
**Post date:** [October 13, 2022, 4:04pm UTC](https://discourse.devontechnologies.com/t/css-for-markdown-printing/73106/3 "2022-10-13T16:04:50Z")

</div>

> [@SlickSlack](#):
>
> Does this mean all the styling in there ONLY applies when printed via the print dialogue, whether printing to PDF or paper?

Skip the “dialogue” thingy – it doesn’t matter here. When _printing_, if to paper or to PDF, the rules inside the `@media only print` section override those in the rest of the stylesheet. And conversely, whatever you put in this section does not influence the screen one bit. Should’ve made that clearer, I guess.

> [@SlickSlack](#):
>
> Make a crazy colourful screen based CSS but have a more straight forward output built in for printing

Check out the [`print-color-adjust` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/print-color-adjust) for that. But I’d advise againt a “crazy colourful CSS” anyway. At least if you care about our audience and about accessibility.

---

<div class="post-metadata">

**Author:** ![system](https://devontech-discourse.s3.dualstack.us-east-1.amazonaws.com/uploads/original/2X/4/4e6ff70c96be2eb307a274d890bba8d71ba671b3.png) [@system](https://discourse.devontechnologies.com/u/system)\
**Post date:** [October 12, 2025, 4:05pm UTC](https://discourse.devontechnologies.com/t/css-for-markdown-printing/73106/4 "2025-10-12T16:05:38Z")

</div>

Closed on October 12, 2025, 4:05pm UTC

This topic was automatically closed 1095 days after the last reply. New replies are no longer allowed.