DEV Community: Andreas

Building an Open Floor Parrot Agent in Python

Andreas — Sat, 19 Jul 2025 12:29:03 +0000

In this short guide, we will build a simple parrot agent together using Python. The parrot agent will simply repeat everything you send him and a small 🦜 emoji in front of the return. We will create the Open Floor Protocol-compliant agent with the help of the openfloor Python package.

Initial Setup

First, let's set up our project by creating the project folder and installing the required packages:

mkdir parrot-agent
cd parrot-agent
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

Create a requirements.txt file with the following content:

--extra-index-url https://test.pypi.org/simple/
events==0.5
jsonpath-ng>=1.5.0
openfloor
flask

Then install the dependencies:

pip install -r requirements.txt

Now that the basic setup is done, let us start coding together!

Step 1: Building the Parrot Agent Class

Let's create our main agent file. Create a new file parrot_agent.py, this will contain the main logic of our agent.

Step 1.1: Add the imports

Let's start with importing everything we need from the openfloor package, add them at the top of your parrot_agent.py file:

from openfloor import (
    BotAgent,
    Manifest,
    Identification,
    Capability,
    SupportedLayers,
    UtteranceEvent,
    Envelope,
    DialogEvent,
    TextFeature,
    To,
    Sender,
    PublishManifestsEvent,
    Parameters
)

Why these imports?

BotAgent - The base class we'll extend
Manifest - To define our agent's capabilities and identification
UtteranceEvent - The type of event we'll handle for text messages
Envelope - Container for Open Floor messages
DialogEvent and TextFeature - To create text responses
To and Sender - For message addressing

Step 1.2: Start the ParrotAgent class

Now let's start creating our ParrotAgent class by extending the BotAgent:

class ParrotAgent(BotAgent):
    """
    ParrotAgent - A simple agent that echoes back whatever it receives
    Extends BotAgent to provide parrot functionality
    """

    def __init__(self, manifest: Manifest):
        super().__init__(manifest)
        print(f"🦜 Parrot Agent initialized with speaker URI: {self.speakerUri}")

What we just did:

Created a class that extends BotAgent
Added a constructor that takes a manifest and passes it to the parent class
The manifest will define what our agent can do

Step 1.3: Override the utterance handler

The BotAgent class provides a default bot_on_utterance method that we need to override. This is where the magic happens:

    def bot_on_utterance(self, event: UtteranceEvent, in_envelope: Envelope, out_envelope: Envelope) -> None:
        """
        Override the utterance handler to provide parrot functionality
        """
        print("🦜 Processing utterance event")

        try:
            # Extract the dialog event from the utterance parameters
            dialog_event_data = event.parameters.get("dialogEvent")
            if not dialog_event_data:
                self._send_error_response("*chirp* I didn't receive a valid dialog event!", out_envelope)
                return

            # Convert to DialogEvent object if it's a dictionary
            if isinstance(dialog_event_data, dict):
                dialog_event = DialogEvent.from_dict(dialog_event_data)
            elif isinstance(dialog_event_data, DialogEvent):
                dialog_event = dialog_event_data
            else:
                self._send_error_response("*chirp* I didn't receive a valid dialog event!", out_envelope)
                return

            # Check if there's a text feature
            text_feature = dialog_event.features.get("text")
            if not text_feature or not hasattr(text_feature, 'tokens') or not text_feature.tokens:
                self._send_error_response("*chirp* I can only repeat text messages!", out_envelope)
                return

            # Extract the original text from tokens
            original_text = "".join(token.value for token in text_feature.tokens if token.value)

            # Create parrot response with emoji prefix
            parrot_text = f"🦜 {original_text}"

            # Create the response dialog event
            response_dialog = DialogEvent(
                speakerUri=self.speakerUri,
                features={"text": TextFeature(values=[parrot_text])}
            )

            # Create and add the utterance event to the response
            response_utterance = UtteranceEvent(
                dialogEvent=response_dialog,
                to=To(speakerUri=in_envelope.sender.speakerUri)
            )

            out_envelope.events.append(response_utterance)
            print(f"🦜 Echoing back: {parrot_text}")

        except Exception as error:
            print(f"🦜 Error in parrot utterance handling: {error}")
            self._send_error_response("*confused chirp* Something went wrong while trying to repeat that!", out_envelope)

The parroting logic:

Extract the dialog event from the utterance parameters
Get the text feature and extract text from tokens
Add the 🦜 emoji prefix
Create a dialog event response
Send it back to the original sender

Step 1.4: Add helper methods

Let's add the helper methods we called in bot_on_utterance:

    def _send_error_response(self, message: str, out_envelope: Envelope) -> None:
        """Helper method to send error responses"""
        error_dialog = DialogEvent(
            speakerUri=self.speakerUri,
            features={"text": TextFeature(values=[message])}
        )

        error_utterance = UtteranceEvent(
            dialogEvent=error_dialog
        )

        out_envelope.events.append(error_utterance)

Step 1.5: Override the manifest handler

We also need to handle manifest requests properly:

    def bot_on_get_manifests(self, event, in_envelope: Envelope, out_envelope: Envelope) -> None:
        """
        Handle manifest requests by sending our capabilities
        """
        print("🦜 Sending manifest information")

        # Create the publish manifests response
        publish_event = PublishManifestsEvent(
            parameters=Parameters({
                "servicingManifests": [self._manifest],
                "discoveryManifests": []
            }),
            to=To(speakerUri=in_envelope.sender.speakerUri)
        )

        out_envelope.events.append(publish_event)

Step 1.6: Add the factory function

After the class, add this factory function with the default configuration:

def create_parrot_agent(
    speaker_uri: str,
    service_url: str,
    name: str = "Parrot Agent",
    organization: str = "OpenFloor Demo",
    description: str = "A simple parrot agent that echoes back messages with a 🦜 emoji"
) -> ParrotAgent:
    """
    Factory function to create a ParrotAgent with default configuration
    """

    # Create the identification
    identification = Identification(
        speakerUri=speaker_uri,
        serviceUrl=service_url,
        organization=organization,
        conversationalName=name,
        synopsis=description
    )

    # Create the capabilities
    capability = Capability(
        keyphrases=['echo', 'repeat', 'parrot', 'say'],
        descriptions=[
            'Echoes back any text message with a 🦜 emoji',
            'Repeats user input verbatim',
            'Simple text mirroring functionality'
        ],
        supportedLayers=SupportedLayers(
            input=["text"],
            output=["text"]
        )
    )

    # Create the manifest
    manifest = Manifest(
        identification=identification,
        capabilities=[capability]
    )

    return ParrotAgent(manifest)

What this factory does:

Takes configuration options with some defaults
Creates an identification object that describes our agent
Defines capabilities that tell others what our agent can do
Creates a manifest that combines identification and capabilities
Returns a new ParrotAgent instance

Step 2: Building the Flask Server

The agent itself is done, but how to talk to it? We need to build our Flask server for this, so start with creating a server.py file.

Step 2.1: Add imports

Add these imports at the top:

from flask import Flask, request, jsonify
from parrot_agent import create_parrot_agent
from openfloor import Envelope, Payload
import json
import os

Step 2.2: Create the Flask app

app = Flask(__name__)

# Configure CORS for specific origin
@app.after_request
def after_request(response):
    allowed_origin = 'http://127.0.0.1:4000'
    origin = request.headers.get('Origin')

    if origin == allowed_origin:
        response.headers.add('Access-Control-Allow-Origin', allowed_origin)
        response.headers.add('Access-Control-Allow-Methods', 'POST, OPTIONS')
        response.headers.add('Access-Control-Allow-Headers', 'Content-Type')

    return response

@app.route('/', methods=['OPTIONS'])
def handle_options():
    """Handle preflight OPTIONS requests"""
    return '', 200

Why this CORS setup?

Only allows requests from the specific domain
Handles preflight OPTIONS requests
Restricts to POST methods and the Content-Type header

Step 2.3: Create the agent instance

Now we need to create our parrot by using the factory function create_parrot_agent.

# Create the parrot agent instance
parrot_agent = create_parrot_agent(
    speaker_uri='tag:openfloor-demo.com,2025:parrot-agent',
    service_url=os.environ.get('SERVICE_URL', 'http://localhost:8080/'),
    name='Polly the Parrot',
    organization='OpenFloor Demo Corp',
    description='A friendly parrot that repeats everything you say!'
)

print(f"🦜 Parrot agent created: {parrot_agent.speakerUri}")

Step 2.4: Build the main endpoint step by step

Now we have the agent and the Flask app, but the most important part is still missing, and that's our endpoint:

@app.route('/', methods=['POST'])
def handle_openfloor_message():
    """Main Open Floor Protocol endpoint"""
    try:
        print(f"🦜 Received request: {json.dumps(request.json, indent=2)}")

        # Validate the incoming payload
        if not request.json:
            return jsonify({
                'error': 'Invalid JSON payload'
            }), 400

        # Parse the payload
        try:
            if 'openFloor' in request.json:
                # Direct payload format
                payload = Payload.from_dict(request.json)
                incoming_envelope = payload.openFloor
            else:
                # Direct envelope format
                incoming_envelope = Envelope.from_dict(request.json)
        except Exception as parse_error:
            print(f"🦜 Parsing error: {parse_error}")
            return jsonify({
                'error': 'Invalid OpenFloor payload format',
                'details': str(parse_error)
            }), 400

        print(f"🦜 Processing envelope from: {incoming_envelope.sender.speakerUri}")

        # Process the envelope through the parrot agent
        outgoing_envelope = parrot_agent.process_envelope(incoming_envelope)

        # Create response payload
        response_payload = Payload(openFloor=outgoing_envelope)
        response = dict(response_payload)

        print(f"🦜 Sending response: {json.dumps(response, indent=2, default=str)}")

        return jsonify(response)

    except Exception as error:
        print(f"🦜 Error processing request: {error}")
        return jsonify({
            'error': 'Internal server error',
            'message': str(error)
        }), 500

