Forem: Franco Zanardi

Fast, Declarative Open Graph Image Generation in Python

Franco Zanardi — Sun, 12 Oct 2025 02:01:13 +0000

For any web project—be it a blog, an e-commerce site, or a documentation page—dynamically generating Open Graph (OG) images is a crucial feature for social sharing. A compelling preview image can significantly increase click-through rates. The challenge is creating these images efficiently and at scale.

Traditionally, developers in the Python ecosystem face two primary options:

Manual Rendering (e.g., with Pillow): This approach involves calculating the precise (x, y) coordinates for every line of text and every icon. It's fragile, a longer title can break the entire layout and becomes a nightmare to maintain.
Headless Browsers (e.g., with Selenium/Playwright): This involves rendering an HTML/CSS template in a headless browser and taking a screenshot. While powerful, it's notoriously slow and resource-intensive, often requiring heavy dependencies and complex infrastructure.

This article introduces a third approach: a declarative, high-performance method using pictex, a Python library for visual composition. We'll show how to build complex, high-quality images without manual coordinate math or the overhead of a browser.

To demonstrate this, we'll undertake a practical exercise: recreating the default Open Graph image from dev.to.

The Goal: A Real-World Example

Our objective is to write a Python function that generates a high-fidelity recreation of the dev.to card. This will serve as our case study for building maintainable and dynamic image templates.

This is the Open Graph image generated dynamically by dev.to for this post:

Setup

First, let's install pictex:

pip install pictex

You will also need a few assets for this project:

An Author Image: A square profile picture. We'll assume you have an image named author.webp.
The dev.to Logo: We'll use a WEBP version named logo.webp.
Font Files: We'll use "Inter" for a clean look. Make sure you have Inter-Bold.ttf, Inter-SemiBold.ttf, and Inter-Regular.ttf from Google Fonts.

Step 1: Building the Author Info Component

A key principle of a declarative approach is building complex UIs from small, independent components. Let's start with the author info block in the bottom-left. It's a Row containing a circular author image and a Column with the name and date.

from pictex import *

# The author's avatar, made circular with .border_radius("50%")
avatar = Image("author.webp").size(70, 70).border_radius("50%")

# The author's name and the date, stacked vertically
author_details = (
    Column(
        Text("Franco Zanardi").font_size(28).font_family("Inter-SemiBold.ttf"),
        Text("Oct 12").font_size(24).font_family("Inter-Regular.ttf").color("#656565")
    )
    .gap(2) # A 2px gap between name and date
)

# Combine the avatar and details in a horizontal Row
author_info = (
    Row(avatar, author_details)
    .gap(15)
    .align_items('center') # Vertically align the avatar with the text block
)

# Save this partial result
Canvas().background_color("white").padding(30).render(author_info).save("partial_result_1.png")

Partial result:

Step 2: Assembling the Bottom Bar

The bottom bar contains our author_info on the left and the dev_logo on the right. A Row with .horizontal_distribution('space-between') is the ideal tool for this. It automatically pushes its children to the opposite ends of the container.

To make this work reliably, we set the Row's width to "100%" to ensure it expands to fill its parent container.

from pictex import *

# (author_info definition from Step 1)
# ...

dev_logo = Image("logo.webp").size(70, 70)

# 'space-between' pushes the author info to the left and the logo to the right
bottom_bar = (
    Row(author_info, dev_logo)
    .size(width="100%") # Make the row take up the full parent width
    .justify_content('space-between')
    .align_items('center')
)

Canvas().background_color("white").padding(30).size(width=1000).render(bottom_bar).save("partial_result_2.png")

Partial result:

Step 3: Creating the Main Content Layout

Now for the core of our design. The main area is a Column that holds the title and the bottom_bar.

from pictex import *

# (bottom_bar definition from Step 2)
# ...

title_text = (
    Text("Fast, Declarative Open Graph Image Generation in Python")
    .font_family("Inter-Bold.ttf")
    .font_size(62)
    .color("black")
    .line_height(1.2)
)

