HTML

Inherits from Xamarin.Forms.ContentView

This view allows you to render HTML on the page. HTML rendering is limited on mobile applications and not as performant as it could be. Therefore, it is recommended you limit your HTML usage. You don't need to avoid it, just try not to render a few dozen paragraphs of text and expect it to be snappy.

Supported Tags

A limited subset of HTML tags is supported. Any non-supported tags will be rendered as their plain text contents (meaning, the HTML tags are stripped).

• h1 - h6

• div

• p

• br
• span

• strong

• b

• em

• i

• code

• pre

• ol

• ul

• li

Keep in mind that bold and italic are not natively supported by custom fonts added to the shell during the App Factory publishing process. Although other weights can be added, they are uploaded and referenced as separate font family files. Sometimes the shell will attempt to bold the font automatically, but more often than not these styles won't work.

Example

Because you are defining your HTML content in an XML file, you cannot simply do something like Text="{{ Item.Html }}" and expect it to work. You will need to escape the HTML text, or you can use the CDATA trick as shown below. There's also a XamlWrap filter in Lava that works too.

<Rock:Html>
    <![CDATA[
    <p>This is some sample text.</p>
    <p>This is a second paragraph.</p>
    ]]>
</Rock:Html>

Properties

Property	Type	Description
Text	string	The text content that contains the HTML.
Lava	bool	If true then the Text will be processed for any Lava before final rendering happens. Defaults to false.
FollowHyperlinks	bool	If true then any hyperlinks will be decorated with an underline and made tappable. When tapped they will open using the internal browser and must be absolute URLs. Defaults to false.

When enabling FollowHyperlinks, the text will be tappable on iOS, however there is a bug in Xamarin Forms that prevents the text from being styled appropriately. We are keeping an eye on this and hoping to resolve it in a future shell version.

Styling

You can perform limited styling of rendered HTML content. This only operates at a block level and only with internal classes that are applied. Meaning you cannot specify your own CSS class in the HTML, nor can you target a specific inline element via CSS (such as a span tag).

• Paragraphs are rendered with the paragraph class applied.

• DIV tags are rendered with the text class applied.

• PRE tags are rendered with the paragraph class applied and are overridden to use a specific monospace font.

• Images are rendered with the image class applied.

• Ordered and Unordered lists are rendered in a container view. The container has either the ordered-list or unordered-list class applied. Individual list items are rendered with both the text and list-item classes applied.

Generally speaking, styling should be limited to simple things like margins and possibly colors or font choices. The actual control elements that are used to render the HTML may change in future versions so you should not attempt to apply any element-specific styles unless you are okay with them breaking in the future.