background
|
The background property is a shorthand for
defining one or more properties. Refer to each individual background-*
property for potential issues.
Note that background properties are largely unsupported in EPUB 3 at this time
outside of fixed layouts.
|
background-attachment
|
|
background-color
|
- Ensure sufficient contrast with text color
|
background-image
|
- Ensure sufficient contrast with content color (text and graphic)
- High mix of gradients and colors in images can make reading text that
is overlaid difficult
|
background-position
|
|
background-repeat
|
|
|
These border properties are shorthands for
defining one or more properties. Refer to each individual border-* property
for issues |
border-collapse
|
|
|
- An element's border color must never be the sole means of conveying information about
the nature of its content. See the Color info page
|
border-spacing
|
|
|
|
|
- When using color to convey meaning, ensure borders are thick enough that visual
users can discern the color
|
|
- User agent support for absolute and fixed positioning in EPUB is not guaranteed
- Content should not be positioned in a way that makes its discoverability problematic
for users with low vision and/or using zooming software
|
caption-side
|
|
clear
|
|
clip
|
- Although clipping content to 1 pixel is used on the Web to hide content that
is only intended for users of assistive technoloies, support for the practice
in EPUB reading systems remains inconsistent. Expect your hidden content to
be visible in some reading systems.
|
color
|
- See the Color info page for the range of considerations when
coloring text and graphical content
|
content
|
|
|
|
cursor
|
- Avoid changing the cursor such that clickable elements are no longer
distinguishable
|
direction
|
- The
direction property is not supported in EPUB
3. HTML5 markup, such as the bdi and bdo elements and dir
attribute, are used to express directionality
|
display
|
- Setting the
display property to the value none removes the element from rendering both visually and to
assistive technologies. It is not a mechanism for hiding content from visual display
that should be rendered by assistive technologies.
|
empty-cells
|
- Setting the
empty-cells property is not required for
HTML5 tables, as borders are rendered (do not insert placeholder text such as dashes
or non-breaking spaces)
- For forwards compatibility with EPUB 2 user agents, the property should be set to
the value
show to ensure table borders are drawn around
empty cells
|
float
|
- Elements should not be floated in a way that makes their discoverability problematic
for users with low vision and/or using zooming software
- Ensure sufficient margins exist around floated content so that it is clearly
distinguishable from the content that flows around it
- When floating primary content to the right, ensure that it is not positioned in the
markup to accommodate the float (i.e., it occurs at the logical reading point so that
it makes sense in non-visual playback contexts)
|
font
|
The font property is a shorthand for defining
one or more properties. Refer to each individual font-* property for issues |
font-family
|
- Avoid fonts that do not provide sufficient character differentiation, such as
sans-serif fonts that represent capital I, lower-case L and the number 1 as identical
(or near-identical) characters (e.g., Arial).
- Avoid cursive and highly ornamented fonts that can be difficult for users to
decipher
- Try to limit the number of fonts used in any given publication and use families
consistently (e.g., one family for headings and one for body content)
- Give preference to fonts that provide sufficient kerning between characters
|
font-size
|
- Use relative sizes such as percentages and ems to facilitate scaling
- Ensure default font size does not affect legibility of the prose (e.g., avoid
specifying
x-small , xx-small
and equivalent font sizes)
|
font-style
|
- Use CSS to apply italics only for decorative purposes (similar to using the
i element). Use em tags if the words are to be
stressed
- Avoid lengthy use of decorative italics, as italicized words can be harder to read
than roman face
|
font-variant
|
|
font-weight
|
- Use CSS to apply bolding only for decorative purposes. Use
strong
tags if the words are to be stressed or b for keywords
- Avoid lengthy use of decorative bolding, as bolded words can be harder to read than
roman face
|
height
|
- Assistive technologies typically ignore content that has 0 height and/or width set on
its containing element, so do not use this property to hide content that is only
intended for non-visual playback.
|
letter-spacing
|
- The
letter-spacing property can be used to increase the
kerning between letters to improve the readability of tightly constructed fonts
- Whitespace should never be added between the letters of a word that is not intended
to be spelled out. Always use this property to visually expand the spacing between
characters when such spacing is necessary
|
line-height
|
- Use caution when changing line heights. Slight increases in the line height can
improve overall readability, but too much space between lines can have the opposite
effect (e.g., it becomes harder to distinguish paragraphs)
- Avoid shrinking the line height to compress content
|
list-style
|
The list-style property is a shorthand for
defining one or more properties. Refer to each individual list-style-* property for issues
|
list-style-image
|
- Avoid using images to convey the meaning of a list. If the image is important to
comprehension of the items, ensure that a semantic is attached to the list to convey
that meaning. If the list represents a figure or aside, use the appropriate container
element and include a caption
|
list-style-position
|
|
list-style-type
|
- Do not change the nature of a list using the
list-style-type property (e.g., to not use the property to give an
unordered list the appearance of ordering)
|
|
- Changing margins to move content off screen, while common on the Web, is not guaranteed to
work in EPUB user agents. This practice is also known to cause problems depending on
the user's preferred reading direction and the placement of the content
|
|
|
|
|
|
- Outlines surround borders and serve a similar function. The issues with each are the
same. See the corresponding border properties for more information
- Ensure when using both borders and outlines that sufficient contrast is maintained
between them if they both visually convey information.
|
overflow
|
- Avoid using the
hidden value, as content may not be
visible, especially when zoomed
|
|
|
|
|
position
|
- Absolute positioning should not be used to re-order content differently than it is
laid out in the markup
- Elements should not be absolutely positioned in a way that makes their
discoverability problematic for users with low vision and/or using zooming
software
|
quotes
|
|
table-layout
|
|
text-align
|
- Avoid justifying text, as the uneven spacing that occurs between words can reduce the
readability for some people.
|
text-decoration
|
- Use the
del element to semantically mark deleted text
|
text-indent
|
- A technique used to hide text for assistive technologies is to use a large
negative value for the indent, but like negative margins this technique is not
reliable in EPUB user agents and may cause issues depending on the user's
preferred text direction
|
text-transform
|
- Avoid lengthy decorative use of capitalization as it can make words difficult to
distinguish and read
|
unicode-bidi
|
- The
unicode-bidi property is not supported in
EPUB 3. HTML5 markup, such as the bdi and bdo elements and dir
attribute, should be used to express directionality
|
vertical-align
|
|
visibility
|
- Hidden content is not available to assistive technologies, so do not use this
property to hide content from visual rendering that is intended to be read out
|
white-space
|
|
width
|
- Assistive technologies typically ignore content that has 0 width and/or height set on
its containing element, so do not use this property to hide content that is only
intended for non-visual playback.
|
word-spacing
|
- Increasing word spacing can help improve readability of tightly constructed
fonts
- Use this property in preference to adding non-breaking spaces to increase the space
between words
|
z-index
|
|
- azimuth
- cue
- cue-after
- cue-before
- elevation
- pause
- pause-after
- pause-before
- pitch
- pitch-range
- play-during
- richness
- speak
- speak-header
- speak-numeral
- speak-punctuation
- speech-rate
- stress
- voice-family
- volume
|
|