Overview

Responsive text is an important responsive feature.

You can set text sizes across all breakpoints using Edit > Object style manager> Text format. Sample text displays the changes in different views.

You can also view the dynamic changes in text by moving from one breakpoint to another in Responsive project. You can also edit text dynamically in each breakpoint view.  

Link break for text across views

Captivate maintains a parent-child relationship among the breakpoints from Desktop-to-Tablet views and Tablet-to-Mobile views respectively. The settings you make for a breakpoint exist in all the lower breakpoint views unless you modify the settings for a particular view and break the link.

Note:

This relationship does not flow from Mobile to tablet and from tablet to Desktop.

Illustration to demonstrate how link breaks

For example, let us consider that you created text caption in Desktop view, then in tablet view and then in the mobile view of responsive project. In this case, if you move to Mobile breakpoint view, you can see three text captions available in tihs view. If you click each text caption you can see the text caption border representing the corresponding breakpoint view color. You can see this demonstrated in the figure below: 

Appearance of text across all breakpoints
Appearance of text across all breakpoints

Now, the first text caption has a link connected to Desktop view. The second text caption has a link connected to tablet view. You are able to understand this link based on color coding. Suppose, in mobile view, you modified the text in second text caption (that is, the text created earlier in tablet view as shown in the above figure) then the existing link for this text caption from tablet view is broken and it is considered as a native text caption for mobile view. You can understand this broken link based on the text caption border color for the second text. Now, in this case the second text caption also shows orange color and not the blue color. 

Similarly, if you modify the text in first text caption then also the first text caption link with Desktop view will be broken and it is considered as a native text caption of mobile view. You can see this illustrated in the below figure. 

Change in color coding because link with other breakpoints is broken
Change in color coding because link with other breakpoints is broken

Note:

The above illustration demonstrates how a link breaks with reference to text in each view. The links among text captions across each view may be broken due to various other factors including but not limited to text, position, and position properties. 

Restore link across views

When a link is broken between a mobile and tablet or between a tablet and primary breakpoints, you can restore the link by applying the position, text and text properties across all the views. 

Apply properties to all views

Position properties

Now you can update position properties of objects across all views to match the properties of the currently selected text element. To support applying the object position properties across all the views, right click context menu is included. This setting will re-link objects across the views in responsive projects. 

Suppose you created couple of text captions in primary view but while working on the project, you moved the position of text caption un-intentionally in tablet and mobile views. Later, you realized this change and want to retain the original position that you are using in primary view to be retained in all other views as well. In this case, you can select the text caption in primary view, right-click and click Apply position properties to all views. 

Applying position properties to all views
Applying position properties to all views

Text and text properties

Reset the properties of responsive text elements or update all views to match the properties of the currently selected text element. To support applying the text and text properties across all the views, right click context menu is included. This setting will re-link objects across the views in responsive projects. 

For example, let us consider that you created couple of text captions in primary view but modified the text and text properties (such as character, style, and so on ) in tablet and mobile views. At a later stage, if you want to retain the primary view text and text properties to all the other views, you can do it by right-clicking the text caption in primary view and applying the text and text properties to all views. 

Even if you apply multiple text formats like color or font style to each word, the text retains the format in all responsive project views. Hierarchical ordered and unordered list of items (such as bulleted text) flow across all views. 

If you already set any text properties for each breakpoint in object style manager (OSM), then the OSM settings are retained. Any subsequent change in each breakpoint does not override the OSM settings. 

Auto grow 

Adobe Captivate supports adjusting the text font size to fit the text in the text captions of Primary, Tablet, and Mobile views, along with in-between views. But, if you are still facing text truncation issues, use Auto or %Relative size options for text caption height and the caption will auto grow to accommodate all the text in the caption. 

Color coding 

Text objects in different views of responsive projects can have color coding. We can see different color coding in text area boundaries in properties window. Earlier, it was applicable for only position properties.

In a responsive project, each breakpoint view has a different color. You can see this color at the top of the breakpoint view. For example, the purple color in the below image indicates the Desktop view.

Color indicating the breakpoint view
Color indicating the breakpoint view

Now, the text created in the Desktop view represents the color code of blue around text caption border in properties window. Similarly, the text created in Tablet view represents green and text of Mobile view represents orange color code. 

Text caption color coding
Text caption color coding

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy