Examples: Multi Text

examples/multi_text

live demo

The "multi_text" DataDocs example demonstrates how to use a specially formatted JSON file to more efficiently add lots of text overlays to a DataDoc. You can still use any webfont you like, but instead of manually adding divs, CSS classes and "addSalt" calls to your files, you edit a single JSON file where you specify all the information necessary to position and time your text.

1. Open up assets/dataFiles/text_labels.json. On line 2, you'll see a JSON element called stylesheet. This is where you can specify the font (or webfont) that should be the default for all of your text labels (don't worry, you can override these for individual pieces of text).

2. Inside the text_blocks JSON array, you'll see a series of individual elements, each of which contains 3 arrays (enclosed by square brackets []). The top_left array controls the positioning of the text div that will be created. The start_end array specifies the time, in seconds when the text will appear and disappear. The text_list array may contain one or more elements, each of which corresponds to a individual line of text in the final video. Each element must have at least a text field that contains the text to display, and may include an optional fontSize and fontFamily field, specifying the point size and font that should be applied only to that line of text, if different from the default. Note that multiline text is achieved by adding putting multiple elements into a single text_list array. Feel free to add, remove and change these elements as you like.

3. Open up dd_multi_text.html in FireFox (this example won't work in Chrome on your desktop). You should see the video with your new text fields and timing appear!

Note: If you don't want your text file to be called text_labels.json be sure to rename it while keeping the .json extension. Then in main.js, change the name of the .json file targeted in the $.get function to match your own.