Launch: Rich Text in Selection API in Beta

Announcements
, ,
1

:rocket: Launch: Rich Text in Selection API in Beta :rocket:

With the launch of Fonts API earlier this year, a common request from developers has been to return font information with the text in Selection API. One of the challenges with returning font information with text is that fonts, colors, weights etc may change for different sections within a given text element. To solve this problem, we’ve now launched rich text support in Selection API.

Selection API now supports returning rich text. A rich text response will include font, color, size and weight information for every section of text, unlike plain text which only returned the text string. This also enables hyperlinks and lists in text.

This enables use cases like translation, spellcheckers, code formatting, or apps that change font while maintaining text size and styling properties. If your app currently enables users to add or edit text, consider extending your app to add rich text support. Note that addNativeElement does not yet support rich text, but we’re working on adding this in the near future.

To learn more, read the guides on reading elements and replacing elements, or read the API reference for rich text formatting.

A reminder that while rich text is in Beta, apps that use it can’t yet be released, but you can get started trying out the new features in preparation for it launching to GA in the near future. We look forward to hearing your feedback about rich text support, and seeing what you build with it!

3 Likes
2

Congrats on the launch @Elena_Kelareva + Canva team :tada:

References:

In regard to the example:

Hello world.

image
image737×497 18.5 KB

The first thought it had was …what happens when there is multiple overlapping formats?

Example: Here I’ve made the text “old” in the word “world” both Bold and Italic.

image
image1122×748 26.1 KB

The docs say

Each object represents a distinctly formatted string of text, also known as a text region .

So I presume the output here would be:

[
  {
    text: "Hello "
  },
  {
    text: "w",
    formatting: {
      fontWeight: "bold"
    }
  },
  {
    text: "orl",
    formatting: {
      fontWeight: "bold",
      fontStyle: "italic"
    }
  },
  {
    text: "d",
    formatting: {
      fontWeight: "bold"
    }
  },
  {
    text: "."
  },
];

Is that correct?

Perhaps the example provided in the docs could cover this type of scenario with a simpler example to make a point about multi-formatted text regions e.g.:

Hello rich text.

image

p.s I think there might also be a typo in the example… ‘,’ expected:

https://www.canva.dev/docs/apps/reading-elements/#rich-text

image
image734×342 3.67 KB

https://www.canva.dev/docs/apps/api/design-selection-register-on-change/
image

image

3

@chris Thanks for the feedback. The plan is to rework the docs for the GA launch of rich text selection, so we’ll definitely be providing more examples and clarity. :smile:

1 Like
4

This is exciting @Elena_Kelareva!

I have two questions:

1- From my understanding this new method will return the rich text parameters, including the font family or name, however we don’t have all the fonts loaded in our app and available to the user. Would we be able to load the font from Canva directly and use it in our app?

2- Same question for the list of recommended fonts that are available now for “create text” end point:

It returns a list of font names, but we don’t have these fonts available in our app

I understand that some of these fonts are proprietary to Canva, but it would be a smooth and seamless user experience if we have the ability to render the same font types available to the user across Canva

5

@Amr_Mashlah - you can match the same font when adding or editing text using Selection API or addNativeElement, since those APIs take fonts as input. There’s no API for direct access to font files at present, though, so if you need to render the same font in an image or AppElement that’s not possible yet.