What's happening here:

Validate that we received valid JSON
Parse the payload into an Open Floor envelope
Process it through our parrot agent
Create and send the response as a properly formatted payload

Step 3: Creating the Entry Point

We end by creating a simple main.py as our entry point:

from server import app
import os

if __name__ == '__main__':
    port = int(os.environ.get('PORT', 8080))
    print(f"🦜 Parrot Agent server starting on port {port}")
    app.run(host='0.0.0.0', port=port, debug=True)

Step 4: Final Setup

Your project structure should now look like this:

parrot-agent/
├── requirements.txt
├── parrot_agent.py
├── server.py
└── main.py

Test Your Implementation

Run this to test:

python main.py

Send your manifest or utterance requests to http://localhost:8080/ to see if it's working! You can also download the simple single HTML file manifest and utterance chat azettl/openfloor-js-chat to test your agent locally.

If you found this guide useful, follow me for more and let me know what you build with it in the comments!

Building an Open Floor Parrot Agent

Andreas — Sat, 19 Jul 2025 00:44:54 +0000

In this short guide, we will build a simple parrot agent together. The parrot agent will simply repeat everything you send him and a small 🦜 emoji in front of the return. We will create the Open Floor Protocol-compliant agent with the help of the @openfloor/protocol package.

Initial Setup

First, let's set up our project by creating the project folder and installing the required packages:

mkdir parrot-agent
cd parrot-agent
npm init -y
npm install express @openfloor/protocol
npm  install -D typescript @types/node @types/express ts-node

