Edit the text styles and text properties using the expression controls.
Use expressions to control text styling in any text expression or Motion Graphics templates. Some things you can do with expressions are:
Link multiple titles and update their styles at once (very useful for designing titles).
Keep font, size, and styling in sync across multiple Text layers.
Make global changes to text properties.
Set style attributes for individual characters in a Text layer.
Once you set these for a Text layer, reference that layer's properties to easily apply changes throughout the composition. After Effects expressions use properties to read (get) text style values and function methods to write (set) them inside the expression engine. This allows you to link text styles across Text layers or set up controls for them to be animated or used in a Motion Graphics template.
Before you start using expressions to edit text properties
Set Expressions Engine to Javascript by selecting Project Settings > Expressions > Expressions Engine > Javascript.
In the Expression Language flyout menu, select Text > Properties > Text Propertiesor Text > Styling.
Available text attributes
The following text styling attributes can be read and set using the style object:
Font
Font Size
Faux Bold
Faux Italics
All Caps
Small Caps
Tracking
Leading
Auto Leading
Baseline Shift
Fill (enable/disable)
Fill Color
Stroke (enable/disable)
Stroke Color
Stroke Width
Digit Set
Scaling
Kerning
Tsume
Baseline Direction
Baseline Option
The Source Text property of a Text layer is interpreted by expressions as a JavaScript string. The text itself can be read with sourceText, but it must be set on the style object with the setText method if style attributes are being modified. Go through some of the examples.
Expressions for text layers with paragraphs
Start a new line of text
Use \r in a string expression to start a new line of text. For example, to copy the original text from one layer onto the same layer and repeat it in all uppercase characters on a new line, use the following expression:
In addition to text style attributes, there are also paragraph attributes. These can only be applied to the entire Text layer. The paragraph attributes are only available in After Effects.
Direction
Every-Line Composer
First Line Indent
Justification
Leading Type
Left Margin
Right Margin
Space After
Space Before
Hanging Roman Punctuation
PostScript font expression menu
When referring to fonts in expressions, they must use a special "system name" ( or similar ). It is recommended to insert this special name from the Text > Font > Select Font dialog to avoid expression errors.
Open the Expression Language flyout menu, then select Text > Font. This brings up a dialog with drop-down menus to select the typeface and font to insert into the expression.
Font syncing
Fonts that are only referred to in the Expressions Editor are not recorded as fonts used by the project. To ensure all fonts referred to in the Expressions Editor will auto-sync or populate the Resolve Fonts dialog, use all of those fonts on a layer, even if that layer source is hidden.
Style object
All of the styling properties for a Text layer exist on the style object, which is accessed on the Source Text property using the following:
// Using the whole path to the Source Text property
text.sourceText.style
// Using the generic name for the current property
thisProperty.style
Using style by itself is the same as using either of the two examples above, but this can be confusing if style attributes from multiple Text layers are being combined.
The styling attributes of other Text layers can also be read. Use the pick whip to create a link to the other Text layer at the beginning of the first example shown above.
// Accessing the style object of a specific text layer
thisComp.layer("Other Layer Name").text.sourceText.style;
Style attributes of individual characters in a Text layer
In addition to using text expressions to set style attributes for the entire Text layer, you can also set style attributes for individual characters in the layer. A benefit of this per-character control is the automatic reflowing of text, such as when scaling letters, using superscript, and using a different font, just as you would expect from using substring styling from the Character panel.
To return the values of both the style and the actual Source Text at time, you will have to combine the getStyleAt and setText functions. Below are two examples of how to write this expression.
// To return the values of both the style and the actual Source Text at time (short hand)
var sourceTextProperty = thisComp.layer("MAIN TEXT").text.sourceText;
var newStyle = sourceTextProperty.getStyleAt(0,0);
newStyle.setText(sourceTextProperty);
// To return the values of both the style and the actual Source Text of the previous layer in the layer stacking order
var sourceTextProperty = thisComp.layer(index - 1).text.sourceText;
var newStyle = sourceTextProperty.getStyleAt(0,0);
newStyle.setText(sourceTextProperty);
Dropdown fonts
You can use Dropdown menus to control text styles, such as locking Text layers to specific fonts. This is useful for brand guidelines, templates, MoGRTS, and more:
// To lock a text layer to specific fonts with a Dropdown Menu Control
var dropDownMenu = thisComp.layer("LayerName").effect("Dropdown Menu Control")("Menu");
switch (dropDownMenu.value) {
case 1 :
text.sourceText.style.setFont("Georgia");
break;
case 2 :
text.sourceText.style.setFont("Impact");
break;
default :
text.sourceText.style.setFont("Tahoma");
}
Main text layer
Link multiple Text layers to a main font controller to control the text style of multiple layers at once. Create two Text layers and paste this expression into the Source Text of one of them:
// To get all text properties from a text layer
thisComp.layer("Text Layer 1").text.sourceText.style;
It's possible to get the style from a Text layer but override specific text properties by adding values with the set functions. Below are two examples using Fill Color and Font Size.
// To get all text properties from “Text Layer 1” but override Fill Color and Font Size with hardcoded values
var newStyle = thisComp.layer("Text Layer 1").text.sourceText.style;
newStyle.setFillColor(hexToRgb("FF0000")).setFontSize(100);
// To get all text properties from "Text Layer 1” but override Fill Color and Font Size with the layer’s current text properties
var newStyle = thisComp.layer("Text Layer 1").text.sourceText.style;
var currentFillColor = thisProperty.style.fillColor;
var currentFontSize = thisProperty.style.fontSize;
newStyle.setFillColor(currentFillColor).setFontSize(currentFontSize);
Examples
The following are examples for how to access and use text property values with expressions.
Font
The following are examples for accessing a Text layer's Font, Font Size, Faux Bold, Faux Italic, Tracking, and Leading:
// To return the name of the Font for the text layer itself
text.sourceText.style.font;
// To return the name of the Font another text layer is using
var otherLayer = thisComp.layer("Other Layer Name");
otherLayer.text.sourceText.style.font;
// To return the value of Font Size for the text layer itself
text.sourceText.style.fontSize;
// To return the value of Font Size for another text layer
var otherLayer = thisComp.layer("Other Layer Name");
otherLayer.text.sourceText.style.fontSize;
// To return a Boolean value of whether a layer's text is Faux Bold or not (True or False)
text.sourceText.style.isFauxBold;
// To return a Boolean value of whether a layer's text is Faux Italic or not (True or False)
text.sourceText.style.isFauxItalic;
// To return the value of a text layer’s Tracking as a number
text.sourceText.style.tracking;
// To return the value of a text layer's Leading as a number
text.sourceText.style.leading;
Fill
The following are examples for accessing a Text layer's Fill and Fill Color:
// To return a Boolean value of whether a layer's text has Fill applied to it (True or False)
text.sourceText.style.applyFill;
// To return the value of the Fill Color of a text layer
// By default, this returns an array of the RGB values on a scale from 0 – 1.0
text.sourceText.style.fillColor;
// Set the Fill Color of a text layer with setApplyFill and setFillColor
// setFillColor values are defined as an RGB array on a scale between 0 – 1.0
var newStyle = style.setApplyFill(true);
newStyle.setFillColor([1.0, 1.0, 1.0]);
// Set the Fill Color of a text layer substituting the 0 – 1.0 RGB array with hexToRGB to define the color values with Hex values
var newStyle = style.setApplyFill(true);
newStyle.setFillColor(hexToRgb("FFFFFF"));
Fill RGB Values
// To return the red (R) value of the Fill Color
text.sourceText.style.fillColor[0];
Note:
To return the value of the Fill Color for R, G, or B of a text layer, add 0, 1, or 2 in brackets, respectively.
Stroke
The following are examples for accessing a Text layer's Stroke, StrokeColor, and Stroke Width:
// To return a Boolean value of whether a layer's text has Stroke applied to it (True or False)
text.sourceText.style.applyStroke;
// To return the value of the Stroke Color of a text layer
// By default, this returns an array of the RGB values on a scale from 0 – 1.0
text.sourceText.style.strokeColor;
// Set the Stroke Color of a text layer with setApplyStroke and setStrokeColor
// setStrokeColor values are defined as an RGB array on a scale between 0 – 1.0
var newStyle = style.setApplyStroke(true);
newStyle.setStrokeColor([1.0, 0.0, 0.0]);
// Set the Stroke Color of a text layer substituting the 0 – 1.0 RGB array with hexToRGB to define the color values with Hex values
var newStyle = style.setApplyStroke(true);
newStyle.setStrokeColor(hexToRgb("FF0000"));
// To return the value of a text layer's Stroke Width as a number
text.sourceText.style.strokeWidth;
Stroke RGB Values
// To return the green (G) value of the Stroke Color
text.sourceText.style.strokeColor[1];
Note:
To return the value of the Stroke Color for R, G, or B of a Text layer, add 0, 1, or 2 in brackets, respectively.
getStyleAt function
Use this get function to return the style value of a particular character at a specific time. index should be a number, the index of the letter or character whose style is needed. atTime should also be a number, the time within the composition to get the style from in case the style is keyframed and changes over time.
text.sourceText.getStyleAt(index, atTime);
Note:
Using text.sourceText.style is the same as using text.sourceText.getStyleAt(0,0).
// Gets the style of the first character at the beginning of the timeline
text.sourceText.getStyleAt(0,0);
Set functions
Additional set functions that can be used individually or in combination with one another to drive styles across layers. Each of these functions are called on the style object of a Source Text property:
// Set the font used to Arial
style.setFont("ArialMT")
// Set the font size to 80
style.setFontSize(80);
// Enable Faux Bold with a Boolean
style.setFauxBold(true)
// Enable Faux Italics with a Boolean
style.setFauxItalics(true)
// Enable All Caps with a Boolean
style.setAllCaps(true)
// Enable Small Caps with a Boolean
style.setSmallCaps(true)
// Set the Tracking as a number
style.setTracking(10);
// Set the Leading as a number
style.setLeading(10);
// Enable Auto Leading with a Boolean
style.setAutoLeading(true);
// Set the Baseline Shift as a number
style.setBaselineShift(10);
// Set the Stroke Width as a number
style.setStrokeWidth(10);
// Set the first line of a text layer to bold and make it larger
text.sourceText.style.setFontSize(100, 0, 30).setFauxBold(true, 0, 30)
// Sets uperscript for characters
text.sourceText.style.setBaselineOption("superscript",1,2).setBaselineOption("superscript", 9, 2)
All of the set functions for text styles can be chained together to easily set multiple attributes without having to declare a new style each time, as in the following example:
Note:
There is no semicolon used until the very last attribute is set. Listing each attribute on its own line helps make the whole chain easier to read.
// Enable Fill, set Fill Color, set Baseline, set Tracking, and enable Auto Leading
text.sourceText.style
.setApplyFill(true)
.setFillColor(hexToRgb("FFFFFF"))
.setBaselineShift(10)
.setTracking(25)
.setAutoLeading(true);
Additional uses for expressions on source text
Adding a Text layer to a composition and adding an expression to its Source Text property can be a great way to examine the property values of other layers. For example, the following expression on a Source Text property reports the name and value of the Opacity property for the next layer in the layer stacking order:
The following example reports the name of the footage item used as the source of the topmost image layer in the stacking order at the current time that has its Video switch set:
// Create sourceFootageName as a blank string
var sourceFootageName = "";
// Loop through all layers in the composition
for (var i = 1; i <= thisComp.numLayers; i++) {
// If i matches this layer's index, continue to next loop
if (i == index) {
continue;
}
// Set myLayer for the current iteration of the loop
var myLayer = thisComp.layer(i);
// If myLayer has no video or isn't active, continue to next loop/layer
if ( !myLayer.hasVideo || !myLayer.active ) {
continue;
}
// If myLayer is active at the current time
if ( myLayer.active ) {
try {
// Set sourceFootageName to myLayer's source name
sourceFootageName = myLayer.source.name;
} catch ( err ) {
// If myLayer has no source,
// set sourceFootageName to the myLayer's name
sourceFootageName = myLayer.name;
}
// Stop looping
break;
}
}
// Display the sourceFootageName
sourceFootageName;
Save expressions as presets
Select the Source Text property with expressions added to it. Then, select Animation > Save Animation Preset to reuse the expressions in other projects. Animation Presets are saved in the Effects & Presets panel.