Customising subtitle font and colors
Note: This tutorial is for advanced users, producing videos with Narakeet scripts. For basic information on how to control subtitles with videos created from presentations, check out How to add subtitles to video.
Subtitles and closed captions can help you engage the audience on social networks, where videos autoplay without sound, and to make the content accessible to disabled users. There are two primary way of creating subtitles with Narakeet.
- You can generate an external subtitle track (in SubRip/SRT and Web Video Text Track/VTT formats). Many online video hosting and sharing platforms (such as YouTube, Facebook and LinkedIn) let you upload these files to take advantage of their native subtitle/closed captioning system.
- You can overlay the subtitles on top of the video permanently. This “burns” the subtitles into the video, obscuring part of the video frame.
The first option lets users choose whether to show or hide subtitles, and in many cases also lets users style subtitles themselves (they can choose the font size, type and colour in the video player).
The second option fixes the subtitles into the video, so they cannot be turned off or on. It’s better for publishing to platforms that do not have native subtitle/closed caption features (such as Twitter), or when you want to make sure the subtitles are always visible.
For overlaid subtitles, because Narakeet writes the subtitles directly into the video as images, users cannot style them directly. The subtitles normally show as white text with a black outline or background, to create enough contrast with video content. Narakeet automatically chooses an appropriate font size for the video frame to fit in roughly two lines of text, so that the captions do not obscure too much video content. This is suitable for most usages, but you can also customise it for your needs. For example, you can increase the font size or reduce the amount of text shown on the screen at any single time.
Using standard subtitle styles
There are three standard subtitle styles, which you can specify using the
embed: create an embedded subtitle track in the result video, and generate SRT and VTT files as separate downloads. Users can turn on/off subtitles in the video player, but a video player must support subtitles to show them.
overlay: burn the subtitles onto the video (permanently shown). Users cannot turn off these subtitles, but they work in all video players.
overlay-background: burn the subtitles onto the video, with a semi-transparent black background.
none: do not include any subtitles
To set one of the standard styles, use the style name as the value of the subtitles header. For example, the following script will turn on overlay with background subtitles:
--- size: 720p subtitles: overlay-background --- Where do you want to go for coffee? !(pic.jpg)
The big difference between
overlay-background is in how the contrasting background is shown. With
outline, a small border around the font gets shown in a contrasting color, as in the image below:
outline-background, the text is shown on a semi-transparent background box, as in the image below:
Specifying subtitle properties
You can set many subtitle properties directly in the header, such as colors and sizes. In that case, the subtitle property becomes a key-value map, and you must specify the
mode sub-property. With
mode, use either
--- size: 720p subtitles: mode: overlay # additional properties optionally --- Where do you want to go for coffee? !(pic.jpg)
Controlling the number of characters in a single frame
Narakeet breaks long narration lines into individual subtitles to avoid overcrowding a single video frame. The standard line break method allows between 130 and 140 characters on a screen.
It’s sometimes useful to reduce or increase the number of characters that can be shown in a single frame. For example, arabic script characters can get very long, so you may want to show fewer on a single frame. If you use a very large video frame and a small subtitle font, then increase the limit so you can show more text.
You can control the maximum breaking limit by setting the break property. For example, the following script will restrict subtitles to up to 30 characters in a single frame:
--- size: 720p subtitles: mode: overlay break: 30 --- Where do you want to go for coffee? !(pic.jpg)
Note that you can use the break property with
embed subtitles. The other styling properties only apply to
overlay subtitles (since the video player itself controls the styling for embedded video tracks).
Changing the font size
Narakeet automatically chooses the font size depending on the video frame, to fit approximately two lines of text to a video frame. You can modify the font size by using the
scale property, and set it to a multiplier you would like to apply to the font size. Because this is a multiplier, 0.5 would produce a font half the normal size, and 2 would produce font twice the normal size. For example, the following script will show subtitles in twice the normal font size:
--- size: 720p subtitles: mode: overlay scale: 2 --- Where do you want to go for coffee? !(pic.jpg)
The result will look as in the image below:
For more precise control, you can also use the
size property and set it to a pixel font size. For example, the following script uses a 40 pixel font for subtitles:
--- size: 720p subtitles: mode: overlay size: 40 --- Where do you want to go for coffee? !(pic.jpg)
Note that you can use either the
scale or the
size property, but not both. We generally recommend using the
scale property, since it will adjust to the video frame. Use the
size property only when you absolutely want to control the text sizing, for example to fit it into some prepared background box on the video materials.
Changing the outline color
You can specify a color using CSS color names or hex codes. All standard web color names are supported (e.g. black or aqua), as well as RGB/A codes in the standard CSS format (# followed by 6 hex values RRGGBB or 8 hex values RRGGBBAA). Because the header is technically YAML, and YAML uses the hash symbol (#) as a comment marker, make sure to enclose RGB/A colors in quotes.
The following example will set the outline color to red.
--- size: 720p subtitles: mode: overlay scale: 2 outline: red --- Where do you want to go for coffee? !(pic.jpg)
The output will look like the picture below:
Changing the background color
To show subtitles over a background box instead of using an outline, specify the
background property. Here is an example, setting the background to a highly transparent black (“#000000BB” means black color (RGB=000000) with BB as the alpha channel setting transparency.
--- size: 720p subtitles: mode: overlay scale: 2 background: "#000000BB" --- Where do you want to go for coffee? !(pic.jpg)
The output will look like the picture below:
Note that you can either use the
background or the
outline color, but not both.
Changing the primary color
You can also change the primary font color - just remember to make the background contrasting. For example, we could use black font on semi-transparent white background. Using the RGBA hex code, #FFFFFF88 shows a white color (FFFFFF) with roughly 50% alpha-channel (88).
--- size: 720p subtitles: mode: overlay scale: 2 color: black background: "#FFFFFF88" --- Where do you want to go for coffee? !(pic.jpg)
The result will look like in the picture below:
Check out the subtitle-styling example project on GitHub to see the key features explained in this tutorial in action.
For more information, check out the
subtitles header format documentation.