From ac4e4515d299170d12cd4784f50194337130bf62 Mon Sep 17 00:00:00 2001 From: Dan Allen Date: Fri, 6 Apr 2018 19:13:24 -0600 Subject: [PATCH] revise inline text styles page - update examples - explain the browser default in each case - explain more clearly what the default styleheet does - add examples --- docs/modules/ROOT/pages/inline-text-styles.adoc | 59 ++++++++++++++++++------- 1 file changed, 43 insertions(+), 16 deletions(-) diff --git a/docs/modules/ROOT/pages/inline-text-styles.adoc b/docs/modules/ROOT/pages/inline-text-styles.adoc index e950ad4..f348701 100644 --- a/docs/modules/ROOT/pages/inline-text-styles.adoc +++ b/docs/modules/ROOT/pages/inline-text-styles.adoc @@ -2,6 +2,7 @@ ifndef::env-site,env-github[] include::_attributes.adoc[] endif::[] +: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. @@ -9,53 +10,79 @@ This list includes elements in the shell (i.e., frame) and in the document conte 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 -How xref:antora:asciidoc:bold.adoc[text marked up as bold] appears on your site depends on the fonts loaded by the UI and any CSS styles it applies to the `` HTML tag. +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 `` HTML tag. [source,html] ---- -

A bold word, and a bold phrase.

+A bold word, or a bold phrase of text. ---- -In the default UI, the `strong` element, specified in [.path]_css/base.css_, uses the 500 weight fonts loaded by the typeface stylesheets. +Since `` 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 `` 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*. -[#italics] +[#italic] == Italic text -How xref:antora:asciidoc:italics.adoc[italicized text] appears on your site depends on the fonts loaded by the UI and any CSS styles it applies to the `` HTML tag. +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 `` HTML tag. [source,html] ---- -

An italic word, and an italic phrase.

+An italic word, or an italic phrase of text. ---- -In the default UI, the italic fonts (`font-style: italic`) loaded by the typeface stylesheets are applied to inline text enclosed in ``. +Since `` 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 -Technical content often requires text to be styled in a way that indicates it is a command or source code. -Such text is usually emphasized using a fixed-width, i.e., monospace, font. -Consequentially, how xref:antora:asciidoc:monospace.adoc[inline monospace text] is displayed depends on the fixed-width font loaded by your UI and any CSS styles it applies to the `` HTML tag. +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 `` HTML tag. [source,html] ---- -

A monospace word, and a monospace phrase.

+A monospace word, or a monospace phrase of text. ---- -In the default UI, the `code` element, specified in [.path]_css/base.css_, uses a fixed-width font which is loaded by a corresponding typeface stylesheet. +Since `` 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 -How xref:antora:asciidoc:highlight.adoc[highlighted text] appears on your site depends on the CSS styles applied to the `` HTML tag. +How xref:antora:asciidoc:highlight.adoc[highlighted (or marked) text] appears on your site depends on the CSS styles the UI applies to the `` HTML tag. [source,html] ---- -

Let’s highlight this phrase.

+Let’s add some highlight to it. ---- -Since `` is a semantic HTML element, it automatically inherits default styling, such as `background-color`, from the browser. -If you want to override the browser styles, you'll need to add the `mark` element and its new properties to the document content stylesheet. +Since `` 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. -- 2.11.0