main_content_layout = (
    Column(title_text, bottom_bar)
    .size("100%", "100%")
    .background_color("white")
    .padding(65, 80)
    .justify_content('space-between')
)

Canvas().size(width=1000, height=500).render(main_content_layout).save("partial_result_3.png")

Partial result:

The Final, Reusable Function

Let's wrap this logic in a dynamic function to generate a card for any post, making it a practical tool.

from pictex import *

def create_devto_card(title: str, author_name: str, author_image_path: str, date: str, output_path: str):
    """Generates a dev.to-style social media card."""

    top_bar = Row().size("100%", 25).background_color("black")

    avatar = Image(author_image_path).size(70, 70).border_radius("50%")
    author_details = Column(
        Text(author_name).font_size(28).font_family("Inter-SemiBold.ttf"),
        Text(date).font_size(24).font_family("Inter-Regular.ttf").color("#656565")
    ).gap(2)
    author_info = Row(avatar, author_details).gap(15).align_items('center')

    dev_logo = Image("logo.webp").size(70, 70)
    bottom_bar = Row(author_info, dev_logo).size(width="100%").justify_content('space-between').align_items('center')

    title_text = Text(title).font_family("Inter-Bold.ttf").font_size(62).color("black").line_height(1.2)

    main_content_layout = (
        Column(title_text, bottom_bar)
        .size(width="100%")
        .flex_grow(1)
        .background_color("white")
        .padding(65, 80)
        .justify_content('space-between')
    )

    final_layout = Column(top_bar, main_content_layout).size(1000, 500)

    canvas = Canvas()
    image = canvas.render(final_layout)
    image.save(output_path)
    print(f"Image saved to {output_path}")

# --- Use the function ---
create_devto_card(
    title="Fast, Declarative Open Graph Image Generation in Python",
    author_name="Franco Zanardi",
    author_image_path="author.webp",
    date="Oct 12",
    output_path="result.png"
)

Final result:

Conclusion

This exercise demonstrates that a declarative, component-based approach is a highly effective solution for dynamic image generation. Instead of imperative drawing commands, we describe the desired layout, and the library handles the complex rendering logic. This results in code that is not only more readable and maintainable but also significantly faster and less resource-intensive than browser-based alternatives.

If this approach interests you, consider visiting the pictex repository on GitHub.

Happy coding.

[Boost]

Franco Zanardi — Wed, 01 Oct 2025 18:09:18 +0000

Python Tutorial: Adding Shadows and Outlines to Text on Images

Franco Zanardi ・ Sep 21

#python #tutorial #webdev #automation

How to Render Emojis and International Text on Images with Python

Franco Zanardi — Sun, 21 Sep 2025 00:35:57 +0000

If you've ever generated images with text in Python, you've likely seen this frustrating sight: □□□. These empty boxes, known as "tofu," appear when your chosen font doesn't have a glyph for a specific character, a common problem with emojis (✨), symbols (→), and non-Latin scripts (世界).

While standard libraries often require complex manual workarounds, this tutorial will show you how the Python library pictex solves this problem automatically.

Setup

First, let's get pictex installed. All you need is pip:

pip install pictex

Now, let's get straight to the solution.

The "It Just Works" Solution: Automatic System Fallback

Let's attempt to render a string containing English, Japanese, and an emoji using a standard font like "Georgia", which does not support all these characters. With pictex, you don't need any special configuration.

from pictex import Canvas

canvas = (
    Canvas()
    .font_family("Georgia") # A beautiful but still limited serif font
    .font_size(80)
    .color("darkslateblue")
    .padding(20)
    .background_color("whitesmoke")
)

text_with_mixed_chars = "Hello, 世界 ✨"
image = canvas.render(text_with_mixed_chars)
image.save("font_autofallback.png")

The result is a perfectly rendered image, with no "tofu":

How It Works

Notice we didn't do anything special. pictex handles this out of the box because of its automatic font fallback system.

