Fit the end-card title to the frame instead of letting it run off

Open Beginner friendly
  • Is something wrong?
#46 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
83/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript

Research direction

Read titleCard() in template/film.js and compare its title drawing with the text measurement in caption(). Check how the existing blur-in and letter-spacing animation set up the canvas state, then choose a deterministic way to fit long titles while preserving that animation. Done means long titles stay within the 1920 px frame and short titles retain their current appearance.

Written by the indexing model from the issue text.

Description

bug good first issue

titleCard() in template/film.js draws the film title on the final hero shot at a fixed size, with no regard for how wide the text actually is:

ctx.font = '96px EEDisplay';
ctx.letterSpacing = `${(26 - 12 * q).toFixed(1)}px`;
ctx.fillText(E.title.toUpperCase(), 0, 0);

The canvas is 1920 px wide and the text is centred, so anything wider than that bleeds off both edges. At 96 px Anton plus 12–26 px of letter spacing, a title runs well past the frame once it passes roughly 30 characters — so short titles look right while longer real ones (think a subtitled sequel, or a "Lord of the Rings"-length title) get their first and last words sliced off. E.title comes from the planner's "canonical film title", so it is not under the user's control.

The caption renderer in the same file already measures its text (ctx.measureText in caption()); the title card should do the same and then fit itself — scale the font down to a sensible floor, or break the title into two lines, keeping the existing blur-in and letter-spacing animation intact. Note that letter spacing affects the measured width, so the measurement has to happen after ctx.letterSpacing is set.

Because the frame must be a pure function of time (sections render independently), whatever fitting is chosen has to be deterministic rather than depending on a previously drawn frame.

Where to look: template/film.js — titleCard()

Getting started: Python 3.10+, Node 22+, FFmpeg on PATH. npm install, pip install -r requirements.txt, then python -m easyedit.doctor. Run python -m unittest discover before opening a PR. Passing --llm none skips the model entirely, which is the fastest way to test. Comment here to claim it. Questions → Discord.

Dominant language
Python
Stars
168
Forks
24
Avg merge
2d 10h
Merged PRs (30d)
14

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from blixvip/easyedit

All issues in blixvip/easyedit

Similar issues

More Python issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.