Pro HTML5 and CSS3 Design Patterns
CHAPTER 10 ■ STYLING TEXT Text Replacement with Image Problem You want to replace text with an image, and you want the text to b ...
CHAPTER 10 ■ STYLING TEXT Text Replacement with Canvas and VML Example shown with text replaced HTML <!doctype html> <h ...
CHAPTER 10 ■ STYLING TEXT Text Replacement with Canvas and VML Problem You want to replace text with canvas and VML.^ Solution T ...
CHAPTER 10 ■ STYLING TEXT Font Embedding Example shown with font rendered HTML <h1>Embedding Font</h1> <h2 id="h2 ...
CHAPTER 10 ■ STYLING TEXT Font Embedding Problem You want the web page to directly download a font file from the server to the u ...
CHAPTER 10 ■ STYLING TEXT Invisible Text HTML <h1>Invisible Text</h1> <p class="invisible-text">Invisible Text ...
CHAPTER 10 ■ STYLING TEXT Invisible Text Problem You want to hide the text in a terminal block element without hiding the elemen ...
CHAPTER 10 ■ STYLING TEXT Screenreader-only HTML <h1>Screenreader-only</h1> <p>Text before screenreader-only t ...
CHAPTER 10 ■ STYLING TEXT Screenreader-only Problem You want text to be read by a screenreader program, and you don’t want sight ...
C H A P T E R 11 Spacing Content This chapter discusses design patterns that put horizontal and vertical space around inline ele ...
CHAPTER 11 ■ SPACING CONTENT Spacing HTML <h1>Spacing</h1> <p>This paragraph is normal. It has no indentation, ...
CHAPTER 11 ■ SPACING CONTENT Spacing Problem You want to control the spacing around content.^ Solution HTML CSS Tag a terminal b ...
CHAPTER 11 ■ SPACING CONTENT Blocked HTML <h1>Blocked</h1> <p>The Blocked design pattern displays an inline el ...
CHAPTER 11 ■ SPACING CONTENT Blocked Problem You want to style text as a block. For example, you want to move an inline element ...
CHAPTER 11 ■ SPACING CONTENT Nowrap HTML <h1>Nowrap</h1> <div> <p>You can keep a phrase together using & ...
CHAPTER 11 ■ SPACING CONTENT Nowrap Problem You want to prevent the browser from wrapping text to a new line. For example, you w ...
CHAPTER 11 ■ SPACING CONTENT Preserved HTML <h1>Preserved</h1> <pre>You can preserve whitespace using <code ...
CHAPTER 11 ■ SPACING CONTENT Preserved Problem You want to selectively preserve whitespace around text and objects that you inse ...
CHAPTER 11 ■ SPACING CONTENT Code HTML <h1>Code</h1> <p>The following code is blocked and preserved: <code ...
CHAPTER 11 ■ SPACING CONTENT Code Problem You want to identify an element as containing code, and you want to control when it pr ...
«
7
8
9
10
11
12
13
14
15
16
»
Free download pdf