Here’s the mechanism: When pictex prepares to render text, it checks if the primary font (in this case, "Georgia") supports each character. If it finds a character that the font doesn't have a glyph for, it automatically searches your operating system for an installed font that can render it. It then seamlessly uses that fallback font for only the missing characters.

Full Control with `.font_fallbacks()`

Automatic fallback is fantastic, but sometimes you need more control. You might want to ensure a specific stylistic consistency for certain languages or use a custom emoji font you provide.

This is where the .font_fallbacks() method comes in. It lets you provide a list of your own font files to try before pictex resorts to searching the entire system.

The full fallback chain is executed in this order:

Primary Font: The font set with .font_family().
User-Defined Fallbacks: The list of fonts provided to .font_fallbacks(), in the order you list them.
Automatic System Search: If no font in the above steps can render the character, pictex performs its default mechanism of searching for any suitable font on the system.

Let's use this to specify a particular font for the Japanese text. We'll use the free "Noto Sans JP" font from Google Fonts.

from pictex import Canvas

# A stylish primary font (doesn't support Japanese or emojis)
primary_font = "Lato-BoldItalic.ttf" 

# A specific Japanese font we want to use as a fallback
japanese_font = "NotoSansJP-Regular.ttf"

canvas = (
    Canvas()
    .font_family(primary_font)
    # Tell PicTex to try our Japanese font before searching the system
    .font_fallbacks(japanese_font)
    .font_size(80)
    .color("olive")
    .padding(20)
    .background_color("whitesmoke")
)

text_with_mixed_chars = "Hello, 世界 ✨"
image = canvas.render(text_with_mixed_chars)
image.save("font_custom_fallback.png")

In this result, "Hello," is rendered with our primary Lato font, "世界" is rendered with Noto Sans JP (our specific choice), and "✨" is rendered using an emoji font found automatically on the system. We have achieved perfect rendering with full artistic control.

Conclusion

Handling complex, multi-lingual text and emojis is a notoriously difficult part of programmatic image generation. With pictex, this problem is solved from the ground up.

For most cases, the automatic system fallback works flawlessly and requires no extra code.
For full creative control, the .font_fallbacks() method gives you the power to define your own priority list of fonts, ensuring stylistic consistency across different character sets.

Stop fighting with tofu and start creating beautiful, reliable text visuals today.

If you found this tutorial helpful, I encourage you to explore the GitHub Repository.

Happy coding

Python Tutorial: Adding Shadows and Outlines to Text on Images

Franco Zanardi — Sun, 21 Sep 2025 00:03:13 +0000

Creating visually striking images often means adding effects like drop shadows or crisp outlines to your text. These details can make text pop, improve readability, and give your designs a professional finish.

However, if you've ever tried to do this programmatically in Python using libraries like Pillow (PIL), you know it can be a real headache. The process often involves rendering text multiple times with slight offsets, manually blurring layers, or complex pixel manipulation with NumPy. It’s cumbersome and rarely looks perfect.

In this tutorial, we'll show you how to achieve these professional-looking effects in just a few lines of code using a modern Python library called pictex.

What is PicTex?

pictex is a Python library for creating beautifully styled visual compositions. It provides a high-level, declarative API inspired by CSS, allowing you to build complex images by composing simple builders. Forget about calculating coordinates; think in terms of rows, columns, padding, and styles.

Setup

First, let's get pictex installed. All you need is pip:

pip install pictex

That's it! No other complex dependencies are needed. Let's dive in.

The Basics: Adding Text to an Image

Before we add effects, let's start with a simple foundation. We'll create a Canvas, define some basic styles, and render a Text element. This will be our starting point.

from pictex import Canvas, Text

# Create a canvas with a dark background to make our effects stand out
canvas = (
    Canvas()
    .font_size(150)
    .font_family("Impact") # A bold font works great for effects
    .padding(40)
    .background_color("#404040") # Gray background
)

# Render the text and save it
image = canvas.render(Text("Hello World").color("white"))
image.save("hello_world.png")

