<!--
SkuJ4oeut - Gentium Plus
r1UI-tYsY - Goldman Sans
rJwT3k32Y - Signika
HJxVSzTxw - Spectral
Bkt6x52YF - HP Simplified Light
Byvzr2yUq - Manuale
SyjFjQBld - Ubuntu
HJYNM_-zq - Cambria
Bkl4C9xOK - Galdeano
-->
{%hackmd Byvzr2yUq %}
<style type="text/css">
ruby {
ruby-position: under;
}
table {
width: 100%;
}
.box {
background: Red;
}
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
text-transform: capitalize !important;
}
.reveal td code {
color: Gold;
font-size: smaller;
}
.reveal .code-wrapper {
background: rgba(204,255,255,.384) !important;
border-radius: 8px;
}
</style>
<!-- .slide: data-background-image="https://images.pexels.com/photos/261857/pexels-photo-261857.jpeg" -->
<https://hackmd.io/@ZjW/H10kIgVVq>
----
# [{Text|文字}](//www.w3.org/TR/html401/struct/text.html)
### {WU|吳} {Zhoujin|宙錦}
----
## Looks familiar, feels different
> Typography is its own visual narrative.
> The style echoes your brand,
> while hierarchy tells the eye where to land.
---
<!-- .slide: data-background-image="https://images.pexels.com/photos/1061142/pexels-photo-1061142.jpeg" -->
----
# [{White Space|空白}](//www.w3.org/TR/html4/struct/text.html#h-9.1)
**Learn More**: [Whitespace character - Wikipedia](//www.wikiwand.com/en/Whitespace_character)
----
- Line breaks (CR, LF, CR/LF pair) are white space characters.
- U+2028; and U+2029; do not constitute line breaks in HTML.
- Conventions for inter-word space (space between words) vary from script to script.
- The `PRE` element is used for preformatted text, where white space is significant.
- Authors should use appropriate **elements** and **styles** to achieve visual formatting effects that involve **white space**, rather than **space characters**.
- Authors should not rely on user agents to render white space immediately after a start tag or immediately before an end tag.
```
<P>We offer free<A> technical support </A>for subscribers.</P>
```
----
| Unicode | Name | HTML Entity | Remark |
| --------------------------------------------- | ------------------------------------- | ------------- | :----: |
| [U+0009](//www.compart.com/en/unicode/U+0009) | horizontal tab (HT, 跳格) | `	` | `\t` |
| [U+000A](//www.compart.com/en/unicode/U+000A) | line feed (LF, 換行) | `
` | `\n` |
| [U+000B](//www.compart.com/en/unicode/U+000B) | vertical tab (VT, 跳行) | | `\v` |
| [U+000C](//www.compart.com/en/unicode/U+000C) | form feed (FF, 換頁) | | `\f` |
| [U+000D](//www.compart.com/en/unicode/U+000D) | carriage return (CR, 移行) | | `\r` |
| [U+0020](//www.compart.com/en/unicode/U+0020) | space (SP, 「看不見的」空格) | | <span class="box"> </span> |
| [U+2423](//www.compart.com/en/unicode/U+2423) | visible blank (「看得見的」空格) | `␣` | ␣ |
| [U+0085](//www.compart.com/en/unicode/U+0085) | next line (NEL, 下一行) | | |
| [U+00A0](//www.compart.com/en/unicode/U+00A0) | non-breaking space (不換行空格) | ` ` | <span class="box"> </span> |
----
| Unicode | Name | HTML Entity | Remark |
| --------------------------------------------- | ------------------------------------- | ----------------------------- | :----: |
| [U+2000](//www.compart.com/en/unicode/U+2000) | en quad == U+2002 | | <span class="box"> </span> |
| [U+2001](//www.compart.com/en/unicode/U+2001) | em quad == U+2003 | | <span class="box"> </span> |
| [U+2002](//www.compart.com/en/unicode/U+2002) | en space (與 n 等寬的空格) | ` ` | <span class="box"> </span> |
| [U+2003](//www.compart.com/en/unicode/U+2003) | em space (與 M 等寬的空格) | ` ` | <span class="box"> </span> |
| [U+2004](//www.compart.com/en/unicode/U+2004) | three-pre-em space (= ⅓ em) | ` ` | <span class="box"> </span> |
| [U+2005](//www.compart.com/en/unicode/U+2005) | four-pre-em space (= ¼ em) | ` ` | <span class="box"> </span> |
| [U+2009](//www.compart.com/en/unicode/U+2009) | thin space (窄空格 = ⅕ em) | ` `<br>` ` | <span class="box"> </span> |
| [U+2006](//www.compart.com/en/unicode/U+2006) | six-pre-em space (= ⅙ em) | | <span class="box"> </span> |
----
| Unicode | Name | HTML Entity | Remark |
| --------------------------------------------- | --------------------------------------------------------------------- | ------------------------------------- | :----: |
| [U+2007](//www.compart.com/en/unicode/U+2007) | figure space (=「等寬字」數字同寬) | ` ` | <span class="box"> </span> |
| [U+2008](//www.compart.com/en/unicode/U+2008) | punctuation space (與最窄的標點符號同寬) | ` ` | <span class="box"> </span> |
| [U+200A](//www.compart.com/en/unicode/U+200A) | hair space (髮絲空格 = 比 U+2006 更窄的空格) | ` `<br>` ` | <span class="box"> </span> |
| [U+200B](//www.compart.com/en/unicode/U+200B) | zero width space (寬度為零的空格) | `​` | <span class="box">​</span> |
| [U+205F](//www.compart.com/en/unicode/U+205F) | [medium mathematical space] (數學空格 = 4 mu = 4⁄18 em) | ` ` | <span class="box"> </span> |
| [U+3000](//www.compart.com/en/unicode/U+3000) | ideographic space (與 CJK 字體等寬的空格) | | <span class="box">　</span> |
[medium mathematical space]: //www.overleaf.com/learn/latex/Spacing_in_math_mode
----
## {Ligature|連字}
<!-- .element: style="background:white; width:38.2%; border-radius:55px; margin:0 auto;" -->
**Learn More**: [Ligature (writing) - Wikipedia](//www.wikiwand.com/en/Ligature_(writing))
----
| Unicode | Name | HTML Entity | Remark |
| --------------------------------------------- | --------------------------------------------- | ------------- | :----: |
| [U+200C](//www.compart.com/en/unicode/U+200C) | zero width non-joiner (零寬非連接字元) | `‌` | |
| [U+200D](//www.compart.com/en/unicode/U+200D) | zero width joiner (零寬連接字元) | `‍` | |
| [U+2060](//www.compart.com/en/unicode/U+2060) | word joiner (用防止出現自動換行的連接字元) | `⁠` | |
| [U+2028](//www.compart.com/en/unicode/U+2028) | line separator (行分格) | | |
| [U+2029](//www.compart.com/en/unicode/U+2029) | paragraph separator (段落分格) | | |
| [U+202F](//www.compart.com/en/unicode/U+202F) | narrow no-break space (窄的不換行空格) | | |
| [U+FEFF](//www.compart.com/en/unicode/U+FEFF) | zero-width no-breaking space (零寬不換行空格) | `&zwnbsp;` | |
:bulb: U+FEFF 被挪用做 byte order mark (BOM) 後，其原有功能就建議以 U+2060 來替代。
---
<!-- .slide: data-background-image="https://images.pexels.com/photos/1061141/pexels-photo-1061141.jpeg" -->
----
# [{Structured Text|結構化文字}](//www.w3.org/TR/html4/struct/text.html#h-9.2)
----
> A **structured document** is an electronic document where some method of _markup_ is used to identify the whole and parts of the document as having various meanings beyond their formatting.
> --- [Structured document - Wikipedia](//www.wikiwand.com/en/Structured_document)
**See Also**: _[Difference between Structured, Semi-structured and Unstructured data](//www.geeksforgeeks.org/difference-between-structured-semi-structured-and-unstructured-data)_
----
## [{Phrase|詞語}](//www.w3.org/TR/html401/struct/text.html#h-9.2.1)
```dtd=
<!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >
<!ELEMENT (%fontstyle;|%phrase;) - - (%inline;)*>
<!ATTLIST (%fontstyle;|%phrase;)
%attrs; -- %coreattrs, %i18n, %events --
>
```
----
- `EM`: Represents stress emphasis of its contents.
- `STRONG`: Represents strong importance, seriousness, or urgency for its contents.
- `CITE`: Represents the title of a work.
A person's name is not the title of a work. In some cases, the `B` element might be appropriate for names.
- `DFN`: Represents the defining instance of a term.
----
- `VAR`: Represents a variable
- `CODE`: Represents a fragment of computer code.
- `SAMP`: Represents sample output from programs, scripts, etc.
- `KBD`: Represents user input.
- `ABBR`: Represents an abbreviation or acronym, optionally with its expansion.
- `ACRONYM`: [Use `ABBR` instead.](//html.spec.whatwg.org/#non-conforming-features)
----
## [{Quotations|引用}](//www.w3.org/TR/html401/struct/text.html#h-9.2.2)
```dtd=
<!ELEMENT BLOCKQUOTE - - (%block;|SCRIPT)+ -- long quotation -->
<!ATTLIST BLOCKQUOTE
%attrs; -- %coreattrs, %i18n, %events --
cite %URI; #IMPLIED -- URI for source document or msg --
>
<!ELEMENT Q - - (%inline;)* -- short inline quotation -->
<!ATTLIST Q
%attrs; -- %coreattrs, %i18n, %events --
cite %URI; #IMPLIED -- URI for source document or msg --
>
```
**Learn More**: [Quotation mark - Wikipedia](//www.wikiwand.com/en/Quotation_mark) and [Quotation Marks](//unicode-table.com/en/sets/quotation-marks)
----
| Unicode | Name | HTML Entity | Remark |
| --------------------------------------------- | --------------------------- | --------------------------------------------- | :----: |
| [U+0022](//www.compart.com/en/unicode/U+0022) | quotation mark | `"` | " |
| [U+0027](//www.compart.com/en/unicode/U+0027) | apostrophe | `'` | ' |
| [U+2018](//www.compart.com/en/unicode/U+2018) | left single quotation mark | `‘`<br>`‘` | ‘ |
| [U+2019](//www.compart.com/en/unicode/U+2019) | right single quotation mark | `’`<br>`’` | ’ |
| [U+201C](//www.compart.com/en/unicode/U+201C) | left double quotation mark | `“`<br>`“` | “ |
| [U+201D](//www.compart.com/en/unicode/U+201D) | right double quotation mark | `”`<br>`”` | ” |
----
| Unicode | Name | HTML Entity | Remark |
| --------------------------------------------- | ------------------------------------------ | ----------- | :----: |
| [U+FF02](//www.compart.com/en/unicode/U+FF02) | fullwidth quotation mark | | ＂ |
| [U+00AB](//www.compart.com/en/unicode/U+00AB) | left-pointing double angle quotation mark | `«` | « |
| [U+00BB](//www.compart.com/en/unicode/U+00BB) | right-pointing double angle quotation mark | `»` | » |
| [U+2039](//www.compart.com/en/unicode/U+2039) | single left-pointing angle quotation mark | `‹` | ‹ |
| [U+203A](//www.compart.com/en/unicode/U+203A) | single right-pointing angle quotation mark | `›` | › |
----
| Unicode | Name | HTML Entity | Remark |
| --------------------------------------------- | --------------------- | ------------- | :----: |
| [U+2032](//www.compart.com/en/unicode/U+2032) | prime | `′` | ′ |
| [U+2033](//www.compart.com/en/unicode/U+2033) | double prime | `″` | ″ |
| [U+2034](//www.compart.com/en/unicode/U+2034) | triple prime | `‴` | ‴ |
| [U+2057](//www.compart.com/en/unicode/U+2057) | quadruple prime | `⁗` | ⁗ |
| [U+2035](//www.compart.com/en/unicode/U+2035) | reversed prime | `‵` | ‵ |
| [U+2036](//www.compart.com/en/unicode/U+2036) | reversed double prime | | ‶ |
| [U+2037](//www.compart.com/en/unicode/U+2037) | reversed triple prime | | ‷ |
----
| Unicode | Name | HTML Entity | Remark |
| --------------------------------------------- | ------------------------------------- | ------------- | :----: |
| [U+201A](//www.compart.com/en/unicode/U+201A) | single low-9 quotation mark | `‚` | ‚ |
| [U+201B](//www.compart.com/en/unicode/U+201B) | single high-reversed-9 quotation mark | | ‛ |
| [U+201E](//www.compart.com/en/unicode/U+201E) | double low-9 quotation mark | `„` | „ |
| [U+201F](//www.compart.com/en/unicode/U+201F) | double high-reversed-9 quotation mark | | ‟ |
| [U+2E42](//www.compart.com/en/unicode/U+2E42) | double low-reversed-9 quotation mark | | ⹂ |
| [U+301D](//www.compart.com/en/unicode/U+301D) | reversed double prime quotation mark | | 〝 |
| [U+301E](//www.compart.com/en/unicode/U+301E) | double prime quotation mark | | 〞 |
| [U+301F](//www.compart.com/en/unicode/U+301F) | low double prime quotation mark | | 〟 |
----
### Rendering quotations
- Authors should not put quotation marks at the beginning and end of the content of a `Q` element.
- User agents should not insert quotation marks in the `BLOCKQUOTE` element's default style.
- The usage of `BLOCKQUOTE` to indent text is deprecated in favor of style sheets.
**Learn More**: [CSS2: Quotation marks](//drafts.csswg.org/css2/#quotes)
----
- Many languages adopt different quotation styles for outer and inner (nested) quotations, which should be respected by user-agents.
```html=
John said, <Q lang="en-us">I saw Lucy at lunch, she told me
<Q lang="en-us">Mary wants you
to get some ice cream on your way home.</Q> I think I will get
some at Ben and Jerry's, on Gloucester Road.</Q>
```
turns into:
```
John said, "I saw Lucy at lunch, she told me 'Mary wants you
to get some ice cream on your way home.' I think I will get some
at Ben and Jerry's, on Gloucester Road."
```
----
## [{Subscripts|下標} {and|與} {Superscripts|上標}](//www.w3.org/TR/html401/struct/text.html#h-9.2.3)
```dtd=
<!ELEMENT (SUB|SUP) - - (%inline;)* -- subscript, superscript -->
<!ATTLIST (SUB|SUP)
%attrs; -- %coreattrs, %i18n, %events --
>
```
**Note:** Use [MathML](//www.w3.org/TR/MathML3/) instead if represent a mathematical expression.
---
<!-- .slide: data-background-image="https://images.pexels.com/photos/1061140/pexels-photo-1061140.jpeg" -->
----
# [{Lines|行} {and|與} {Paragraphs|段落}](//www.w3.org/TR/html4/struct/text.html#h-9.3)
----
## [{Paragraphs|段落}](//www.w3.org/TR/html401/struct/text.html#h-9.3.1)
```dtd=
<!ELEMENT P - O (%inline;)* -- paragraph -->
<!ATTLIST P
%attrs; -- %coreattrs, %i18n, %events --
>
```
- The `P` element cannot contain block-level elements.
- The `align` attribute is deprecated.
----
- Treatment of white space
- Line breaking and word wrapping
- Justification
- Hyphenation
- Written language conventions and text directionality
- Formatting of paragraphs with respect to surrounding content
- Paragraph alignment and floating objects
----
## [{Line Break|斷行}](//www.w3.org/TR/html401/struct/text.html#h-9.3.2)
```dtd=
<!ELEMENT BR - O EMPTY -- forced line break -->
<!ATTLIST BR
%coreattrs; -- id, class, style, title --
>
```
- All line breaks constitute white space.
- The `clear` attribute is deprecated.
- The ` ` entity acts as a space where user agents should not cause a line break.
----
## [{Hyphenation|連字號}](//www.w3.org/TR/html401/struct/text.html#h-9.3.3)
**Learn More**: [Hyphen - Wikipedia](//www.wikiwand.com/en/Hyphen)
----
| Unicode | Name | HTML Entity | Remark |
| --------------------------------------------- | --------------------------------------------- | ---------------------------- | :----: |
| [U+002D](//www.compart.com/en/unicode/U+002D) | hyphen-minus (連字暨減號) | | - |
| [U+2212](//www.compart.com/en/unicode/U+2212) | minus sign (負號) | `−` | − |
| [U+2013](//www.compart.com/en/unicode/U+2013) | en dash (與 n 等寬的連字號, 可以用 to 來取代) | `–` | -- |
| [U+2014](//www.compart.com/en/unicode/U+2014) | em dash (與 m 等寬的連字號, 用於改調/轉變) | `—` | --- |
| [U+2010](//www.compart.com/en/unicode/U+2010) | hyphen (連字號) | `‐`<br>`‐` | hy‐phen |
| [U+00AD](//www.compart.com/en/unicode/U+00AD) | soft hyphen (軟連字號) | `­` | hy­phen |
| [U+2011](//www.compart.com/en/unicode/U+2011) | non-breaking hyphen (不換行連字號) | | non‑breaking |
| [U+2015](//www.compart.com/en/unicode/U+2015) | horizontal bar (水平線) | | ― |
----
### Rendering soft hyphen
| w/o soft hyphen | with soft hyphen |
| --------------- | ---------------- |
| Parturient cras elementum facilisis. Gravida consequat cras varius conubia non vitae phasellus aenean aptent, interdum velit sagittis id mollis ullamcorper imperdiet euismod felis. Quisque erat fusce pretium volutpat. Nascetur felis orci quis. Facilisis iaculis interdum auctor, quisque vestibulum Pretium nisl ante viverra ipsum sem. Molestie mollis phasellus fames. | Par­turi­ent cras el­e­men­tum fa­cil­i­sis. Gravi­da con­se­quat cras var­ius conu­bia non vi­tae phasel­lus ae­nean aptent, in­ter­dum velit sagit­tis id mol­lis ul­lam­cor­p­er im­perdi­et eu­is­mod fe­lis. Quisque er­at fusce pretium vo­lut­pat. Nasce­tur fe­lis or­ci quis. Fa­cil­i­sis ia­c­ulis in­ter­dum auc­tor, quisque vestibu­lum Pretium nisl ante viver­ra ip­sum sem. Mo­lestie mol­lis phasel­lus fames.<!-- .element: style="vertical-align: top;" --> |
<!-- .element: style="table-layout:fixed;" -->
**Tool**: [Fast online hyphenation](//www.hyphenation24.com)
**Learn More**: [_The T<span style="text-transform:uppercase; margin-left:-.1667em; line-height:0; vertical-align:-.5ex; margin-right:-.125em">e</span>Xbook_, Appendix H. Hyphenation](//archive.org/details/B-001-002-139/page/n458/mode/1up)<!--
Convert from \TeX logo: \def\TeX{T\kern-.1667em \lower.5ex\hbox{E}\kern-.125em X}
-->
----
| Unicode | Name | HTML Entity | Remark |
| --------------------------------------------- | ------------------------------------------------------------- | ------------- | :----: |
| [U+2027](//www.compart.com/en/unicode/U+2027) | hyphenation point (姓名連字點) | | ‧ |
| [U+2043](//www.compart.com/en/unicode/U+2043) | hyphen bullet (條列連字點) | `•` | • |
| [U+2E1A](//www.compart.com/en/unicode/U+2E1A) | hyphen with diaeresis (連字號上面帶分音符) | | ⸚ |
| [U+2E40](//www.compart.com/en/unicode/U+2E40) | double hyphen (雙連字號) | | ⹀ |
| [U+FE63](//www.compart.com/en/unicode/U+FE63) | small hyphen-minus (小連字號) | | ﹣ |
| [U+FF0D](//www.compart.com/en/unicode/U+FF0D) | fullwidth hyphen-minus (全形連字暨減號) | | － |
| [U+FF65](//www.compart.com/en/unicode/U+FF65) | halfwidth Katakana middle dot (半型片假名中間點) | | ･ |
| [U+30A0](//www.compart.com/en/unicode/U+30A0) | Katakana-Hiragana double hyphen (片假名–平假名雙連字號) | | ゠ |
| [U+30FB](//www.compart.com/en/unicode/U+30FB) | Katakana middle dot (全型片假名中間點) | | ・ |
----
## [{Preformatted|格式化} {Text|文字}](//www.w3.org/TR/html401/struct/text.html#h-9.3.4)
```dtd=
<!ENTITY % pre.exclusion "IMG | OBJECT | BIG | SMALL | SUB | SUP">
<!ELEMENT PRE - - (%inline;)* -(%pre.exclusion;) -- preformatted text -->
<!ATTLIST PRE
%attrs; -- %coreattrs, %i18n, %events --
>
```
----
- [SGML](//xml.coverpages.org/sgmlsyn/sgmlsyn.htm#C7.6 "section 7.6.1") specifies that a line break immediately following a start tag must be ignored, as must a line break immediately before an end tag.
```html=
<p>
Sophi is watching you guys.
</p>
```
is identical to
```html=
<p>Sophi is watching you guys.</p>
```
----
```html=
<pre>
$ <code>ls -lR ~</code>
<samp>...</samp>
<kbd>Ctrl</kbd><kbd>C</kbd>
$
</pre>
```
----
## [Visual rendering of paragraphs](//www.w3.org/TR/html401/struct/text.html#h-9.3.5)
This section is an informative description of the behavior of some current visual user agents when formatting paragraphs. Style sheets allow better control of paragraph formatting.
---
<!-- .slide: data-background-image="https://images.pexels.com/photos/1061139/pexels-photo-1061139.jpeg" -->
----
# [{Marking document changes|文件異動標註}](//www.w3.org/TR/html4/struct/text.html#h-9.4)
----
## [The `INS` and `DEL` elements](//www.w3.org/TR/html401/struct/text.html#h-9.4)
```dtd=
<!-- INS/DEL are handled by inclusion on BODY -->
<!ELEMENT (INS|DEL) - - (%flow;)* -- inserted text, deleted text -->
<!ATTLIST (INS|DEL)
%attrs; -- %coreattrs, %i18n, %events --
cite %URI; #IMPLIED -- info on reason for change --
datetime %Datetime; #IMPLIED -- date and time of change --
>
```
- `cite`: URI that designates a source document or message
- `datetime`: the value of this attribute specifies the date and time when the change was made
----
- These two elements are unusual for HTML in that they may serve as either block-level or inline elements (but not both).
- These two elements must not contain block-level content when these elements behave as inline elements.
```html=
<P>
<INS><DIV>...block-level content...</DIV></INS>
</P>
```
- Except `cite` from external source document, authors may also make comments about inserted or deleted text by means of the `title` attribute for these two elements.
---
<!-- .slide: data-background-image="https://images.pexels.com/photos/1061138/pexels-photo-1061138.jpeg" -->
----
> Knowledge is of two kinds.
> We know a subject ourselves, or
> we know where we can find information upon it.
> --- _[Samuel Johnson]_
<!-- .element: style="background: rgba(204, 204, 204, .382);" -->
[Samuel Johnson]: //www.wikiwand.com/en/Samuel_Johnson "山繆‧強生（1709/09/18–1784/12/13），常稱為「Dr. Johnson」，英國歷史上最有名的文人之一，集評論家、詩人、散文家、傳記家於一身。"
----
## Web Developer Networks
- [MDN (Mozilla Developer Network) Web Docs](//developer.mozilla.org)
[W3Schools Online Web Tutorials](//www.w3schools.com)
- [HTML CSS JavaScript](//html-css-js.com): Free Online Editor and Tools
[CodePen](//codepen.io): Online Code Editor and Front End Web Developer Community
- [HTML Color Names](//htmlcolorcodes.com/color-names)
- [Adobe Color Wheel](//color.adobe.com/zh/create/color-wheel)
[Coolors](//coolors.co/generate): Create a Palette
[Color Hunt](//colorhunt.co): Color Palettes for Designers and Artists
----
## Unicode
- [Character Entity Reference Chart](//dev.w3.org/html5/html-author/charref)
- [Unicode Names List Charts](//www.unicode.org/charts/nameslist)
[Unicode Character Table](//unicode-table.com/en)
<!-- [HTML Symbols, Entities, Characters and Codes](//www.toptal.com/designers/htmlarrows)-->
- [The W3C Internationalization (I18n)](//www.w3.org/International)
[Internationalization techniques: Authoring HTML & CSS](//www.w3.org/International/techniques/authoring-html)
[Using character escapes in markup and CSS](//www.w3.org/International/questions/qa-escapes#question)
----
## T<span style="text-transform:uppercase; margin-left:-.1667em; line-height:0; vertical-align:-.5ex; margin-right:-.125em">e</span>X & Math
- [UnicodeIt](//www.unicodeit.net): Converts L<span style="font-size:.7em; text-transform:uppercase; margin-left:-.36em; line-height:0; vertical-align:.5ex; margin-right:-.15em">a</span>T<span style="text-transform:uppercase; margin-left:-.1667em; line-height:0; vertical-align:-.5ex; margin-right:-.125em">e</span>X tags to Unicode<!--
Learn more at <https://tex.stackexchange.com/questions/313527/what-do-the-commands-inside-the-latex-logo-do>
-->
[latex-to-unicode](//github.com/ypsu/latex-to-unicode/wiki)
[Unicode Fraction Creator](//lights0123.com/fractions)
- [MathJax](//www.mathjax.org)
[K<span style="font-size:.7em; text-transform:uppercase; margin-left:-.17em; line-height:0; vertical-align:.5ex; margin-right:-.15em">a</span>T<span style="text-transform:uppercase; margin-left:-.1667em; line-height:0; vertical-align:-.5ex; margin-right:-.125em">e</span>X](//katex.org)
- [W3C Math Home](//www.w3.org/Math)
[A MathML for CSS Profile](//www.w3.org/TR/mathml-for-css)
---
# Backup Slides
----
[What is the difference between the content models "(#PCDATA)" and "CDATA"?](//xml.coverpages.org/rcdataCTS1.html)
actually, they both allow data characters, with a minor twist:
- PCDATA (parsed character data) actually means that if the characters cannot be interpreted as markup, they are valid in that context as data characters.
- CDATA means that characters in that element are declared to be data characters and is only terminated by an end-tag open in context (a `</` followed by `(`, `>`, or a letter; or `/` if the start-tag was "net-enabling".) this may change as the FEATURES clause in the SGML declaration changes.
----
```dtd=
<!ENTITY % coreattrs
"id ID #IMPLIED -- document-wide unique id --
class CDATA #IMPLIED -- space-separated list of classes --
style %StyleSheet; #IMPLIED -- associated style info --
title %Text; #IMPLIED -- advisory title --"
>
<!ENTITY % i18n
"lang %LanguageCode; #IMPLIED -- language code --
dir (ltr|rtl) #IMPLIED -- direction for weak/neutral text --"
>
```
----
```dtd=
<!ENTITY % attrs "%coreattrs; %i18n; %events;">
<!ENTITY % fontstyle "TT | I | B | BIG | SMALL">
<!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">
<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ELEMENT (%fontstyle;|%phrase;) - - (%inline;)*>
<!ATTLIST (%fontstyle;|%phrase;)
%attrs; -- %coreattrs, %i18n, %events --
>
```
<!--
1;/<style\>/+,/<\/style>/- !csstidy - --silent=true --sort_properties=true --compress_colors=false
1;/<style\>/+,/<\/style>/- s/^\s*\([^:{} ]\+\)\s*:\s*\([^;{}]\+\);$/\=printf("%21s:\t%s;", submatch(1), submatch(2))/
1;/^<!--/,$ s/^---$/&-/
%s/^----\n\+\(<!--\)/---\r\r\1/
via: https://www.w3.org/TR/html401/struct/text.html
vim: ft=markdown ic noet wrap sw=4 sts=4:
-->
{"metaMigratedAt":"2023-06-16T23:05:56.352Z","metaMigratedFrom":"YAML","title":"Chapter 9 Text, HTML 4.01 Specification","breaks":true,"slideOptions":"{\"width\":\"88.665%\",\"theme\":\"black\",\"transition\":\"convex\",\"parallaxBackgroundImage\":\"https://i.imgur.com/8N7BoGt.png\",\"parallaxBackgroundSize\":\"1200px 1200px\",\"parallaxBackgroundHorizontal\":120,\"parallaxBackgroundVertical\":120,\"allottedMinutes\":30,\"spotlight\":{\"enabled\":false}}","description":"https://hackmd.io/@ZjW/H10kIgVVq","contributors":"[{\"id\":\"6aad0bcf-5790-4639-80e5-e8fa91d97801\",\"add\":209399,\"del\":182890}]"}