Inline text runs

[andrewleader]

Release	Renderer status	Tasks status
1.2	✔️ .NET (#2378) ✔️ Android (#2380) ✔️ iOS (#2379) ✔️ TS (#2422) ✔️ UWP (#2377)	✔️ Shared (#2376) ✔️ Designer (#2527)

Solves requests

• Inline text colors (Request: Inline text colors #1932)
• Inline actions (Request: Inline actions within text #1990)
• Inline highlighting (Request: Inline text highlighting #1934)
• Inline strikethrough on text (Request: Inline strikethrough on text #2694)

Summary

Introduce something similar to XAML's RichTextBlock, where you provide an array of runs, allowing you to do inline rich text formatting.

Schema

New element, RichTextBlock

Property	Type	Required	Description
type	string	Yes	Must be "RichTextBlock"
inlines	IInlineRun[]	Yes	The inline runs to display. Required. The type is IInlineRun since we'll have future things like ImageRuns that need to be added here.
id	string	No, default: null	A unique identifier associated with the element
spacing	string	No, default: default	Controls the amount of spacing between this element and the preceding element.
separator	boolean	No, default: false	When true, draw a separating line at the top of the element.

New inline element, TextRun (implements IInlineRun).

Property	Type	Required	Description
type	string	Yes	Must be "TextRun"
text	string	Yes	The text to display. Does NOT support markdown.
selectAction	IAction	Action to invoke when this text run is clicked. Visually changes the text run into a hyperlink. Action.ShowCard is NOT supported.
color	string	No, default: default	Controls the color of the text. Defaults to default.
isSubtle	boolean	No, default: false	If true, displays text slightly toned down to appear less prominent.
size	string	No, default: default	Controls the size of the text.
weight	string	No, default: default	Controls the weight of the text.
italic	boolean	No, default: false	If true, displays the text using italic font.
strikethrough	boolean	No, default: false	If true, displays the text with strikethrough.
highlight	boolean	No, default: false	If true, displays the text highlighted.
fontFamily	string	No, default: default	Controls the font family. Values are default and monospace

Example

{
	"type": "RichTextBlock",
	"inlines": [

		// Color and inline action
		{
			"type": "TextRun",
			"text": "The Huffington Post",
			"color": "good",
			"selectAction": {
				"type": "Action.Submit"
				…
			},
			"italic": true, // Italic support
			"strikethrough": true // Strikethrough support
		},

		// If only need text, no need to specify the whole object
		"5/23/2016",

		// Inline highlighitng
		{
			"type": "TextRun",
			"text": "This is highlighted",
			"highlight": true
		}
	]
}

Host Config

Container foregroundColor values have a new property, highlightColors.

{
  "supportsInteractivity": true,
  "containerStyles": {
    "default": {
      "foregroundColors": {
        "default": {
          "default": "#FF333333",
          "subtle": "#EE333333",
          "highlightColors": {
            "default": "#FF006400",
            "subtle": "#FF006400"
          }
        },
        "accent": {
          "default": "#FF2E89FC",
          "subtle": "#882E89FC",
          "highlightColors": {
            "default": "#FF006400",
            "subtle": "#FF006400"
          }
        },
        "attention": {
          "default": "#FFCC3300",
          "subtle": "#DDCC3300",
          "highlightColors": {
            "default": "#FF006400",
            "subtle": "#FF006400"
          }
        },
				...
      }
    },
    "emphasis": {
      "backgroundColor": "#08000000",
      "foregroundColors": {
        "default": {
          "default": "#FF333333",
          "subtle": "#EE333333",
          "highlightColors": {
            "default": "#FF006400",
            "subtle": "#FF006400"
          }
        },
        "accent": {
          "default": "#FF2E89FC",
          "subtle": "#882E89FC",
          "highlightColors": {
            "default": "#FF006400",
            "subtle": "#FF006400"
          }
        },
        "attention": {
          "default": "#FFCC3300",
          "subtle": "#DDCC3300",
          "highlightColors": {
            "default": "#FF006400",
            "subtle": "#FF006400"
          }
        },
				...
      }
    },
    "accent": {
			...
    },
    "attention": {
			...
    },
    "good": {
			...
    },
    "warning": {
			...
    }
  },
	...
}

Down-level impact

High. Content is completely dropped due to unknown element.

Host burden

Medium if we support highlighting (since they need to choose highlighting colors for every color and emphasis combination).

Auto-generated task status

• Shared
• Designer
• .NET
• Android
• iOS
• TS
• UWP

[dclaux]

I like the proposal overall, but I am not sure we need to introduce TextRun, ImageRun, etc. Why not use the existing elements types, and reject elements we don't want to support as inlines (like ColumnSet for instance)?

[andrewleader]

Good thoughts. There would be some properties that wouldn't make sense (like TextBlock.Wrap), but it might be worth sharing types. Or, TextBlock could inherit from TextRun.

[andrewleader]

Proposal approved: We should keep inheritance separate such that TextRun is not an AdaptiveElement. Otherwise, it should have pretty much all the properties of TextBlock except ones like wrap (which is meaningless within a run).

We'll have to see whether adding ImageRun is a priority for 1.2, we could start with just TextRun potentially. Otherwise, for images, have to determine a sizing model that works well for them, since the images should potentially be somewhat relative to the line height?

[andrewleader]

Added italic support

[andrewleader]

Updated the spec...

1. To address the length concerns, we’re simplifying the payload
   a. Removing the concept of paragraphs, so it’s just a set of inlines
   b. Syntax sugar for auto-converting a text string into a basic TextRun
2. For the wrap/maxLines
   a. Remove those properties
3. For the markdown inside runs
   a. Don’t support markdown
4. For being able to use italics within runs (since no markdown)
   a. add an “italic” property to TextRun
5. For strikethrough support
   a. Add a "strikethrough" property to TextRun

Future 1.3 features

1. For fallback support/extensibility (which markdown doesn’t support)
   a. We’ll add that in 1.3 for text runs (too costly to add now)

[andrewleader]

Spec changes today (David, Matt, Paul, Shalini, Becky, Andrew, Alberto, and Bill were on the call)...

1. Removed the baseContainerStyle from host config
   a. Decided that tooling should be introduced to simplify authoring the host config rather than building that functionality into the host config itself (David, Paul, and Matt were in favor of tooling, Andrew was in favor of improving the host config)
2. Moved the highlightColors property from being a peer to foregroundColors to being contained within foregroundColors.[color], since this is a bit easier to understand rather than having the colors disconnected from each other
3. highlightColor host config values will ALWAYS be an object... no fancy syntax sugar for accepting a string and auto-creating the default/subtle values out of it (our tooling will help simplify authoring all of this).

Future 1.3 features

1. Allowing specifying default values of size, color, etc on the RichTextBlock so they don't have to redundantly be specified on the inlines themselves

[shalinijoshi19]

This is completed.