This gives us a clean and simple base image:

Part 1: Adding an Outline (Text Stroke)

An outline, or "stroke," is perfect for creating sticker-like text or making it stand out against a busy background. With pictex, this is a single method call: .text_stroke().

The method takes two main arguments: width for the outline's thickness and color.

from pictex import Canvas, Text

canvas = (
    Canvas()
    .font_size(150)
    .font_family("Impact")
    .padding(40)
    .background_color("#404040")
)

# Add a yellow text color and a black outline
image = canvas.render(
    Text("COMIC")
    .color("yellow")
    .text_stroke(width=5, color="black")
)
image.save("comic_style.png")

The result is crisp, high-impact text, achieved with zero hassle:

Part 2: Adding a Drop Shadow

A classic drop shadow gives text depth and makes it feel like it's floating above the background. To do this, we use the .text_shadows() method, which takes one or more Shadow objects.

First, make sure to import Shadow from the library. A Shadow object has three key parameters:

offset: A tuple (dx, dy) indicating the horizontal and vertical shift.
blur_radius: The amount of blur. A higher value creates a softer shadow.
color: The color of the shadow.

from pictex import Canvas, Text, Shadow

canvas = (
    Canvas()
    .font_size(150)
    .font_family("Impact")
    .padding(40)
    .background_color("#404040")
)

# Add a simple, soft drop shadow
image = canvas.render(
    Text("DEPTH")
    .color("white")
    .text_shadows(
        Shadow(offset=(8, 8), blur_radius=5, color="#00000080") # Black with 50% opacity
    )
)
image.save("drop_shadow.png")

With just one extra line of code, we've added convincing depth to our text:

Part 3: Advanced Effect - Creating a "Neon Glow"

This is where pictex really shows its power. The .text_shadows() method isn't limited to a single shadow. You can pass it multiple Shadow objects to create complex effects like a neon glow.

The trick to a neon effect is to stack multiple shadows of the same color (or similar colors) with an offset of (0, 0) and different blur_radius values.

from pictex import Canvas, Text, Shadow

canvas = (
    Canvas()
    .font_size(150)
    .font_family("Impact")
    .padding(40)
    .background_color("#404040")
)

# Stack multiple shadows to create a glowing effect
image = canvas.render(
    Text("NEON")
    .color("#00FFAA") # Bright cyan color for the text
    .text_shadows(
        Shadow(offset=(0, 0), blur_radius=3, color="#00FFAA80"),
        Shadow(offset=(0, 0), blur_radius=5, color="#00FFAA80"),
        Shadow(offset=(0, 0), blur_radius=10, color="#FFFFFF80") # A faint white outer glow
    )
)
image.save("neon_glow.png")

The result is a stunning glow effect that would be extremely complex to achieve with traditional tools:

Conclusion

As you've seen, adding advanced text effects that would normally require significant effort becomes trivial with the declarative API of pictex. Whether it's a sharp outline, a subtle shadow, or a complex glow, you can achieve it in a readable way with very few lines of code.

This is just one of the many features pictex offers to simplify image generation in Python. If you found this tutorial helpful, I encourage you to explore the GitHub Repository.

Happy coding

Adding Animated Subtitles to Videos with Python

Franco Zanardi — Mon, 30 Jun 2025 00:26:50 +0000

In this tutorial, we'll explore how to automate this process using Python to build a script that adds CSS-styled, animated captions directly onto a video file.

We will use pycaps, an open-source library I built to handle the complexities of video processing, transcription, and rendering.

By the end, you'll have a script that can add subtitles like these:

Let's dive into the code.

Getting Started

First, you'll need a video file. For this tutorial, let's assume we have a file named my_video.mp4. The only prerequisite is to have pycaps installed. You can find the installation instructions in the project's README.

Let's start with a minimal script to add styled subtitles. Create a python file:

from pycaps import *

