87 lines
3.2 KiB
Plaintext
87 lines
3.2 KiB
Plaintext
= Inline Text Styles
|
|
:navtitle: Inline Text
|
|
:example-caption!:
|
|
|
|
////
|
|
When creating a UI theme for Antora, there are certain elements in the UI that require support from the CSS to work correctly.
|
|
This list includes elements in the shell (i.e., frame) and in the document content.
|
|
This document identifies these UI elements.
|
|
////
|
|
|
|
This page describes how to style text in the contents of the page which is visually emphasized.
|
|
|
|
[#bold]
|
|
== Bold text (<strong>)
|
|
|
|
How xref:antora:asciidoc:bold.adoc[text marked as bold] appears on your site depends on the fonts loaded by the UI and the CSS styles the UI applies to the `<strong>` HTML tag.
|
|
|
|
[source,html]
|
|
----
|
|
A bold <strong>word</strong>, or a bold <strong>phrase of text</strong>.
|
|
----
|
|
|
|
Since `<strong>` is a semantic HTML element, it automatically inherits default styling (`font-weight: bold`) from the browser.
|
|
If you want to override the browser styles, you'll need to define properties on the `strong` selector in the stylesheet for your UI.
|
|
|
|
In the default UI, the `<strong>` element is styled in the 500 font weight of the current typeface (Roboto).
|
|
For example:
|
|
|
|
[example]
|
|
A bold *word*, or a bold *phrase of text*.
|
|
|
|
[#italic]
|
|
== Italic text (<em>)
|
|
|
|
How xref:antora:asciidoc:italic.adoc[italicized text] appears on your site depends on the fonts loaded by the UI and the CSS styles the UI applies to the `<em>` HTML tag.
|
|
|
|
[source,html]
|
|
----
|
|
An italic <em>word</em>, or an italic <em>phrase of text</em>.
|
|
----
|
|
|
|
Since `<em>` is a semantic HTML element, it automatically inherits default styling (`font-style: italic`) from the browser.
|
|
If you want to override the browser styles, you'll need to define properties on the `em` selector in the stylesheet for your UI.
|
|
|
|
In the default UI, the `em` element is styled in the italic font variant of the current typeface (Roboto).
|
|
For example:
|
|
|
|
[example]
|
|
An italic _word_, or an italic _phrase of text_.
|
|
|
|
[#monospace]
|
|
== Monospace text (<code>)
|
|
|
|
How xref:antora:asciidoc:monospace.adoc[inline monospace text] is displayed depends on the fixed-width font loaded by your UI and the CSS styles it applies to the `<code>` HTML tag.
|
|
|
|
[source,html]
|
|
----
|
|
A monospace <code>word</code>, or a monospace <code>phrase of text</code>.
|
|
----
|
|
|
|
Since `<code>` is a semantic HTML element, it automatically inherits default styling (`font-family: monospace`) from the browser.
|
|
If you want to override the browser styles, you'll need to define properties on the `code` selector in the stylesheet for your UI.
|
|
|
|
In the default UI, the `code` element is styled using the fixed-width font loaded by the stylesheet (Roboto Mono).
|
|
For example:
|
|
|
|
[example]
|
|
A monospace `word`, or a monospace `phrase of text`.
|
|
|
|
[#highlight]
|
|
== Highlighted text (<mark>)
|
|
|
|
How xref:antora:asciidoc:highlight.adoc[highlighted (or marked) text] appears on your site depends on the CSS styles the UI applies to the `<mark>` HTML tag.
|
|
|
|
[source,html]
|
|
----
|
|
Let’s add some <mark>highlight</mark> to it.
|
|
----
|
|
|
|
Since `<mark>` is a semantic HTML element, it automatically inherits default styling (`background-color: yellow`) from the browser.
|
|
Here's an example:
|
|
|
|
[example]
|
|
Let's add some #highlight# to it.
|
|
|
|
If you want to override the browser styles, you'll need to define properties on the `mark` selector in the stylesheet for your UI.
|