Component Mode
With a screen reader, Ceros currently reads out text character-by-character (or line-by-line, if you have accelerated text rendering turned on). Component Mode will allow the browser and screen reader to read entire text boxes more fluidly.
Component Mode is a huge step forward in our efforts to improve the accessibility of the Ceros platform. Text in Ceros will now be truly readable by screen readers with Component Mode, which is a requirement of accessibility audits.
As such, Component Mode has a number of additional key benefits:
- Improves experience load times because there is significantly less HTML to render, and less data to load so pages load faster
- Improves SEO by allowing crawlers to read whole sentences of text rather than character-by-character or line-by-line.
- Supports Accessibility (as a requirement) by allowing Screen Readers to read whole blocks of text rather than character-by-character or line-by-line.
Additionally, anyone who has experienced jumbled text while using Adaptive Layouts will be delighted to learn that Component Mode resolves this issue.
How It Works
Component Mode is located in the Studio, under Settings > Experience Performance > Text Rendering Mode. You will now see these three options under text rendering mode:
- Component (Recommended) NEW!
- Line (Formally Accelerated Text Mode)
- Character
Notes
- For new experiences, the text rendering mode will default to Component Mode.
- Old experiences remain in the mode they were originally set to.
- To change the text rendering mode on existing experiences to component mode- Go to Experience Settings > Experience Performance > under Text Rendering Mode- Select Component Mode
- You must republish existing experiences after switching text rendering modes
- When switching text rendering modes on existing experiences, this can sometimes affect the layout. Most text components won’t require any changes but it might be possible that a text component would need to be resized slightly to achieve the same layout
Experience Data Variables in SDK
We have updated the SDK to read off Ceroscontext. In particular:
- cerosContext.appSlug
- cerosContext.issue.projectId
- cerosContext.issue.id
- cerosContext.issue.lastPublishedDate
- cerosContext.previewMode
- cerosContext.issue.firstPublishedDate
- cerosContext.issue.creationDate
- cerosContext.issue.lastModifiedDate
The SDK Developer portal can be found here.
We have made this change to provide a more stable way for customers to interact with these variables without the risk that we might change them. This will also allow for additional customers to access this data through their own SDK implementation.
How It Works
CerosContext is an object that contains context values related to the Ceros ecosystem. Names of the current context variables are stored in the CerosSDK.CONTEXT structure:
CONTEXT: {
appSlug
issue.projectId
issue.id
issue.lastPublishedDate
previewMode
issue.firstPublishedDate
issue.creationDate
issue.lastModifiedDate
}
The SDK provides a method to enumerate the names of all the available context variables CerosSDK.enumerateContextVariables and a method to retrieve a specific context value by name CerosSDK.getContextValue although the usage is slightly different between embedded and standalone versions.
Retrieving a context value in standalone mode
When using the Standalone SDK, the context values are returned synchronously through a call to CerosSDK.getContextValue
var appSlug = CerosSDK.getContextValue("appSlug");
var lastModifiedDate = CerosSDK.getContextValue("issue.lastModifiedDate");
Retrieving a context value in embedded mode
In embedded mode, the context is not available in the hosting page, thus it will need to be retrieved from an embedded Ceros experience using a callback. Additional parameters are required when calling CerosSDK.getContextValue
var appSlug;
CerosSDK.getContextValue(myExperience, "appSlug", function(data) {
// `data` is an object that contains the following fields
// {variableName: "appSlug", variableValue: <appSlugValue>}
appSlug = data.variableValue;
});
var lastModifiedDate;
CerosSDK.getContextValue(myExperience, "issue.lastModifiedDate", function(data) {
lastModifiedDate = data.variableValue;
});
Hyperlinked Text
Users now have the ability to hyperlink text within a text box to allow the viewer to scroll to a destination in the same experience, jump to a new page, or external URL.
Hyperlinked text was previously achieved using hotspots which proved unintuitive and complicated for some users. We also observed some instances where text positions would render incorrectly on some browsers when trying to link text in this old method. The hyperlinks feature not only improves the usability of the Ceros Studio, but also improves the accessibility of Ceros content by allowing hyperlinked text to be identified by screen readers.
How It Works:
- In the Studio, Select the text to hyperlink
- Right-click your selection and click Create Link
- Choose your Link Type: Go to URL, Go to Page, or Scroll to Position
- Enter the URL, Select the Page, or Select Anchor
- To edit or remove the hyperlink, double click on the hyperlinked text in the text box, and select the action you would like to achieve.
Note: The style will default to the standard hyperlink format (blue underlined text). You have the ability to change the style of the text as you please.
Accessibility
With hyperlinked text, these inline links are now discoverable by screen readers and can be navigated to using accessibility keyboard navigation shortcuts.
Resize from Center
Users now have the ability to resize objects to scale from center, which will keep maintain the original center point of the object. This improvement eliminates the need to realign the scaled asset.
Previously, users only had the option to resize images from the side, where dragging an edge would alter one single side. While resizing images while holding shift will still function the same way, users will now have the ability to also resize from the center of an object.
Why
This is a small feature improvement that will make a large impact in helping designers become more efficient in the Ceros platform.
How It Works
- To Scale from the Center while keeping the aspect ratio:
- Select the object(s) you would like to resize
- On Mac: Hold option
- On PC: Hold Alt
- Drag object from the corner to resize image
Copy/Paste External Content
Studio Users can now copy and paste visual assets from an external source into Ceros using Keyboard shortcuts.
Why
We’ve made it faster and more convenient for Studio Users to add assets from another platform or location to a Ceros canvas with Copy/Paste. We are excited to add this capability to make the design process more efficient for Ceros Users.
Copy/Paste is supported with: Desktop, Browser, Photoshop*, Adobe XD, Adobe Illustrator, Invision, Sketch, Keynote, and PDF.
How It Works
- On PC: Press Ctrl + C to copy an asset and Ctrl + V to paste it.
- On Mac: Press Command + C to copy an asset and Command + V to paste it.
*Please Note: When copying assets from Photoshop, users must use a keyboard shortcut to ensure the asset is selected prior to Copy/Paste.
- On PC: Press Ctrl + A to select the asset, Ctrl + C to copy, and Ctrl + V to paste.
- On Mac: Press Command + A to select the asset, Command + C to copy, and Command + V to paste.
There are some limitations and your mileage may vary depending on the location of the external asset.
Previewer URL Change
What
The URL for Previewer has changed to a new scheme. When using the Preview, Users will now see their Preview URLs read out as “account-name.preview.ceros.com”. No functionality has changed with the Live Preview. Existing Preview URLs will simply re-direct to the new URL.
Why
Ceros is dedicated to ensuring that our customer’s content is secure and private. This is a proactive change creating a secure foundation for future improvements to our Admin permissions systems.