Caption

The Caption feature lets you change the visual appearance of subtitles associated with audio and video files imported into Storyline.

This feature was originally written to solve the ratio problem encountered when changing the resolution of a project. The size of the subtitle container does not follow the ratio of resolutions applied to the module, which causes problems when a high resolution is chosen: the subtitle box appears "tiny ".

Presentation

The feature uses CustomCSS to redefine the style sheet rules applied to the various HTML nodes that make up the Subtitle element.

The HTML structure is as follows:

HTML structure
<div class='caption-container'>     // pointed out by GetCaptionContainer()
    <div class='caption'>           // pointed out by GetCaption()
        <p>/*   Sous-titres */</p>  // pointed out by GetCaptionText()
    </div>
</div>

The feature offers several methods for shortening declarations in the main initialisation trigger.

  • clearBox: resets the margin and padding attributes of the GetCaption() and GetCaptionText() nodes, and deletes all native styles on both nodes;

  • setBackground: applies a background and shadow to the GetCaptionText() node;

  • setFont: applies a font to the GetCaptionText() node.

Information for developers


The methods return pre-constructed stylesheet definitions to simplify the basic graphic design.
For advanced developers who want more specific definitions, you can redefine the .caption and .caption p CSS styles directly using CustomCSS.newRule.


Let's look at each of these methods in detail.

How to use

To simply reset the subtitle box to take into account the new ratio of a Storyline project, call the methods one after the other as they are, with no arguments unless otherwise specified.

JavaScript
Caption.clearBox();
Caption.setBackground();
GoogleFonts.link('Inter:wght@400;700');
Caption.setFont("Inter");

Caption.clearBox

To avoid conflicts with the Storyline player's native styles, the Caption.clearBox method deletes the formatting styles in the GetCaption() and GetCaptionText() nodes.

It must be called before using the other 2 methods.

Caption.setBackground

This method sets the background colour of the GetCaptionText() node and accepts several arguments.

JavaScript
Caption.setBackground("#000000", 0.6, 2, 1);

If the arguments are omitted, the method applies the following values:

  • Colour: background colour in #00000 (black) format;
  • Transparency**: background transparency at 60%, expressed as a decimal value between 0 and 1;
  • Blur**: blur effect for an applied shadow 2 pixels wide;
  • Offset**: 1 pixel offset of the applied shadow on the 4 axes.

Caption.setFont

Finally, Caption lets you change the font, colour and size of the node GetCaptionText().

JavaScript
GoogleFonts.link('Inter:wght@400;700');
Caption.setFont('Inter','white','2em');

Only the first argument is mandatory to define the font to be used.

  • Font: mandatory argument, to be combined with one of the GoogleFonts methods or CustomCSS.newFontFace;
  • Colour: text colour set to white if omitted;
  • Size: text size set to 2em if omitted.