# Let's define our styles as a multi-line string (we could also use a .css file)
my_css_styles = """
/* styles for each word */
.word {
    font-family: system-ui;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    color: white;
    padding: 2px 3px;
    text-shadow:
        -1px -1px 0 black,
        1px -1px 0 black,
        -1px  1px 0 black,
        1px  1px 0 black;
}

/* styles for each word being spoken */
.word-being-narrated {
    background-color: blue;
    border-radius: 5%;
}
"""

# This is the core of our script. It defines the rendering pipeline.
builder = CapsPipelineBuilder()

# We tell it which video to process and where to save the output.
builder.with_input_video("cooking_video.mp4")

# We config the CSS to use
builder.add_css_content(my_css_styles)

# We limit the amount length of each segment
builder.add_segment_splitter(LimitByCharsSplitter(min_limit=10, max_limit=15))

# Build the pipeline from our configuration and run it.
pipeline = builder.build()
pipeline.run()

print("Subtitles added!")

When you run python add_subs.py, the library will automatically:

Extract the audio from my_video.mp4.
Transcribe it using Whisper to get word-by-word timestamps.
Split the transcription into shorter segments using LimitByCharsSplitter (see more details about the structure in the docs).
Render the words onto the video using the style provided.

Results:

This is a good start, and you can already customize your styles to achieve different looks.

Customizing your styles

You have access to several predefined CSS classes.

First, there are word and line, which let you style each word or entire lines throughout the video.

Then, there are state-based classes depending on the timing of narration:

For words: word-not-narrated-yet, word-being-narrated, word-already-narrated
For lines: line-not-narrated-yet, line-being-narrated, line-already-narrated

For example, if you want to hide words that haven’t been narrated yet, you can write:

.word-not-narrated-yet {
    display: none;
}

If you add this style to our previous example, the result would look like this:

Bringing Words to Life with Animations and Tags

Styling is one half of the equation; animation is the other. We can select specific elements to be styled or animated using the built-in Tagging System.

Tags are labels automatically applied to elements based on their position (e.g., first-word-in-line) or content. We can use these tags to, for example, apply a different animation to the first word of each line.

In this guide, we use tags to change the animation based on the structure. This same system can be used with semantic tags to change styles based on what a word means. That's the exact technique I used in my post about content-aware subtitles.

Let's modify our script to:

Make the first segment slide in
Make the other segments zoom in

from pycaps import *

my_css_styles = """
/* styles for each word */
.word {
    font-family: system-ui;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    color: white;
    padding: 2px 3px;
    text-shadow:
        -1px -1px 0 black,
        1px -1px 0 black,
        -1px  1px 0 black,
        1px  1px 0 black;
}

/* styles for each word being spoken */
.word-being-narrated {
    background-color: blue;
    border-radius: 5%;
}
"""

builder = CapsPipelineBuilder()
builder.with_input_video("cooking_video.mp4")
builder.add_css_content(my_css_styles)
builder.add_segment_splitter(LimitByCharsSplitter(min_limit=10, max_limit=15))

# Add animations
builder.add_animation(
    animation=SlideIn(direction="down"),
    when=EventType.ON_NARRATION_STARTS,
    what=ElementType.SEGMENT,
    tag_condition=TagConditionFactory.HAS(BuiltinTag.FIRST_SEGMENT_IN_DOCUMENT)
)

builder.add_animation(
    animation=ZoomIn(),
    when=EventType.ON_NARRATION_STARTS,
    what=ElementType.SEGMENT,
    tag_condition=TagConditionFactory.NOT(BuiltinTag.FIRST_SEGMENT_IN_DOCUMENT)
)

# Build the pipeline from our configuration and run it.
pipeline = builder.build()
pipeline.run()

print("Subtitles added!")

This script now produces a highly dynamic result. The conditional logic via tags allows for very granular control over the final look and feel.

Results:

Final Words

We've walked through how to programmatically add and customize animated subtitles using Python. We started with a simple script and progressively added styling and animations.

And if you're ready to take this to the next level, you can apply these same principles with more advanced tags. Check out the tutorial on How to Create Content-Aware Animated Subtitles to see how we use AI to make subtitles that react to the meaning of the spoken words.