We will also need a TypeScript configuration file, so create tsconfig.json and add the following content:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["ES2020"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Now that the basic set up is done, let us start coding together!

Step 1: Building the Parrot Agent Class

Before we create our parrot agent class, let's create a new folder src where we will store all of our files.

Create a new file src/parrot-agent.ts, this will contain the main logic of our agent.

Step 1.1: Add the imports

Lets start with the import of everything we need from the @openfloor/protocol package, add them at the top of your parrot-agent.ts file:

import { 
  BotAgent, 
  ManifestOptions, 
  UtteranceEvent, 
  Envelope,
  createTextUtterance,
  isUtteranceEvent
} from '@openfloor/protocol';

Why these imports?

BotAgent - The base class we'll extend
ManifestOptions - To define our agent's capabilities
UtteranceEvent - The type of event we'll handle
Envelope - Container for Open Floor messages
createTextUtterance - Helper to create text responses
isUtteranceEvent - To check if an event is an utterance

Step 1.2: Start the ParrotAgent class

Now let's start creating our ParrotAgent class by extending the BotAgent:

/**
 * ParrotAgent - A simple agent that echoes back whatever it receives
 * Extends BotAgent to provide parrot functionality
 */
export class ParrotAgent extends BotAgent {
  constructor(manifest: ManifestOptions) {
    super(manifest);
  }

What we just did:

Created a class that extends BotAgent
Added a constructor that takes a manifest and passes it to the parent class
The manifest will define what our agent can do

Step 1.3: Override the processEnvelope method

The processEnvelope method of the BotAgent class is the main entry point for agent message processing. So, this is where the magic happens:

  /**
   * Override the processEnvelope method to handle parrot functionality
   */
  async processEnvelope(incomingEnvelope: Envelope): Promise<Envelope> {

Now let's build the method body step by step. First, create an array to store our responses:

    const responseEvents: any[] = [];

Next, we loop through each event in the incoming envelope:

    for (const event of incomingEnvelope.events) {

We also should check if this event is meant for us. So, add this inside the loop:

      // Check if this event is addressed to us
      const addressedToMe = !event.to || 
        event.to.speakerUri === this.speakerUri || 
        event.to.serviceUrl === this.serviceUrl;

Why this check?

!event.to - If no recipient is specified, it's for everyone.
event.to.speakerUri === this.speakerUri - Direct message to us
event.to.serviceUrl === this.serviceUrl - Message to our service

With this check, we know the event is really meant for us, and we can now handle the two types of events we care about:

      if (addressedToMe && isUtteranceEvent(event)) {
        const responseEvent = await this._handleParrotUtterance(event, incomingEnvelope);
        if (responseEvent) responseEvents.push(responseEvent);
      } else if (addressedToMe && event.eventType === 'getManifests') {
        // We respond to the getManifests event with the publishManifest event
        responseEvents.push({
          eventType: 'publishManifest',
          // We use the senders speakerUri as the recipient
          to: { speakerUri: incomingEnvelope.sender.speakerUri },
          parameters: {
            servicingManifests: [this.manifest.toObject()]
          }
        });
      }

What's happening here:

If it's a text message (utterance), we'll handle it with our parrot logic
If someone asks for our capabilities via the getManifests event, we send back our manifest

To finish the method, we can now close the loop and return an envelope as a response with all the required response events:

    }

    // Create response envelope with all response events
    return new Envelope({
      schema: { version: incomingEnvelope.schema.version },
      conversation: { id: incomingEnvelope.conversation.id },
      sender: {
        speakerUri: this.speakerUri,
        serviceUrl: this.serviceUrl
      },
      events: responseEvents
    });
  }

Step 1.4: Implement the parrot logic

You saw in the processEnvelope method that we call a yet undefined _handleParrotUtterance, this is the private method we will now implement to echo back what we got sent via the utterance event:

  /**
   * Handle utterance events by echoing them back
   */
  private async _handleParrotUtterance(
    event: UtteranceEvent, 
    incomingEnvelope: Envelope
  ): Promise<any> {
    try {

First, let's try to extract the dialog event from the utterance:

      const dialogEvent = event.parameters?.dialogEvent as { features?: any };
      if (!dialogEvent || typeof dialogEvent !== 'object' || !dialogEvent.features || typeof dialogEvent.features !== 'object') {
        return createTextUtterance({
          speakerUri: this.speakerUri,
          text: "🦜 *chirp* I didn't receive a valid dialog event!",
          to: { speakerUri: incomingEnvelope.sender.speakerUri }
        });
      }

What we're doing:

Extracting the dialog event from the utterance parameters
Checking if it has the structure we expect
If not, sending a friendly error message

Now, as we know we are dealing with a valid dialog event, we can try to get the text from it:

      const textFeature = dialogEvent.features.text;
      if (!textFeature || !textFeature.tokens || textFeature.tokens.length === 0) {
        // No text to parrot, send a default response
        return createTextUtterance({
          speakerUri: this.speakerUri,
          text: "🦜 *chirp* I can only repeat text messages!",
          to: { speakerUri: incomingEnvelope.sender.speakerUri }
        });
      }

We only handle text, so as you see also here, we would return early with an createTextUtterance and a generic message if the textFeature is not how we expect it.

But now everything should be valid, and we can go for the actual parroting:

      // Combine all token values to get the full text
      const originalText = textFeature.tokens
        .map((token: any) => token.value)
        .join('');

      // Create parrot response with emoji prefix
      const parrotText = `🦜 ${originalText}`;

      return createTextUtterance({
        speakerUri: this.speakerUri,
        text: parrotText,
        to: { speakerUri: incomingEnvelope.sender.speakerUri },
        confidence: 1.0 // Parrot is very confident in repeating!
      });

The parroting logic:

Extract text from tokens by mapping over them and joining
Add the 🦜 emoji prefix
Create a text utterance response
Set confidence to 1.0 because 🦜 are confident!

Finally, we can add some error handling and close the method:

    } catch (error) {
      console.error('Error in parrot utterance handling:', error);
      // Send error response
      return createTextUtterance({
        speakerUri: this.speakerUri,
        text: "🦜 *confused chirp* Something went wrong while trying to repeat that!",
        to: { speakerUri: incomingEnvelope.sender.speakerUri }
      });
    }
  }

The only thing that is left to do is close the class with a closing brace:

Step 1.5: Add the factory function

After the class, add this factory function with the default configuration:

/**
 * Factory function to create a ParrotAgent with default configuration
 */
export function createParrotAgent(options: {
  speakerUri: string;
  serviceUrl: string;
  name?: string;
  organization?: string;
  description?: string;
}): ParrotAgent {
  const {
    speakerUri,
    serviceUrl,
    name = 'Parrot Agent',
    organization = 'OpenFloor Demo',
    description = 'A simple parrot agent that echoes back messages with a 🦜 emoji'
  } = options;

  const manifest: ManifestOptions = {
    identification: {
      speakerUri,
      serviceUrl,
      organization,
      conversationalName: name,
      synopsis: description
    },
    capabilities: [
      {
        keyphrases: ['echo', 'repeat', 'parrot', 'say'],
        descriptions: [
          'Echoes back any text message with a 🦜 emoji',
          'Repeats user input verbatim',
          'Simple text mirroring functionality'
        ]
      }
    ]
  };

  return new ParrotAgent(manifest);
}

What this factory does:

Takes configuration options
Provides some defaults
Creates a manifest that describes our agent's capabilities
Returns a new ParrotAgent instance

Step 2: Building the Express Server

The agent itself is done, but how to talk to it? We need to build our express server for this, so start with creating a src/server.ts file.

Step 2.1: Add imports

Add these imports at the top:

import express, { Request, Response } from 'express';
import { createParrotAgent } from './parrot-agent';
import { 
  validateAndParsePayload
} from '@openfloor/protocol';

Step 2.2: Create the Express app

const app = express();
app.use(express.json());

Step 2.3: Add CORS middleware

You might want to add a CORS configuration to allow access to your agent from different origins:

// CORS middleware for http://127.0.0.1:4000
const allowedOrigin = 'http://127.0.0.1:4000';
app.use((req, res, next) => {
  if (req.headers.origin === allowedOrigin) {
    res.header('Access-Control-Allow-Origin', allowedOrigin);
    res.header('Access-Control-Allow-Methods', 'POST, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
  }
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

Why this CORS setup?

Only allows requests from the specific domain
Handles preflight OPTIONS requests
Restricts to POST methods and the Content-Type header

Step 2.4: Create the agent instance

Now we need to create our parrot by using the factory function createParrotAgent. Important is that the serviceUrl matches your server endpoint; otherwise our agent will deny the request (remember the check we added in section 1.3).

// Create the parrot agent instance
const parrotAgent = createParrotAgent({
  speakerUri: 'tag:openfloor-demo.com,2025:parrot-agent',
  serviceUrl: process.env.SERVICE_URL || 'http://localhost:8080/',
  name: 'Polly the Parrot',
  organization: 'OpenFloor Demo Corp',
  description: 'A friendly parrot that repeats everything you say!'
});

Step 2.5: Build the main endpoint step by step

Now we have the agent and the Express app, but the most important part is still missing, and that's our endpoint:

// Main Open Floor Protocol endpoint
app.post('/', async (req: Request, res: Response) => {
  try {
    console.log('Received request:', JSON.stringify(req.body, null, 2));

First, let's validate the incoming payload with the validateAndParsePayload function from the @openfloor/protocol package:

    // Validate and parse the incoming payload
    const validationResult = validateAndParsePayload(JSON.stringify(req.body));

    if (!validationResult.valid) {
      console.error('Validation errors:', validationResult.errors);
      return res.status(400).json({
        error: 'Invalid OpenFloor payload',
        details: validationResult.errors
      });
    }

Now we know the payload is valid, and we can extract the envelope:

    const payload = validationResult.payload!;
    const incomingEnvelope = payload.openFloor;

    console.log('Processing envelope from:', incomingEnvelope.sender.speakerUri);

Then let's process the envelope through our parrot agent:

    // Process the envelope through the parrot agent
    const outgoingEnvelope = await parrotAgent.processEnvelope(incomingEnvelope);

After the processing, we can create and send the response:

    // Create response payload
    const responsePayload = outgoingEnvelope.toPayload();
    const response = responsePayload.toObject();

    console.log('Sending response:', JSON.stringify(response, null, 2));

    res.json(response);

Finally, we add the catch block and close the endpoint:

  } catch (error) {
    console.error('Error processing request:', error);
    res.status(500).json({
      error: 'Internal server error',
      message: error instanceof Error ? error.message : 'Unknown error'
    });
  }
});

Step 2.6: Export the app

export default app;

Step 3: Creating the Entry Point

We end by creating a simple src/index.ts as our entry point:

import app from './server';

const PORT = process.env.PORT || 8080;

app.listen(PORT, () => {
  console.log(`Parrot Agent server running on port ${PORT}`);
});

Step 4: Final Setup

Add or overwrite these scripts in the existing scripts object in your package.json:

{
  "scripts": {
    "start": "node dist/index.js",
    "dev": "ts-node src/index.ts",
    "build": "tsc"
  }
}

Test Your Implementation

Run this to test:

npm run dev

If you found this guide useful follow me for more and let me know what you build with it in the comments!

📱 Introducing my latest sideproject: Fridge Leftovers AI 🍲

Andreas — Thu, 14 Mar 2024 17:14:18 +0000

Ever found yourself staring at the contents of your fridge, wondering what to cook with the leftovers? Say hello to my new app Fridge Leftovers AI, it simplifies meal planning by analyzing photos of your fridge contents and suggests delicious recipes! 📸🥘

🎓 What I Learned in this sideproject until now:

React Native for cross-platform development.
The process of developing, building, and submitting an app using Expo.
App Store Connect Backend for app management.
Sharpened my AI prompting skills.

Curious to see what culinary wonders await in your fridge? Try out Fridge Leftovers AI today! 🌟 The first 15 pictures are on the house! 🆓 https://fridgeleftoversai.com/

And hey, I'd love to hear your thoughts and feedback on the app! Your input helps me make Fridge Leftovers AI even better. Feel free to drop your comments below or shoot me a message.

And if you don't have iOS but still want to help, I search for realistic images of open fridges to further test my app. If you want to know what you can cook with the ingredients left in your fridge or if the AI detects anything at all, please comment with a picture, and I will tell you what you can cook with it.

Cheers! 📝🤗

Magazine the WordPress Plugin for PrintCSS

Andreas — Fri, 26 Mar 2021 01:28:06 +0000

In the last few weeks, I am working on a WordPress Plugin, which allows you to generate PDFs from one or multiple posts/pages. Initially, it was designed to work only with my PrintCSS Cloud, which I introduced in the previous article, but now the plugin is opened to any rendering tool you want to use.

Installation and Setup

All you need to do to install the plugin is download it from Gumroad. You can pay what you want starting from $0!

Once you installed the ZIP file via the WordPress ‘Upload Plugins’ function or placed the extracted folder in your ‘wp-content/plugins’ directory, you need to activate the plugin.

After the installation, you will need to provide an API key or locally installed rendering tool command on the settings page under ‘Settings’ > ‘Magazine’.

The Settings of the Magazine Plugin

On the settings screen, you find the following options.

Rendering Tool: Depending on the filled API Key and Local Command Options, you see the supported rendering tools here. You need to use at least one of the API or the local command options for a rendering tool to appear in this selection.
RapidAPI Key: To send the PrintCSS Cloud API request, you need to subscribe to a plan on RapidAPI. With this, you get the API key required to authenticate with the PrintCSS Cloud REST service. The PrintCSS Cloud supports the rendering tools WeasyPrint, PagedJS, and Vivliostyle.
DocRaptor Key: To send the DocRaptor API request, you need to subscribe to a plan on docraptor.com. With this, you get the API key that is required to authenticate with the REST service.
Typeset.sh Project Key & Project Token: To send the request to the typeset.sh API, you need to subscribe to a plan on typeset.sh. With this, you get the project key and token required to authenticate with their REST service.
Local Command: If you have a PDF rendering tool installed locally, you can provide the command here, be aware that the tool needs to support getting the HTML via STDIN and needs to return the PDF via STDOUT.
AH Formatter Example: /usr/AHFormatterV71_64/run.sh -x 4 -d @STDIN -o @STDOUT
Prince Example: prince — no-warn-css — javascript -
PDFreactor Example: cd /path/to/sh/script/ && ./pdfreactor.sh (Get the script on GitHub)

Change the Demo Theme and Add Multiple Themes

All magazine themes are placed in the ‘wp-content/magazine_themes’ folder and can be directly edited there. If you prefer editing your theme directly in the WordPress UI, you can do so under ‘Appearance’ > ‘Magazine’.

The Magazine Theme Editor

A magazine theme for PDF generation is using the following files. All of them are optional. If you use the magazine theme editor, all files will be generated even if you do not provide any content for some of them.

Besides editing the theme, you can also duplicate, upload and download themes from this section in the WordPress backend.

HTML

In the HTML section of the magazine theme editor, you can edit all HTML files.

Prefix (prefix.html): The prefix HTML you can use for front covers or intros, basically anything which should be added only once at the beginning of the PDF. In the prefix, you can not use any placeholders.
Post (post.html): The post HTML will be loaded whenever you want to render a Blogpost PDF; this file gets added once per selected Blogpost. So if you choose 5 Blogposts, this HTML gets repeated five times. Within the post HTML, you can use any placeholders, for example, the {{title}} to always show the current Blogpost title.
Page (page.html): The page HTML will be loaded whenever you want to render a PDF from a page. This file gets added once per selected page. So if you choose five pages, this HTML gets repeated five times. Within the page HTML, you can use any placeholders, for example, the {{title}} to always show the current page title.
Postfix (postfix.html): The postfix HTML you can use for back covers or indexes, basically anything which should be added only once at the end of the PDF. In the postfix, you can not use any placeholders.

You can leave any of these HTML files empty if you do not need them. For example, if you do not need a cover, do not put content into the prefix HTML.

CSS

In the magazine theme editor’s CSS section, you can edit all CSS files of any theme.

Main (style.css): The main CSS is loaded for any rendering you do. In the main CSS, you can not use any placeholders.
Post (post.css): The post CSS will be loaded whenever you want to render a Blogpost PDF; this file gets added once per selected Blogpost. So if you choose 5 Blogposts, this CSS gets repeated five times. Within the post CSS, you can use any placeholders, for example, the {{slug}} to get one class per Blogpost slug.
Page (page.css): The page CSS will be loaded whenever you want to render a page PDF; this file gets added once per selected page. So if you choose five pages, this CSS gets repeated five times. Within the post CSS, you can use any placeholders, for example, the {{slug}} to get one class per page slug.

You can also leave any of these CSS files empty if you do not need them. For example, if you do not need a Blogpost specific CSS, do not put content into the post CSS file.

JavaScript

In the magazine theme editor’s JavaScript section, you can edit all JavaScript files of your theme. Be aware that some rendering tools only support HTML and CSS.

Main (script.js): The main JavaScript is loaded for any rendering you do. In the main JavaScript, you can not use any placeholders.
Post (post.js): The post JavaScript will be loaded whenever you want to render a Blogpost PDF; this file gets added once per selected Blogpost. So if you choose 5 Blogposts, this JavaScript gets repeated five times. Within the post JavaScript, you can use any placeholders, for example, the {{slug}} to get one class per Blogpost slug.
Page (page.js): The page JavaScript will be loaded whenever you want to render a page PDF; this file gets added once per selected page. So if you choose five pages, this JavaScript gets repeated five times. Within the post JavaScript, you can use any placeholders, for example, the {{slug}} to get one class per page slug.

You can leave any of these JavaScript files empty if you do not need them. For example, if you do not need a Blogpost specific JavaScript, do not put content into the post JavaScript file.

The Placeholders

The placeholders {{slug}}, {{title}}, {{feature_image}} and {{content}} are for the post/page slug, title, feature image and content. Additionally you can use the placeholders {{author}}, {{date}}, {{date_gmt}}, {{excerpt}}, {{status}}. If you need to show the date of the post/page in a different format you can use the placeholders {{year}}, {{month}}, {{day}}, {{hour}}, {{minute}}.

Please be aware that images need to be available via a public URL for the APIs to use them.

ACF is also supported. Just add {{ACF_YOUR_FIELD_NAME}}. Important: use the name, not the label!

The Widget

If your WordPress theme support widgets, you can configure a simple PDF rendering widget for your frontend. The widget options are the title of your PDF rendering link and the magazine theme you want to render the PDF with. This way, you allow your users to generate PDFs anytime they want to.

The Magazine Render PDF Widget with Text and Theme Options.

Shortcode

You can also use a shortcode to display a link to render the PDF in any location of your post or page.

The primary usage is just the tag and an attribute that defines the theme [magazine theme="Demo"]. If you also want to change the text of the link, you can pass it with [magazine theme="Demo" text="Click here for PDF Version"].

Backend and Bulk PDF Rendering

When you want to render a PDF from one or multiple pages/blog posts, just navigate to the ‘All Posts’ or ‘All Pages’ sites in the backend. Select the pages/posts you want to have in your PDF and click on the ‘Bulk Actions’ dropdown. Depending on your magazine themes, you will see one or multiple entries like ‘Render PDF with Demo Theme’, select the theme you like and click on apply. Currently, the rendering process is always synchronous, so you will need to wait for the API/local tool to answer.

Bulk Actions for the three different Magazine Themes on my system.

The resulting PDF is stored in the Media Library. It is also offered to you for downloading in a notification on the page where you started the rendering process.

Result Notification

The plugin is currently in alpha status, and I am looking forward to your feedback and ideas on how to improve it.

Lastly, again the link for you to download the plugin: Magazine (gumroad.com).

PrintCSS: Running Headers and Footers

Andreas — Sat, 27 Feb 2021 23:19:20 +0000

If you want to use HTML inside the page margin boxes, you will need to use running elements. These elements are normal HTML nodes with the CSS position property set to ‘running(NAME)’.

The name given to the running element is used within the page margin boxes to set their content to the running elements inner HTML.

To do so, you need to set the specific page margin box’s CSS content property to ‘element(NAME)’, where NAME is the given running element name.

Elements with the position running do not appear in the document until you assign them to some CSS content property.

Your running elements must come first in your HTML structure. For example, if you put the footer element before the closing body tag, the running footer will only appear on the last page.

Sample Header

So after reading the theory, let’s jump right in and create a small example. We will define a running header with a simple text and a footer with HTML content.

In the body of our document, let’s define our two header div elements.

<div class="headerLeft">
  Running Headers and Footers
</div>

<div class="headerRight">
  A sample document
</div>

As mentioned above, we now need to define the position as ‘running’, and we will also give our headers some basic style.

.headerLeft{
  position: running(headerLeft);
  font-size:12pt;
}

.headerRight{
  position: running(headerRight);
  font-size:8pt;
  font-style: italic;
  text-align: right;
  color:#667eea;
}

Before we render the PDF, we need to define the page margin boxes and the page in CSS.

@page  {
  size: A6;
  margin: 20mm;

  @top-left{
    content: element(headerLeft);
    border-bottom:2px solid #434190;
  }

  @top-center{
    border-bottom:2px solid #434190;
  }

  @top-right{
    content: element(headerRight);
    border-bottom:2px solid #434190;
  }
}

As you can see, the page size is A6, and we have a margin of 2cm for all sides of the page. Our running header elements are used in the ‘@top-left’ and ‘@top-right’ definition. Additionally, I added a bottom border to all top margin boxes.

The rendering result always depends on the tool you are using. Here are two samples with PDFreactor and Prince.

Result with Prince

PDFreactor Result

More tools you can check on printcss.live.

Sample Footer

Now, as we have the header ready, let’s have a look at the footer. I want to put a logo on the left side and contact information on the right in the footer. Between both, I want to add the current and total page numbers.

<div class="footerLeft">
  <img src="https://printcss.live/img/logo.png" />
</div>

<div class="footerRight">
  <a href="mailto:info@azettl.net">info@azettl.net</a>
  <br />
  <a href="https://printcss.live/">printcss.live</a>
</div>

In the CSS, we will give the footer classes a position ‘running’ again and some basic style like the logo’s width.

.footerLeft{
  position: running(footerLeft);
}

.footerLeft img{
  width:20mm;
}

.footerRight{
  position: running(footerRight);
  text-align: right;
  font-size:8pt;
}

If we render now, we will not see the elements as we still need to assign them to one of the page margin boxes.

Result with Prince

We need to define our bottom margin boxes inside the ‘@page’ rule to make this work.

@bottom-right{
  content: element(footerRight);
  border-top:2px solid #434190;
}

@bottom-center{
  content: counter(page) ' / ' counter(pages);
  border-top:2px solid #434190;
  font-size:8pt;
}

@bottom-left{
  content: element(footerLeft);
  border-top:2px solid #434190;
}

Again I added some border, this time on the top. Also, you can see in the bottom center margin box I define the content as “counter(page) ‘ / ‘ counter(pages)”. The counter ‘page’ returns us the current page number, while the ‘pages’ counter gives us the total number of pages.

Now our document has a nice header and footer.

Running header and footer rendered with PDFreactor

Complete Sample

To see whether our running header and footer elements actually work, we need to add some content. If our code works fine we will see the header and footer on all pages.

The content should be placed inside the body element but after all running header and footer elements.

<div class="content">
  <h1>PrintCSS: Running Headers and Footers</h1>

  <p>
    If you want to use HTML inside the page margin boxes, you will need to use running elements. These elements are normal HTML nodes with the CSS position property set to 'running(NAME)'.
  </p>

  <p>
    The name given to the running element is used within the page margin boxes to set their content to the running elements inner HTML.
  </p>

  <p>
    To do so, you need to set the specific page margin box's CSS content property to 'element(NAME)', where NAME is the given running element name.
  </p>

  <p>
    Elements with the position running do not appear in the document until you assign them to some CSS content property.
  </p>

  <p>
    Your running elements must come first in your HTML structure. For example, if you put the footer element before the closing body tag, the running footer will only appear on the last page.
  </p>
</div>

If you render on printcss.live now, you will see the running elements on all pages.

Rendering result with PDFreactor.

PrintCSS: Table of Contents

Andreas — Sat, 27 Feb 2021 23:16:35 +0000

A widespread use case for your PrintCSS document is creating a table of contents. But how would you know the page numbers of your chapters before you render the document? The content takes as many pages as it needs, and if your content is dynamic, it is impossible to say how many pages a chapter would result in.

Before we start with our table of contents, we will need some content to create the table. So let’s take the result from my previous article PrintCSS: Running Headers and Footers, and extend the content.

Until now, the content has only one chapter. So we will add “PrintCSS: Table of Contents” with the text above as the second chapter.

<h1>PrintCSS: Table of Contents</h1>

<p>A very common use case for your PrintCSS document is creating a table of contents. But how would you know the page numbers of your chapters before you render the document? The content takes as many pages as it needs and if your content is dynamic it is impossible to say how many pages a chapter would result in.</p>

<p>Before we start with our table of contents we will need some content to create the table for. So let's take the result from my previous article PrintCSS: Running Headers and Footers and extend the content.</p>

This HTML needs to be added inside the div with the class ‘content’.

To separate the chapters, we use the CSS property ‘page-break-before’ (the new version ‘break-before’ does not work with Prince yet) with the ‘always’ value. This will start each chapter on a new page.

.content h1{
  page-break-before: always;
}

You can see now that the first page of our PDF is blank, and each chapter starts on a new page. If you want to try it out yourself you can render the code on printcss.live.

Rendering Result with Prince, showing the first page empty.

The new second chapter, rendered with Prince

The first blank page we will use for our table of contents. In the HTML, we add a new div element with the class ‘toc’ and add the links to our chapters.

<div class="toc">
  <h1>Table of contents</h1>
  <a href="#running">PrintCSS: Running Headers and Footers</a>
  <a href="#toc">PrintCSS: Table of Contents</a>
</div>

As you see, we will use anchors to link the table of contents elements to the chapters. This means that each chapter heading needs an ‘id’ attribute.

<h1 id="running">PrintCSS: Running Headers and Footers</h1>

...

<h1 id="toc">PrintCSS: Table of Contents</h1>

Links in the PDF with HTML anchors, rendered in Prince.

If you render now and click on one of the table of contents elements, it will already direct you to the correct chapter. But we are missing the page numbers. For that, we can use a CSS function called ‘target-counter’.

The first parameter for the ‘target-counter’ is the target URL in our case ‘attr(href)’. The second parameter is the counter; as we want the page number, it is ‘page’.

.toc a{
  display:block;
}

.toc a::after {
  content: target-counter(attr(href), page);
}

Result of target-counter, rendered with Prince.

To make it look better, let’s add dot leaders with the ‘leader’ function.

Final result with the leader function, rendered with Prince.

PrintCSS: Page Margin Boxes

Andreas — Sat, 27 Feb 2021 23:15:02 +0000

In my article about running elements like headers, we already worked with page margin boxes without explaining them in detail.

So what are page margin boxes? They are boxes within the page margin and can contain generated content, like page numbers. Also, they are often used to add the document title or copyright information on many pages.

There are 16 page margin boxes so let us have a look at every single box. We will go clockwise, starting with the top left corner.

If you want to try the samples yourself, head over to printcss.live and play around with different PDF rendering tools.

top-left-corner page margin box, rendered with typeset.sh

@top-left-corner (1)

The top left corner’s size is defined by the top and left margin of the page. In the screenshot on the left, you see the corner on a page with a margin of 20mm. This means our box will also be 20x20mm. If you defined the page’s left margin as 10mm and the top margin to be 20mm, the top left corner would have a size of 10x20mm.

@page  {
 margin: 20mm;

 @top-left-corner{
  content:"1";
  background-color:#1a202c;
  color:#fff;
  text-align:center;
 }
}

@top-left (2)

top-left page margin box, rendered with typeset.sh

The top left margin box sits between the top left corner and the top center box. The width of this box is variable. As you see in the screenshot above, it goes all the way to the top right corner page margin box. Once we define the top center box, the width will decrease as the center box also takes up some space.

@page  {
 margin: 20mm;

 /* previous css code... */

 @top-left{
  content:"2";
  background-color:#742a2a;
  color:#fff;
  text-align:center;
 }
}

@top-center (3)

top-center page margin box, rendered with typeset.sh

The top center is, as the name suggests, in the center of the top margin boxes. This box also has a variable width. The width depends on its neighbors’ width, the top left, and top right page margin boxes.

@page  {
 margin: 20mm;

 /* previous css code... */

 @top-center{
  content:"3";
  background-color:#7b341e;
  color:#fff;
  text-align:center;
 }
}

@top-right (4)

top-right page margin box, rendered with typeset.sh

The top right margin box sits between the top center and the top right corner box. The width of this box is variable. As you see in the screenshot above, it goes from the center box to the top right corner page margin box.

@page  {
 margin: 20mm;

 /* previous css code... */

 @top-right{
  content:"4";
  background-color:#744210;
  color:#fff;
  text-align:center;
 }
}

top right corner, rendered with typeset.sh

@top-right-corner (5)

The top right corner box size is defined by the top and right margin of the page. Look at the definition of the top left corner for details.

@page  {
 margin: 20mm;

 /* previous css code... */

 @top-right-corner{
  content:"5";
  background-color:#22543d;
  color:#fff;
  text-align:center;
 }
}

@right-top (6)

right top page margin box, rendered with typeset.sh

The right top page margin box has a variable height. It fills all the space between the top right corner and the right middle box. As we have not defined the right middle box yet, this box goes till the bottom right corner box.

@page  {
 margin: 20mm;

 /* previous css code... */

 @right-top{
  content:"6";
  background-color:#234e52;
  color:#fff;
 }
}

@right-middle (7)

The right middle page margin box, rendered with typeset.sh

The right middle box is vertically centered on the right side. Depending on its height, the neighboring boxes (right top and right bottom) adjust.

@page  {
 margin: 20mm;

 /* previous css code... */

 @right-middle{
  content:"7";
  background-color:#2a4365;
  color:#fff;
 }
}

@right-bottom (8)

The right bottom margin box (8), rendered with typeset.sh

The right bottom page margin box behaves the same as the right top box, just on the page’s bottom. It fills the space between the right middle box and the right bottom corner box.

@page  {
 margin: 20mm;

 /* previous css code... */

 @right-bottom{
  content:"8";
  background-color:#3c366b;
  color:#fff;
 }
}

@bottom-right-corner, @bottom-right, @bottom-center, @bottom-left, @bottom-left-corner (9–13)

The bottom page margin boxes, rendered with typeset.sh

The bottom page margin boxes behave the same way as the top page margin boxes. For details, please have a look at the top boxes above.

@page  {
 margin: 20mm;

 /* previous css code... */

 @bottom-right-corner {
  content:"9";
  background-color:#44337a;
  color:#fff;
  text-align:center;
 }

 @bottom-right {
  content:"10";
  background-color:#702459;
  color:#fff;
  text-align:center;
 }

 @bottom-center{
  content:"11";
  background-color:#1a202c;
  color:#fff;
  text-align:center;
 }

 @bottom-left{
  content:"12";
  background-color:#742a2a;
  color:#fff;
  text-align:center;
 }

 @bottom-left-corner{
  content:"13";
  background-color:#7b341e;
  color:#fff;
  text-align:center;
 }
}

@left-bottom, @left-middle, @left-top (14–16)

For the left page margin boxes, have a look at the right boxes. They behave the same way just on the other side.

All page margin boxes on one page, rendered with typeset.sh

@page  {
 margin: 20mm;

 /* previous css code... */

 @left-bottom{
  content:"14";
  background-color:#744210;
  color:#fff;
 }

 @left-middle{
  content:"15";
  background-color:#22543d;
  color:#fff;
 }

 @left-top{
  content:"16";
  background-color:#234e52;
  color:#fff;
 }
}

PrintCSS: Footnotes

Andreas — Sat, 27 Feb 2021 23:12:33 +0000

Footnotes play an important role when it comes to creating books or PDF documents in general. Unfortunately, not all PDF rendering tools are supporting the W3C draft yet. While the commercial tools all have a good integration of the draft, most open-source tools lack support for footnotes completely.

Still, in this article, I will explain the W3C footnote draft to you, and we will see the rendering result with the different tools.

Terminology

Before we go through some samples, we should first get to know the different terms used.

Footnotes rendered with PDFreactor.

A footnote call is a number or sometimes a symbol in the main text pointing to the footnote’s body.

The footnote body consists of the footnote marker, which is actually the number or symbol from the footnote call. The marker can have extra punctuation. After the marker, we have the footnote element, which is still part of the footnote body. The footnote element is the actual content of the footnote. The content is defined within the text flow but gets removed from there and is shown as a footnote.

All your footnotes are in the footnote area, so the area of the page where your footnotes are displayed. Above that area, you can have a horizontal rule, which is called the footnote rule.

From Terminology to CSS and HTML

If you want to try the samples yourself, head over to printcss.live and play around with different PDF rendering tools.

@page{
 size: A6;

 @footnote {
  /* The Background color highlights the footnote area */
  background-color:#feb2b2;

  /* The Border Top is the footnote rule */
  border-top:5px solid #38a169;
 }
}

/* This element is for a single footnote body */
.footnote { 
 float: footnote;
 background-color:#a3bffa; 
 margin-bottom:2mm;
}

/* As the name says this is the footnote call */
.footnote::footnote-call { 
 background-color:#d6bcfa;
}

/* And the footnote marker */
.footnote::footnote-marker { 
 background-color:#fbb6ce;
}

In the HTML document, all you need to do is add an element with the footnote class at the desired place.

<p>
    Footnotes play an important role when it comes to creating books or PDF documents in general. Unfortunately, not all PDF rendering tools are supporting the W3C draft<span class="footnote">Sample Footnote Content</span> yet. While the commercial tools all have a good integration of the draft, most open-source<span class="footnote">Another Sample Footnote Content</span> tools lack support for footnotes completely.
</p>

The result of the above code, with some extra content, header and footer looks like the following.

Footnotes rendered with PDFreactor and Prince.

As I mentioned in the beginning, most open-source tools lack the support of footnotes until now. So let us have a look at how the same code renders with Weasyprint and Paged.js.

No footnote support with Weasyprint and Paged.js

Footnote Marker & Call

Prince also supports symbols besides the decimal numbers. So the following CSS code will work only for Prince.

.footnote::footnote-call {
  background-color:#d6bcfa;
  content: counter(footnote, symbols('*', '&', '%', '>'));
}
.footnote::footnote-marker { /* And the footnote marker */
  background-color:#fbb6ce;
  content: counter(footnote, symbols('*', '&', '%', '>'));
}

Footnote Marker & Call Symbols with Prince

But both rendering tools support the values allowed for the CSS property ‘list-style-type’, for example, ‘upper-greek’. This has nothing to do with footnotes directly but with the ‘counter’ function, which is used here.

‘upper-greek’ example in Prince and PDFreactor

.footnote::footnote-call {
  background-color:#d6bcfa;
  content: counter(footnote, lower-greek);
 }

.footnote::footnote-marker {
  background-color:#fbb6ce;
  content: counter(footnote, lower-greek);
}

PrintCSS: Recreating a eBook Cover

Andreas — Sat, 27 Feb 2021 23:10:38 +0000

In this article, we will not go into specifics of CSS paged media. Instead, let us have some fun today and try to recreate the eBook cover from Florin Pop’s first eBook.

The goal is to get as close as possible to the original cover. If you want to try the below code yourself, you can install a PDF generation tool or head over to printcss.live. This website allows you to try different rendering tools in the browser.

Enough now with the boring intro! Let us start!

Ten++ Ways to Make Money as a Developer by Florin Pop

The eBook is not released yet, but you can find the cover and details about the book on Gumroad.

Ten++ Ways to Make Money as a Developer by Florin Pop

The HTML Part

Gladly Florin did not go super crazy with the book cover layout, so our HTML should be pretty basic. The only thing we leave out from the layout is the picture of the pig.

Yeah, I know this is a major part, and I also found the picture on some websites. The thing is, I do not want to copy it from somewhere and did not find it on a stock photo site.

Instead, we will put a picture from Bill Murray via the amazing fillmurray.com image placeholder website.

So our HTML will look like the following.

<div class="purple">&#x3C;h1&#x3E;</div>
<div class="title">
  Ten<span class="purple">++</span> Ways to Make Money as a Developer
</div>
<div class="purple">&#x3C;/h1&#x3E;</div>
<div class="author">Florin Pop</div>
<img src="[https://www.fillmurray.com/400/400](https://www.fillmurray.com/400/400)" />

Rendering only the HTML code will result in a pretty basic PDF page. Be aware that you might get a different image of Bill Murray.

Florins eBook Cover without CSS, rendered with Weasyprint

The Fun/CSS Part

For this and also all the other book covers let us assume a page size of 8.27 inch by 11.69 inch (ISO Code A4).

As we all know, Florin’s favorite color is green. Kidding, it’s purple, so let us start with the purple parts. The left part of the cover is completely purple, and we can use the page margin boxes to achieve the same.

Florins eBook Cover with some CSS, rendered with Weasyprint

@page{
   size:8.27in 11.69in; 
   margin:0.39in;

   @top-left-corner{
       content:"";
       background-color:#663399;
   }

   @left-top{
       content:"";
       background-color:#663399;
   }

   @left-middle{
       content:"";
       background-color:#663399;
   }

   @left-bottom{
       content:"";
       background-color:#663399;
   }

   @bottom-left-corner{
       content:"";
       background-color:#663399;
   }
}

In the next step, let us style the title of the book. First, we will need to redo our HTML element for the title. Instead of one div, let’s split it into multiple divs to achieve the desired line breaks.

<div class="title">
  Ten<span class="purple">++</span>
</div>
<div class="title">
  Ways
</div>
<div class="title">
  to Make Money
</div>
<div class="title">
  as a
</div>
<div class="title">
  Developer
</div>

Now we need to get the title’s styles right, which means guessing the font and font size.

As I am terrible at guessing fonts, let us take Roboto from Google Fonts, and let’s pick a font size of 74pt. For the H1 tag and the ‘++’, we will use a font size of 32pt.

All our divs will also get a margin-left, so they are not starting at the purple stripe we added on the left.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;900&display=swap');


body{
   font-family: 'Roboto', sans-serif;
}

div{
   margin-left:0.78in;
}

.purple{
   color:#663399;
   font-size:32pt;
}

.title{
   font-size:74pt;
   font-weight:bold;
   text-transform:uppercase;
}

In the code above, you can see that I also added the ‘text-transform’ property, so the title looks like the one on Florin’s eBook.

The current progress of our title, rendered with Weasyprint

In the image above, you also see that the image of Bill Murray disappeared. Actually, it is now on the second page of our PDF as it is not fitting anymore due to the font size change.

Before we take care of the image, let us first fix the author’s name and the ‘++’.

.title .purple{
   position:relative;
   top:-16pt;
   left:16pt;
   letter-spacing:4pt;
}

.author{
   margin-top:1.39in;
   font-size:26pt;
   font-weight:bold;
}

eBook Cover with Author and ‘++’ positioned correctly and rendered with Weasyprint

In the end, let us bring the image back to the first page and position it in the right bottom corner.

img{
   position:absolute;
   bottom:0;
   right:0.78in;
   max-width:2.5in;
}

So here it is our recreation of Florin’s book cover! Not a 100 percent the same, but I am pretty happy about the result.

The final result rendered with Weasyprint

Oh, those renderers!

What you need to be aware of, all the samples you see above were rendered with Weasyprint. With all these PDF generation tools, it is a little bit like in the old days of web development. Different tools give you different results. For that, I rendered the same with four different tools, and as you can see below, we get four totally different PDFs.

The code from this article rendered with four different tools

PrintCSS: Counter and Cross References

Andreas — Sat, 27 Feb 2021 23:08:33 +0000

In this article, I want to explain how counters work and how to do cross-references in your document. Both counter and also cross-references were already a topic in the article about the table of contents.

There we used the ‘page’ and ‘pages’ counters, which are predefined in any of the PDF generation tools. To create the table of contents, we then used the ‘target-counter’ function on the headlines to figure out on which pages they are.

But let’s look at counters once again as you do not need to stick to the predefined ones.

Counter

To use a counter you first need to initialize it by using the ‘counter-reset’ property. By default, the reset sets your counter to 0. But you can also set the counter to a specific number by passing it as a second parameter.

To display a counter in your document, you can use the ‘counter’ function inside the ‘content’ property.

div.content { 
  counter-reset:item; 
}

div.content > div { 
  counter-increment: item;
}

div.content > div:before { 
  content: counter(item) " - ";  
}

The HTML structure for the above CSS would be a div element with the class ‘content’, containing further div elements. The child div elements will get counted.

<div class="content">
 <h1>PrintCSS: Counter</h1>
 <div>first content div</div>
 <div>second content div</div>
 <div>third content div</div>
</div>

The result of the above HTML and CSS code

As I mentioned before, we can directly set the counter to a different number. For this, we need to adjust our CSS code.

div.content { 
  counter-reset:item 4; 
}

div.content > div { 
  counter-increment: item;
}

div.content > div:before { 
  content: counter(item) " - ";  
}

Counter Reset with the value 4.

Now take a guess what number our ‘first content div’ would start with? The correct answer is 5. Why 5, you may ask, because we increment the counter by one for every div inside the content div.

As we saw until now, the counter increment is one by default, but also here; we can pass any other number. Let’s, for example, increment in steps of five and use the default reset of 0.

div.content { 
  counter-reset:item; 
}

div.content > div { 
  counter-increment: item 5;
}

div.content > div:before { 
  content: counter(item) " - ";
}

This will return us 5, 10, and 15 as the numbers in front of our content divs.

Counter Increment by steps of 5.

You can also pass a negative number to the counter increment to lower the current value. So let’s say we do the reset to 4 again and then increment by -1.

div.content { 
  counter-reset:item 4; 
}

div.content > div { 
  counter-increment: item -1;
}

div.content > div:before { 
  content: counter(item) " - ";  
}

This will give our content div’s the numbers 3, 2, and 1.

Counter Increment with a negative number

Also, the counter reset allows you to use negative numbers, and we can count up with the counter increment.

div.content { 
  counter-reset:item -1; 
}

div.content > div { 
  counter-increment: item;
}

div.content > div:before { 
  content: counter(item) " - ";  
}

Negative counter reset and counting up with the default increment

Nested Counter

You can nest counters to create something like 1.2.3 or 2.1. Let us have a look at how that is done. First, we will need to create a nested HTML structure.

<div class="content">
 <h1>PrintCSS: Nested Counter</h1>
 <ol>
   <li>item</li>
   <li>item
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item
   <ol>
     <li>item</li>
     <li>item</li>
   </ol>
    </li>
    <li>item</li>
  </ol>
   </li>
   <li>item</li>
   <li>item</li>
 </ol>

 <ol>
   <li>item</li>
   <li>item</li>
 </ol>
</div>

To display our counter value now, we need to use the function ‘counters’ instead of ‘counter’. This function requires a second parameter, which is the separator of the nested counters. The rest of the CSS is quite similar, only the selectors change.

ol {
  counter-reset: listnumber;
  list-style-type: none;
}

li{
 counter-increment: listnumber;
}

li::before {
  content: counters(listnumber, ".") " ";
}

A list with nested counters

Everything else works exactly like before, for example incrementing by 5 instead of 1.

ol {
  counter-reset: listnumber;
  list-style-type: none;
}

li{
 counter-increment: listnumber 5;
}

li::before {
  content: counters(listnumber, ".") " ";
}

Nested counter with increments of 5

Cross References

Cross References are usually used to point to a chapter or page number. The most common example is the table of contents.

The first counter example from this article

Looking back to our counter example with the content div’s. Let’s say we wanna reference to the second content div. For this to work, we first need to give the HTML element an ID.

Then we create a text anchor to this ID and make the ‘marker’ IDs content bold and red.

<a href="#marker">The magic number is</a>
<div>first content div</div>
 <div id="marker">second content div</div>
 <div>third content div</div>
</div>

The new HTML and CSS

To get the ‘magic’ number, or better said to cross-reference to this counter value, we need to use the target-counter function.

.content a::after {
  content: ": " target-counter(attr(href, url), item)
}

First, we say that we want the ‘href’ attribute, and then we say which counter we want to get in our case ‘item’. And in this way, we will get our ‘magic’ number 2!

Using target-counter to get the counter value on the second div

Last let’s try the same on our nested counter sample from above. Of course, we need to change the counter name in the target-counter function to ‘listnumber’. We will put the marker ID on the item with the counter value 2.3.2.

Target-counter on the nested counters, we should get 2.3.2 but we get 2

As you see, we still get 2 as our ‘magic’ number and not 2.3.2 cause we use target-counter. This only gives us the last counter, so as we want 2.3.2, the last number in this is ‘2’. If we would have put the marker on the 2.3.1 element, we would have gotten 1 in return.

Here, we need to use the ‘target-counters’ function and add another parameter at the end, the separator for the single counter values.

.content a::after {
  content: ": " target-counters(attr(href, url), listnumber, '.')
}

The correct result with target-counters

All the samples in this article are rendered with PDFreactor on the website printcss.live. The samples are working with Prince and Weasyprint too!

PrintCSS: Page Selectors and Page Breaks

Andreas — Sat, 27 Feb 2021 23:06:12 +0000

In this article, you will learn everything about page selectors and breaks. Both are very important when you plan to style a multi-page publication, like booklets.

You will learn how to start each chapter on a separate page and style the left and right pages differently.

Page Selectors and Breaks

Using the ‘@page’ rule, you can give a general style to all pages. But if you want to be more specific, page selectors like left, right, and first need to be used.

To see how these selectors work, let us start with a basic multi-page document. You can copy below HTML and CSS code into the printcss.live editor to follow this article.

HTML:

<div class="headerLeft">
  Page Selectors
</div>
<div class="headerRight">
  A sample document
</div>

<div class="footerLeft">
  <img src="[https://printcss.live/img/logo.png](https://printcss.live/img/logo.png)" />
</div>
<div class="footerRight">
  <a href="[info@azettl.net](mailto:info@azettl.net)">[info@azettl.net](mailto:info@azettl.net)</a><br />
  <a href="[https://printcss.live/](https://printcss.live/)">printcss.live</a>
</div>

<div class="toc">
  <h1>Table of contents</h1>
  <a href="#running">PrintCSS: Running Headers and Footers</a>
  <a href="#toc">PrintCSS: Table of Contents</a>
  <a href="#footnotes">PrintCSS: Footnotes</a>
</div>

<div class="content">
  <h1 id="running">PrintCSS: Running Headers and Footers</h1>
  <p>
    If you want to use HTML inside the page margin boxes, you will need to use running elements. These elements are normal HTML nodes with the CSS position property set to 'running(NAME)'.
  </p>
  <p>
    The name given to the running element is used within the page margin boxes to set their content to the running elements inner HTML.
  </p>
  <p>
    To do so, you need to set the specific page margin box's CSS content property to 'element(NAME)', where NAME is the given running element name.
  </p>
  <p>
    Elements with the position running do not appear in the document until you assign them to some CSS content property.
  </p>
  <p>
    Your running elements must come first in your HTML structure. For example, if you put the footer element before the closing body tag, the running footer will only appear on the last page.
  </p>

<h1 id="toc">PrintCSS: Table of Contents</h1>

<p>A very common use case for your PrintCSS document is creating a table of contents. But how would you know the page numbers of your chapters before you render the document? The content takes as many pages as it needs and if your content is dynamic it is impossible to say how many pages a chapter would result in.</p>

<p>Before we start with our table of contents we will need some content to create the table for. So let's take the result from my previous article PrintCSS: Running Headers and Footers and extend the content.</p>

  <h1 id="footnotes">PrintCSS: Footnotes</h1>

  <p>Footnotes play an important role when it comes to creating books or PDF documents in general. Unfortunately, not all PDF rendering tools are supporting the W3C draft yet. While the commercial tools all have a good integration of the draft, most open-source tools lack support for footnotes completely.</p>
  <p>Still, in this article, I will explain the W3C footnote draft to you, and we will see the rendering result with the different tools.</p>
</div>

CSS:

@page  {
  size: A6;
  margin: 20mm;

@top-left{
    content: element(headerLeft);
    border-bottom:2px solid #434190;
  }

@top-center{
    border-bottom:2px solid #434190;
  }

@top-right{
    content: element(headerRight);
    border-bottom:2px solid #434190;
  }

@bottom-right {
    content: element(footerRight);
    border-top:2px solid #434190;
  }

@bottom-center{
    content: counter(page) ' / ' counter(pages);
    border-top:2px solid #434190;
    font-size:8pt;
  }

@bottom-left{
    content: element(footerLeft);
    border-top:2px solid #434190;
  }
}

.headerLeft{
  position: running(headerLeft);
  font-size:12pt;
}

.headerRight{
  position: running(headerRight);
  font-size:8pt;
  font-style: italic;
  text-align: right;
  color:#667eea;
}

.footerLeft{
  position: running(footerLeft);
}

.footerLeft img{
  width:20mm;
}

.footerRight{
  position: running(footerRight);
  text-align: right;
  font-size:8pt;
}

.toc{
  break-after:always;
  page-break-after:always;
}

.toc a{
  display:block;
}

.toc a::after { 
  content: leader(".") target-counter(attr(href), page); 
}

Now let us add a cover page.

...

**<div class="cover">
  <h1>Cover Page</h1>
</div>**

<div class="toc">
...

For this, we will already make use of the ‘break-after’ property. This way, we ensure that only our cover text is on the first page. For compatibility, we will also add the ‘page-break-after’ property.

.cover{
  break-after:always;
  page-break-after:always;
}

The new cover page.

First Page

But still, the first page has the same header and footer as all other pages. Usually, you do not want the same or any header/footer on the first page. To remove this information, you can use the ‘:first’ pseudo-class. Within this selector, you can give the first page different content in the page margin boxes.

@page:first{
  @top-left{
    content:"";
    border-bottom:none;
  }

  @top-center{
    border-bottom:none;
  }

  @top-right{
    content:"";
    border-bottom:none;
  }

  @bottom-right {
    content:"";
    border-top:none;
  }

  @bottom-center{
    content:"";
    border-top:none;
  }

  @bottom-left{
    content:"";
    border-top:none;
  }
}

First page with empty page margin boxes.

Looking at the above screenshot, you see the difference between the first and second page. You see that the third and fourth page still have the same header/footer in the below screenshot.

The third and fourth page.

Left and Right Pages

Another common use case is printing the page numbers on the outside bottom corner of your page. Or showing the chapter’s title only on the left page. So to differ between the pages you can use the ‘:left’ and ‘:right’ pseudo-classes.

Picture by Tamara Gak @tamara_photography, https://unsplash.com/photos/IBXcdiq-o0A

We need to define different content in the page margin boxes for the left and right pages to achieve this.

...
@page:left{
  @bottom-left {
    content:"I am a left page";
    border-top:2px solid #434190;
    font-size:8pt;
  }
}

@page:right{
  @bottom-right {
    content: "I am a right page";
    border-top:2px solid #434190;
    font-size:8pt;
  }
}
...

You can see that we overwrite the bottom page margin boxes for the right and left pages in the CSS code above.

Left and right pages

Now let’s put the page numbers to the outside and hide the rest.

...
@page:left{
  @bottom-right {
    content:"";
    border-top:2px solid #434190;
  }

  @bottom-center{
    content:"";
    border-top:2px solid #434190;
  }

  @bottom-left{
    content: counter(page) ' / ' counter(pages);
    border-top:2px solid #434190;
    font-size:8pt;
  }
}

@page:right{
  @bottom-right {
    content: counter(page) ' / ' counter(pages);
    border-top:2px solid #434190;
    font-size:8pt;
  }

  @bottom-center{
    content:"";
    border-top:2px solid #434190;
  }

  @bottom-left{
    content:"";
    border-top:2px solid #434190;
  }
}
...

Adjusted Page Numbers on Left and Right Pages

Blank Pages

Now what to do about empty pages? Most of the time, you do not want a page number or any header on pages without content. For this, there is a pseudo-class called ‘blank’.

Let us first prepare our document again, so we let each chapter start on a right page. With this, the left page might be empty in some cases, as the previous chapter’s content could end on a right page.

Look at the CSS below. Instead of passing an ‘always’ to the ‘break-before’, we pass a ‘right’. This way, the content of a chapter will always start on an right page.

.content h1{
  break-before:right;
  page-break-before:right;
}

The screenshot below shows how the chapter’s content starts on the right page, and the left page is empty.

Left Page without Content

Not empty, though, as we still have the header and footer. Now, let’s use the ‘blank’ pseudo-class and remove those.

@page:blank  {

  @top-left{
    content:"";
    border-bottom:none;
  }

  @top-center{
    content:"";
    border-bottom:none;
  }

  @top-right{
    content:"";
    border-bottom:none;
  }

  @bottom-right {
    content:"";
    border-top:none;
  }

  @bottom-center{
    content:"";
    border-top:none;
  }

  @bottom-left{
    content:"";
    border-top:none;
  }
}

A empty left page.

All examples in this article were rendered with PDFreactor. You can try the other PDF rendering tools too. These samples will work with most of them!

Another topic which I will cover in a different article is ‘named pages’. So if you liked the content of this article, follow my blog for more!

PrintCSS: A basic CV example

Andreas — Sat, 27 Feb 2021 23:04:11 +0000

In this article you will learn how to create your own CV PDF with HTML, CSS. To render the actual PDF we will use PagedJS an open-source tool to create PDF documents from HTML.

Before we start with the CV, let us think about the structure we want. So in this example we will create a multi-page CV and on each of the pages we will have our main details in a header section.

After the header there will be a short section for a introduction text. Then following a section for the employment history, the education and further skills.

For all sections there will be sub-sections for the different jobs or achievements. On the left side we will put the dates and right the content so what we actually did in that time period.

The header section

Header Section Sample

For the header let us first define the HTML structure. Our heading will be the first and last name in an H1 element. Next we want to put some links to important websites, like our LinkedIn or GitHub Profile. That these links look nice you can include FontAwesome and add a small icon in front of every link. Last we should put more information about ourselves, like the birthdate, phone number and address.

CSS:

@import url('https://fonts.googleapis.com/css2?family=Asul:wght@700&family=Open+Sans&display=swap');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

@page{
  size:A4;
  margin:5cm 2cm 2cm 2cm;

  @top-center{
    content:element(MyHeader);
  }

  @bottom-center{
    content: "- " counter(page) " -";
  }
}

header{
    position:running(MyHeader);
    text-align:center;
}

header p i:first-of-type{
    margin-left:0;
}

header i{
    margin-left:5mm;
}

HTML:

<header>
    <h1>Firstname Lastname</h1>
    <p>
        <i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:info@azettl.net">info@azettl.net</a> 
        <i class="fa fa-home" aria-hidden="true"></i> <a href="https://printcss.live">printcss.live</a>
        <i class="fa fa-github" aria-hidden="true"></i> <a href="https://github.com/">github.com/USER</a>
        <i class="fa fa-linkedin" aria-hidden="true"></i> <a href="https://linkedin.com/">linkedin.com/in/USER</a>
    </p>
    <p>
        <i class="fa fa-birthday-cake" aria-hidden="true"></i> 01. January 1970 
        <i class="fa fa-phone" aria-hidden="true"></i> +49 123 456 789 
        <i class="fa fa-map-marker" aria-hidden="true"></i> Streetname 1, 12345 City
    </p>
</header>

The profile section

The profile section or introduction text will be our first section. Here we already define the split of left and right content in the sub-sections. We will use the same code in all following sections. Let’s put the sections title in an H2 element and for the left/right sub-sections we will use a flex layout. To do so you need to set the display property of the element to ‘flex’. The left element should have a minimum width and the right element will take the rest of the space.

As the right element has paragraphs or further headlines (H3 elements) inside you should set their margin top to 0. This way they start at the same level as the left sides content.

CSS:

  section:first-of-type{
    position:absolute;
      bottom:0;
  }

  section:nth-of-type(2){
      break-before:always;
  }

  section{
    break-inside:avoid;
  }

  h1, h2, h3{
    font-family: 'Asul', sans-serif;
  }

  h2{
    background-color:black;
      color:white;
      display:inline-block;
      padding:1mm;
      text-transform:uppercase;
  }

  body{
      font-family: 'Open Sans', sans-serif;
  }

  .flex{
    display:flex;
  }

  .left{
    min-width:4cm;
  }

  .right p:first-of-type,
  .right h3:first-of-type{
    margin-top:0;
  }

  .right p:first-of-type{
    margin-bottom:0;
  }

HTML:

<section>
    <h2>Profile</h2>
    <div class="flex">
        <div class="left"></div>
        <div class="right">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A erat nam at lectus urna duis. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Risus ultricies tristique nulla aliquet enim tortor at auctor urna. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Eros donec ac odio tempor orci dapibus ultrices in. Libero enim sed faucibus turpis in eu mi bibendum.</p>
            <p>Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Pellentesque habitant morbi tristique senectus et netus et. Gravida in fermentum et sollicitudin ac. Ac odio tempor orci dapibus ultrices.</p>
            <p>Nunc mattis enim ut tellus elementum. Diam quam nulla porttitor massa id neque aliquam. Auctor urna nunc id cursus metus aliquam. Nunc congue nisi vitae suscipit. Ut eu sem integer vitae justo eget. </p>
        </div>
    </div>
</section>

The other sections

All other sections in your CV document will have the same HTML structure and CSS styling. Have a look at the complete sample below to see how these sections are added.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Firstname Lastname - CV</title>
        <style>
          @import url('https://fonts.googleapis.com/css2?family=Asul:wght@700&family=Open+Sans&display=swap');
          @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

          @page{
            size:A4;
            margin:5cm 2cm 2cm 2cm;

            @top-center{
              content:element(MyHeader);
            }

            @bottom-center{
              content: "- " counter(page) " -";
            }
          }

          header{
            position:running(MyHeader);
              text-align:center;
          }

          header p i:first-of-type{
            margin-left:0;
          }

          header i{
            margin-left:5mm;
          }

          section:first-of-type{
            position:absolute;
              bottom:0;
          }

          section:nth-of-type(2){
              break-before:always;
          }

          section{
            break-inside:avoid;
          }

          h1, h2, h3{
            font-family: 'Asul', sans-serif;
          }

          h2{
            background-color:black;
              color:white;
              display:inline-block;
              padding:1mm;
              text-transform:uppercase;
          }

          body{
              font-family: 'Open Sans', sans-serif;
          }

          .flex{
            display:flex;
          }

          .left{
            min-width:4cm;
          }

          .right p:first-of-type,
          .right h3:first-of-type{
            margin-top:0;
          }

          .right p:first-of-type{
            margin-bottom:0;
          }
        </style>
    </head>
    <body>
        <header>
            <h1>Firstname Lastname</h1>
            <p>
                <i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:info@azettl.net">info@azettl.net</a> 
                <i class="fa fa-home" aria-hidden="true"></i> <a href="https://printcss.live">printcss.live</a>
                <i class="fa fa-github" aria-hidden="true"></i> <a href="https://github.com/">github.com/USER</a>
                <i class="fa fa-linkedin" aria-hidden="true"></i> <a href="https://linkedin.com/">linkedin.com/in/USER</a>
            </p>
            <p>
                <i class="fa fa-birthday-cake" aria-hidden="true"></i> 01. January 1970 
                <i class="fa fa-phone" aria-hidden="true"></i> +49 123 456 789 
                <i class="fa fa-map-marker" aria-hidden="true"></i> Streetname 1, 12345 City
            </p>
        </header>

        <section>
            <h2>Profile</h2>
            <div class="flex">
                <div class="left"></div>
                <div class="right">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A erat nam at lectus urna duis. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Risus ultricies tristique nulla aliquet enim tortor at auctor urna. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Eros donec ac odio tempor orci dapibus ultrices in. Libero enim sed faucibus turpis in eu mi bibendum.</p>
                    <p>Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Pellentesque habitant morbi tristique senectus et netus et. Gravida in fermentum et sollicitudin ac. Ac odio tempor orci dapibus ultrices.</p>
                    <p>Nunc mattis enim ut tellus elementum. Diam quam nulla porttitor massa id neque aliquam. Auctor urna nunc id cursus metus aliquam. Nunc congue nisi vitae suscipit. Ut eu sem integer vitae justo eget. </p>
                </div>
            </div>
        </section>

        <section>
            <h2>Employment History</h2>
            <div class="flex">
                <div class="left">2020 January &ndash; today</div>
                <div class="right">
                <p>Excepteur</p>
                <h3>Duis aute irure dolor in reprehenderit in voluptate</h3>
                <ul>
                    <li>Lorem ipsum dolor sit amet</li>
                    <li>Lorem ipsum dolor sit amet</li>
                    <li>Lorem ipsum dolor sit amet</li>
                    <li>Lorem ipsum dolor sit amet</li>
                </ul>
                </div>
            </div>
            <div class="flex">
                <div class="left">2007 &ndash; today</div>
                <div class="right">
                <p>Lorem ipsum dolor</p>
                <h3>Lorem ipsum</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                </p>
                </div>
            </div>
        </section>

        <section>
        <h2>Education</h2>
            <div class="flex">
                <div class="left">2004 &ndash; 2007</div>
                <div class="right">
                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
                    <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
                    <ul>
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Lorem ipsum dolor sit amet</li>
                    </ul>
                </div>
            </div>
        </section>

        <section>
            <h2>Skills</h2>
            <div class="flex">
                <div class="left">Languages</div>
                <div class="right">German: mother tongue,English: fluent</div>
            </div>
            <div class="flex">
                <div class="left">Certificates</div>
                <div class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
            </div>
        </section>
    </body>
</html>

You can see the complete sample including the resulting PDF document on my GitHub repository for print CSS samples.

If you want to try recreating this CV or create your own one you can use printcss.live to render your PDF. This will save you the time of installing one of the rendering tools on your own dev environment.

If you want a more detailed explanation of the above sample check the Video about the same on YouTube.