TextBlock add Monospace property

[matthidinger]

Implementation status

• .NET
• Android
• iOS
• TypeScript
• UWP
• Documentation

Problem

There's no way to display console output, ascii art 😜, etc

Example Comps

Asks

• High-priority Teams team ask

Proposal: Use Markdown

Simply add support for Markdown code blocks?

{
  "type": "TextBlock",
  "text": "```
Error: Missing , on line number 5
```",
  "wrap": true
}

Spec Changes

Markdown support expands to code blocks (but no syntax highlighting)

Host Config

Add monospaceFontFamily to host config...

{
	"choiceSetInputValueSeparator": ",",
	"supportsInteractivity": true,
	"fontFamily": "Segoe UI",
        "monospaceFontFamily": "Consolas"

Renderer Requirements

• A renderer MUST at least understand the ``` markdown syntax and not display the ticks to the user (it'd be acceptable to display the content without monospace font, but that's not ideal)
• A renderer SHOULD display the ``` content within a styled block, using the monospace font
  • If monospaceFontFamily is specified in host config, renderer should use that font family
  • Otherwise, renderer should default to a reasonable font family (like Consolas)

Downlevel Impact

Medium - Users see odd ``` but otherwise not a big deal, they still see the content

Proposal: Use TextStyle

Simply add TextStyle to TextBlock with a monospace option? Related to solution of fonts for text: #1078

{
  "type": "TextBlock",
  "text": "Error: Missing , on line number 5",
  "textStyle": "monospace",
  "wrap": true
}

To achieve a border/background, the author could wrap this in a container with emphasis enabled.

Depending on how we build it, we could also use this to enable inline fonts, similar to the last proposal on inline colors: #1079

Spec Changes

Addition of textStyle property on TextBlock (with values of default and monospace

Host Config

Add monospaceFontFamily to host config...

{
	"choiceSetInputValueSeparator": ",",
	"supportsInteractivity": true,
	"fontFamily": "Segoe UI",
        "monospaceFontFamily": "Consolas"

Renderer Requirements

• A renderer SHOULD understand the textStyle and display the text using the monospace font
  • If monospaceFontFamily is specified in host config, renderer should use that font family
  • Otherwise, renderer should default to a reasonable font family (like Consolas)

Downlevel Impact

None - Users see the content, but it simply isn't monospace (same as today)

[mdtauk]

How would you handle the chosen font?

[matthidinger]

@mdtauk each platform renderer would either choose a default if possible, otherwise (and probably in addition to) we would add a HostConfig option to allow hosts to specify their monospace font of choice

[andrewleader]

Concerns about using markdown (costly to implement, etc), other proposal seems easier. Teams, however, would like to see both options work. Need to flush out proposal more to see which option to go with.

[andrewleader]

Closing in favor of #1078