The project is fully open-source and I welcome you to check it out on GitHub, try the online Web UI demo, and see what you can create.

How to Create Content-Aware Animated Subtitles with Python

Franco Zanardi — Sun, 29 Jun 2025 06:42:38 +0000

Standard subtitles are functional, but what if they could be smarter? What if they could automatically highlight key information as it's spoken, making your content more engaging and easier to follow?

In this tutorial, we'll write a Python script that does just that. We'll take a simple cooking video and create subtitles that automatically:

Animate word-by-word.
Highlight specific ingredients in one color.
Emphasize critical actions (like "mix" or "bake") in another.

This is what I call "content-aware" subtitling. We'll use Pycaps, an open-source library I built to make this kind of complex video processing accessible.

Here’s a glimpse of what we’ll create:

Let's get started.

Project Setup

First, make sure you have pycaps installed. The instructions are in the project's README.

Next, create a folder for our project and add two empty files:

render.py (our Python script)
styles.css (our stylesheet)

You'll also need a video file. I'll use one named cooking_video.mp4.

Step 1: Basic Subtitles with Custom Styling

Let's start by getting some styled subtitles on the screen. We'll write the script to transcribe the video and apply our custom CSS for a clean, professional look.

In styles.css, let's define our base style. We'll use a friendly, bold font and a "karaoke" effect where the current word is highlighted.

/* styles.css */

.word {
    /* Default style for all words */
    font-family: cursive, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: white;
    padding: 2px 3px;
    text-shadow:
        1px 1px 0px black, -1px 1px 0px black,
        1px -1px 0px black, -1px -1px 0px black,
        2px 2px 3px rgba(0, 0, 0, 0.7);
}

.word-being-narrated {
    /* The word currently being spoken */
    color: #ffc107;
    /* A warm yellow */
}

Now, in render.py, we'll write the code to use these styles.

# render.py
from pycaps import *

# Initialize the pipeline builder
builder = CapsPipelineBuilder()
builder.with_input_video("cooking_video.mp4")
builder.add_css("styles.css")
builder.add_segment_splitter(LimitByCharsSplitter(min_limit=10, max_limit=15))

# Build and run the pipeline
pipeline = builder.build()
pipeline.run()

print("Styled subtitles added!")

Run this script (python render.py). You'll get a new video file with perfectly timed, styled subtitles. This is our foundation. You will get something like this:

Step 2: Content-Aware Highlighting with Custom Tags

This is where it gets interesting. We want to style words based on their meaning. To do this, we'll use the pycaps Tagging System to automatically label words.

Let's define rules for two AI custom tags:

ingredient: We'll use a bit of AI to identify cooking ingredients.
key-action: And then to identify important cooking verbs.

This requires an API key setup, see the docs for info.

We'll use the SemanticTagger to manage these rules in our script.

# render.py (updated with SemanticTagger)
from pycaps import *

# 1. Create a tagger to hold our custom rules
tagger = SemanticTagger()

# 2. Rule 1: Use AI to tag cooking ingredients.
tagger.add_ai_rule(
    tag=Tag("ingredient"),
    instructions="cooking ingredients (e.g: flour, sugar, eggs)"
)

# 3. Rule 2: Use AI to tag important cooking actions.
tagger.add_ai_rule(
    tag=Tag("key-action"),
    instructions="important cooking verbs or techniques (e.g: mix, bake)"
)

# Initialize the pipeline builder
builder = CapsPipelineBuilder()
builder.with_input_video("cooking_video.mp4")
builder.add_css("styles.css")
builder.add_segment_splitter(LimitByCharsSplitter(min_limit=10, max_limit=15))

# 4. Add our custom tagger to the pipeline
builder.with_semantic_tagger(tagger)

# Build and run the pipeline
pipeline = builder.build()
pipeline.run()

print("Styled subtitles added!")

Now that our script is applying the tags, let's give them a unique style in styles.css.

/* styles.css (additions for custom tags) */

/* ... (keep the previous .word styles) ... */

/* Style for words tagged as 'ingredient' */
.word.ingredient {
  color: #4ade80; /* A fresh green */
}

/* Style for words tagged as 'key-action' */
.word.key-action {
  color: #60a5fa; /* A nice blue */
  font-weight: 800; /* Extra-Bold */
}

Run the script again. Now, your subtitles will automatically change color whenever an ingredient or a key action is mentioned!

See the results:

Step 3: Contextual Animations

Let's add a final layer of polish. We'll add a zoom-in animation for all ingredient and key-action words.

# render.py (final version)
from pycaps import *

tagger = SemanticTagger()
tagger.add_ai_rule(
    tag=Tag("ingredient"),
    instructions="cooking ingredients (e.g: flour, sugar, eggs)"
)
tagger.add_ai_rule(
    tag=Tag("key-action"),
    instructions="important cooking verbs or techniques (e.g: mix, bake)"
)

# Initialize the pipeline builder
builder = CapsPipelineBuilder()
builder.with_input_video("cooking_video.mp4")
builder.add_css("styles.css")
builder.add_segment_splitter(LimitByCharsSplitter(min_limit=10, max_limit=15))
builder.with_semantic_tagger(tagger)

# --- Add Animations ---
# A 'zoom' animation for every word with tag 'key-action' or 'ingredient'
builder.add_animation(
    animation=ZoomInPrimitive(duration=0.3, init_scale=0.7, overshoot=OvershootConfig()),
    when=EventType.ON_NARRATION_STARTS,
    what=ElementType.WORD,
    tag_condition=TagConditionFactory.parse("key-action or ingredient")
)

# Build and run the pipeline
pipeline = builder.build()
pipeline.run()

print("Final animated video is ready!")

And there we have it. A fully automated script that produces beautiful, dynamic, and content-aware subtitles.

Beyond the Script: Templates and the CLI

While this script is powerful, for a recurring task, you'd want to reuse this style. This is where Templates come in. You can package your styles.css and all your pipeline logic (including tagger rules and animations) into a reusable pycaps.template.json file. For all the options, see the JSON Configuration Reference.

Once you have a template, you can process new videos in a single line from your terminal:

pycaps render --input episode2.mp4 --template my-cooking-style

Final Words

We've seen how a combination of Python scripting, CSS, and a smart tagging engine can automate the creation of high-quality, animated subtitles. This approach gives you the power to create a unique look for your video content.

The project is fully open-source. I invite you to explore it on GitHub, try the online Web UI demo if you want to experiment without code, and see what you can build.

Forem: Franco Zanardi

Fast, Declarative Open Graph Image Generation in Python

The Goal: A Real-World Example

Setup

Step 1: Building the Author Info Component

Step 2: Assembling the Bottom Bar

Step 3: Creating the Main Content Layout

The Final, Reusable Function

Conclusion

[Boost]

Python Tutorial: Adding Shadows and Outlines to Text on Images

Franco Zanardi ・ Sep 21

How to Render Emojis and International Text on Images with Python

Setup

The "It Just Works" Solution: Automatic System Fallback

How It Works

Full Control with .font_fallbacks()

Conclusion

Python Tutorial: Adding Shadows and Outlines to Text on Images

What is PicTex?

Setup

The Basics: Adding Text to an Image

Part 1: Adding an Outline (Text Stroke)

Part 2: Adding a Drop Shadow

Part 3: Advanced Effect - Creating a "Neon Glow"

Conclusion

Adding Animated Subtitles to Videos with Python

Getting Started

Customizing your styles

Bringing Words to Life with Animations and Tags

Final Words

How to Create Content-Aware Animated Subtitles with Python

Project Setup

Step 1: Basic Subtitles with Custom Styling

Step 2: Content-Aware Highlighting with Custom Tags

Step 3: Contextual Animations

Beyond the Script: Templates and the CLI

Final Words

Full Control with `.font_fallbacks()`