maruku 0.6.1 → 0.7.0.beta1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (263) hide show
  1. checksums.yaml +7 -0
  2. checksums.yaml.gz.sig +0 -0
  3. data.tar.gz.sig +0 -0
  4. data/MIT-LICENSE.txt +20 -0
  5. data/bin/maruku +153 -152
  6. data/bin/marutex +2 -29
  7. data/data/entities.xml +261 -0
  8. data/docs/math.md +14 -18
  9. data/lib/maruku.rb +65 -77
  10. data/lib/maruku/attributes.rb +109 -214
  11. data/lib/maruku/defaults.rb +45 -67
  12. data/lib/maruku/document.rb +43 -0
  13. data/lib/maruku/element.rb +112 -0
  14. data/lib/maruku/errors.rb +71 -0
  15. data/lib/maruku/ext/div.rb +105 -113
  16. data/lib/maruku/ext/fenced_code.rb +97 -0
  17. data/lib/maruku/ext/math.rb +22 -26
  18. data/lib/maruku/ext/math/elements.rb +20 -26
  19. data/lib/maruku/ext/math/mathml_engines/blahtex.rb +92 -104
  20. data/lib/maruku/ext/math/mathml_engines/itex2mml.rb +33 -26
  21. data/lib/maruku/ext/math/mathml_engines/none.rb +11 -19
  22. data/lib/maruku/ext/math/mathml_engines/ritex.rb +2 -4
  23. data/lib/maruku/ext/math/parsing.rb +107 -113
  24. data/lib/maruku/ext/math/to_html.rb +184 -187
  25. data/lib/maruku/ext/math/to_latex.rb +30 -21
  26. data/lib/maruku/helpers.rb +158 -257
  27. data/lib/maruku/html.rb +254 -0
  28. data/lib/maruku/input/charsource.rb +272 -319
  29. data/lib/maruku/input/extensions.rb +62 -63
  30. data/lib/maruku/input/html_helper.rb +220 -189
  31. data/lib/maruku/input/linesource.rb +90 -110
  32. data/lib/maruku/input/mdline.rb +129 -0
  33. data/lib/maruku/input/parse_block.rb +618 -612
  34. data/lib/maruku/input/parse_doc.rb +145 -215
  35. data/lib/maruku/input/parse_span.rb +658 -0
  36. data/lib/maruku/input/rubypants.rb +200 -128
  37. data/lib/maruku/inspect_element.rb +60 -0
  38. data/lib/maruku/maruku.rb +10 -31
  39. data/lib/maruku/output/entity_table.rb +33 -0
  40. data/lib/maruku/output/s5/fancy.rb +462 -462
  41. data/lib/maruku/output/s5/to_s5.rb +115 -135
  42. data/lib/maruku/output/to_html.rb +898 -983
  43. data/lib/maruku/output/to_latex.rb +561 -560
  44. data/lib/maruku/output/to_markdown.rb +207 -162
  45. data/lib/maruku/output/to_s.rb +11 -52
  46. data/lib/maruku/string_utils.rb +129 -179
  47. data/lib/maruku/toc.rb +185 -196
  48. data/lib/maruku/version.rb +33 -38
  49. data/spec/block_docs/abbrev.md +776 -0
  50. data/{tests/unittest → spec/block_docs}/abbreviations.md +11 -20
  51. data/{tests/unittest → spec/block_docs}/alt.md +2 -14
  52. data/{tests/unittest/pending → spec/block_docs}/amps.md +1 -13
  53. data/{tests/unittest → spec/block_docs}/attributes/att2.md +0 -12
  54. data/{tests/unittest → spec/block_docs}/attributes/att3.md +2 -14
  55. data/{tests/unittest → spec/block_docs}/attributes/attributes.md +12 -16
  56. data/{tests/unittest → spec/block_docs}/attributes/circular.md +0 -12
  57. data/{tests/unittest → spec/block_docs}/attributes/default.md +1 -13
  58. data/{tests/unittest → spec/block_docs}/blank.md +0 -12
  59. data/{tests/unittest → spec/block_docs}/blanks_in_code.md +16 -15
  60. data/{tests/unittest/loss.md → spec/block_docs/bug_def.md} +6 -18
  61. data/{tests/unittest → spec/block_docs}/bug_table.md +3 -15
  62. data/{tests/unittest → spec/block_docs}/code.md +7 -14
  63. data/{tests/unittest → spec/block_docs}/code2.md +4 -14
  64. data/{tests/unittest → spec/block_docs}/code3.md +12 -16
  65. data/{tests/unittest → spec/block_docs}/data_loss.md +2 -14
  66. data/{tests/unittest → spec/block_docs}/divs/div1.md +0 -12
  67. data/{tests/unittest → spec/block_docs}/divs/div2.md +0 -12
  68. data/{tests/unittest → spec/block_docs}/divs/div3_nest.md +3 -15
  69. data/{tests/unittest → spec/block_docs}/easy.md +1 -13
  70. data/spec/block_docs/email.md +29 -0
  71. data/{tests/unittest/pending → spec/block_docs}/empty_cells.md +3 -15
  72. data/{tests/unittest → spec/block_docs}/encoding/iso-8859-1.md +1 -14
  73. data/{tests/unittest → spec/block_docs}/encoding/utf-8.md +0 -12
  74. data/{tests/unittest → spec/block_docs}/entities.md +27 -29
  75. data/{tests/unittest/notyet → spec/block_docs}/escape.md +2 -14
  76. data/{tests/unittest → spec/block_docs}/escaping.md +11 -22
  77. data/{tests/unittest → spec/block_docs}/extra_dl.md +2 -13
  78. data/{tests/unittest → spec/block_docs}/extra_header_id.md +14 -20
  79. data/{tests/unittest → spec/block_docs}/extra_table1.md +3 -15
  80. data/spec/block_docs/fenced_code_blocks.md +66 -0
  81. data/spec/block_docs/fenced_code_blocks_highlighted.md +18 -0
  82. data/{tests/unittest → spec/block_docs}/footnotes.md +12 -24
  83. data/spec/block_docs/footnotes2.md +78 -0
  84. data/spec/block_docs/hard.md +25 -0
  85. data/spec/block_docs/header_after_par.md +62 -0
  86. data/{tests/unittest → spec/block_docs}/headers.md +10 -18
  87. data/{tests/unittest → spec/block_docs}/hex_entities.md +7 -18
  88. data/{tests/unittest → spec/block_docs}/hrule.md +5 -12
  89. data/{tests/unittest → spec/block_docs}/html3.md +1 -13
  90. data/{tests/unittest → spec/block_docs}/html4.md +2 -14
  91. data/{tests/unittest → spec/block_docs}/html5.md +2 -14
  92. data/spec/block_docs/html_block_in_para.md +22 -0
  93. data/spec/block_docs/html_inline.md +25 -0
  94. data/spec/block_docs/html_trailing.md +31 -0
  95. data/spec/block_docs/ie.md +62 -0
  96. data/spec/block_docs/iframe.md +29 -0
  97. data/{tests/unittest → spec/block_docs}/images.md +22 -28
  98. data/{tests/unittest → spec/block_docs}/images2.md +7 -17
  99. data/{tests/unittest → spec/block_docs}/inline_html.md +37 -67
  100. data/{tests/unittest → spec/block_docs}/inline_html2.md +1 -13
  101. data/spec/block_docs/inline_html_beginning.md +10 -0
  102. data/spec/block_docs/issue20.md +9 -0
  103. data/spec/block_docs/issue26.md +22 -0
  104. data/spec/block_docs/issue29.md +9 -0
  105. data/spec/block_docs/issue30.md +30 -0
  106. data/spec/block_docs/issue31.md +25 -0
  107. data/spec/block_docs/issue40.md +40 -0
  108. data/spec/block_docs/issue64.md +55 -0
  109. data/spec/block_docs/issue67.md +19 -0
  110. data/spec/block_docs/issue70.md +11 -0
  111. data/spec/block_docs/issue72.md +17 -0
  112. data/spec/block_docs/issue74.md +38 -0
  113. data/spec/block_docs/issue79.md +15 -0
  114. data/spec/block_docs/issue83.md +13 -0
  115. data/spec/block_docs/issue85.md +25 -0
  116. data/spec/block_docs/issue88.md +19 -0
  117. data/spec/block_docs/issue89.md +12 -0
  118. data/spec/block_docs/issue90.md +38 -0
  119. data/{tests/unittest/pending → spec/block_docs}/link.md +21 -18
  120. data/{tests/unittest → spec/block_docs}/links.md +33 -32
  121. data/spec/block_docs/links2.md +21 -0
  122. data/{tests/unittest → spec/block_docs}/list1.md +0 -12
  123. data/{tests/unittest → spec/block_docs}/list12.md +2 -14
  124. data/{tests/unittest → spec/block_docs}/list2.md +2 -14
  125. data/spec/block_docs/list_multipara.md +42 -0
  126. data/{tests/unittest → spec/block_docs}/lists.md +28 -29
  127. data/{tests/unittest → spec/block_docs}/lists10.md +2 -14
  128. data/spec/block_docs/lists11.md +23 -0
  129. data/spec/block_docs/lists12.md +43 -0
  130. data/spec/block_docs/lists13.md +55 -0
  131. data/spec/block_docs/lists14.md +61 -0
  132. data/spec/block_docs/lists15.md +36 -0
  133. data/spec/block_docs/lists6.md +88 -0
  134. data/spec/block_docs/lists7b.md +58 -0
  135. data/spec/block_docs/lists9.md +53 -0
  136. data/{tests/unittest → spec/block_docs}/lists_after_paragraph.md +19 -25
  137. data/spec/block_docs/lists_blank.md +35 -0
  138. data/{tests/unittest/list3.md → spec/block_docs/lists_blockquote_code.md} +2 -14
  139. data/{tests/unittest/list4.md → spec/block_docs/lists_need_blank_line.md} +50 -21
  140. data/spec/block_docs/lists_nested.md +44 -0
  141. data/spec/block_docs/lists_nested_blankline.md +28 -0
  142. data/spec/block_docs/lists_nested_deep.md +43 -0
  143. data/{tests/unittest → spec/block_docs}/lists_ol.md +37 -54
  144. data/spec/block_docs/lists_paraindent.md +47 -0
  145. data/spec/block_docs/lists_tab.md +54 -0
  146. data/spec/block_docs/loss.md +17 -0
  147. data/spec/block_docs/math-blahtex/equations.md +30 -0
  148. data/spec/block_docs/math-blahtex/inline.md +48 -0
  149. data/spec/block_docs/math-blahtex/math2.md +45 -0
  150. data/spec/block_docs/math-blahtex/table.md +25 -0
  151. data/spec/block_docs/math/embedded_invalid_svg.md +79 -0
  152. data/spec/block_docs/math/embedded_svg.md +97 -0
  153. data/spec/block_docs/math/equations.md +44 -0
  154. data/{tests/unittest → spec/block_docs}/math/inline.md +7 -19
  155. data/spec/block_docs/math/math2.md +45 -0
  156. data/{tests/unittest → spec/block_docs}/math/notmath.md +0 -12
  157. data/spec/block_docs/math/raw_mathml.md +87 -0
  158. data/spec/block_docs/math/table.md +25 -0
  159. data/{tests/unittest → spec/block_docs}/math/table2.md +5 -17
  160. data/{tests/unittest → spec/block_docs}/misc_sw.md +181 -118
  161. data/{tests/unittest → spec/block_docs}/olist.md +6 -18
  162. data/{tests/unittest → spec/block_docs}/one.md +0 -12
  163. data/{tests/unittest → spec/block_docs}/paragraph.md +0 -12
  164. data/{tests/unittest → spec/block_docs}/paragraph_rules/dont_merge_ref.md +4 -12
  165. data/{tests/unittest → spec/block_docs}/paragraph_rules/tab_is_blank.md +0 -12
  166. data/{tests/unittest → spec/block_docs}/paragraphs.md +1 -13
  167. data/{tests/unittest → spec/block_docs}/recover/recover_links.md +4 -16
  168. data/{tests/unittest/pending/ref.md → spec/block_docs/ref_with_period.md} +7 -16
  169. data/spec/block_docs/ref_with_title.md +22 -0
  170. data/{tests/unittest → spec/block_docs}/references/long_example.md +16 -23
  171. data/{tests/unittest → spec/block_docs}/references/spaces_and_numbers.md +0 -12
  172. data/{tests/unittest → spec/block_docs}/smartypants.md +24 -31
  173. data/{tests/unittest → spec/block_docs}/syntax_hl.md +13 -17
  174. data/{tests/unittest → spec/block_docs}/table_attributes.md +2 -14
  175. data/spec/block_docs/tables.md +58 -0
  176. data/{tests/unittest → spec/block_docs}/test.md +1 -13
  177. data/{tests/unittest/notyet → spec/block_docs}/ticks.md +1 -13
  178. data/spec/block_docs/toc.md +87 -0
  179. data/{tests/unittest/notyet → spec/block_docs}/triggering.md +14 -25
  180. data/{tests/unittest → spec/block_docs}/underscore_in_words.md +0 -12
  181. data/{tests/unittest → spec/block_docs}/wrapping.md +4 -16
  182. data/spec/block_docs/xml.md +33 -0
  183. data/{tests/unittest → spec/block_docs}/xml2.md +0 -12
  184. data/spec/block_docs/xml3.md +24 -0
  185. data/{tests/unittest → spec/block_docs}/xml_instruction.md +9 -20
  186. data/spec/block_spec.rb +110 -0
  187. data/spec/cli_spec.rb +8 -0
  188. data/spec/span_spec.rb +256 -0
  189. data/spec/spec_helper.rb +2 -0
  190. data/spec/to_html_utf8_spec.rb +13 -0
  191. metadata +205 -243
  192. metadata.gz.sig +3 -0
  193. data/Rakefile +0 -48
  194. data/bin/marudown +0 -29
  195. data/bin/marutest +0 -345
  196. data/docs/changelog.md +0 -334
  197. data/lib/maruku/errors_management.rb +0 -92
  198. data/lib/maruku/ext/math/latex_fix.rb +0 -12
  199. data/lib/maruku/input/parse_span_better.rb +0 -746
  200. data/lib/maruku/input/type_detection.rb +0 -147
  201. data/lib/maruku/output/to_latex_entities.rb +0 -367
  202. data/lib/maruku/output/to_latex_strings.rb +0 -64
  203. data/lib/maruku/structures.rb +0 -167
  204. data/lib/maruku/structures_inspect.rb +0 -87
  205. data/lib/maruku/structures_iterators.rb +0 -61
  206. data/lib/maruku/tests/benchmark.rb +0 -82
  207. data/lib/maruku/tests/new_parser.rb +0 -373
  208. data/lib/maruku/tests/tests.rb +0 -136
  209. data/lib/maruku/usage/example1.rb +0 -33
  210. data/tests/bugs/code_in_links.md +0 -101
  211. data/tests/bugs/complex_escaping.md +0 -38
  212. data/tests/math/syntax.md +0 -46
  213. data/tests/math_usage/document.md +0 -13
  214. data/tests/others/abbreviations.md +0 -11
  215. data/tests/others/blank.md +0 -4
  216. data/tests/others/code.md +0 -5
  217. data/tests/others/code2.md +0 -8
  218. data/tests/others/code3.md +0 -16
  219. data/tests/others/email.md +0 -4
  220. data/tests/others/entities.md +0 -19
  221. data/tests/others/escaping.md +0 -16
  222. data/tests/others/extra_dl.md +0 -101
  223. data/tests/others/extra_header_id.md +0 -13
  224. data/tests/others/extra_table1.md +0 -40
  225. data/tests/others/footnotes.md +0 -17
  226. data/tests/others/headers.md +0 -10
  227. data/tests/others/hrule.md +0 -10
  228. data/tests/others/images.md +0 -20
  229. data/tests/others/inline_html.md +0 -42
  230. data/tests/others/links.md +0 -38
  231. data/tests/others/list1.md +0 -4
  232. data/tests/others/list2.md +0 -5
  233. data/tests/others/list3.md +0 -8
  234. data/tests/others/lists.md +0 -32
  235. data/tests/others/lists_after_paragraph.md +0 -44
  236. data/tests/others/lists_ol.md +0 -39
  237. data/tests/others/misc_sw.md +0 -105
  238. data/tests/others/one.md +0 -1
  239. data/tests/others/paragraphs.md +0 -13
  240. data/tests/others/sss06.md +0 -352
  241. data/tests/others/test.md +0 -4
  242. data/tests/s5/s5profiling.md +0 -48
  243. data/tests/unittest/bug_def.md +0 -28
  244. data/tests/unittest/email.md +0 -32
  245. data/tests/unittest/html2.md +0 -34
  246. data/tests/unittest/ie.md +0 -61
  247. data/tests/unittest/links2.md +0 -34
  248. data/tests/unittest/lists11.md +0 -28
  249. data/tests/unittest/lists6.md +0 -53
  250. data/tests/unittest/lists9.md +0 -76
  251. data/tests/unittest/math/equations.md +0 -86
  252. data/tests/unittest/math/math2.md +0 -57
  253. data/tests/unittest/math/table.md +0 -37
  254. data/tests/unittest/notyet/header_after_par.md +0 -70
  255. data/tests/unittest/red_tests/abbrev.md +0 -1388
  256. data/tests/unittest/red_tests/lists7.md +0 -68
  257. data/tests/unittest/red_tests/lists7b.md +0 -128
  258. data/tests/unittest/red_tests/lists8.md +0 -76
  259. data/tests/unittest/red_tests/xml.md +0 -70
  260. data/tests/unittest/xml3.md +0 -38
  261. data/tests/utf8-files/simple.md +0 -1
  262. data/unit_test_block.sh +0 -5
  263. data/unit_test_span.sh +0 -3
@@ -1,70 +0,0 @@
1
- Write a comment abouth the test here.
2
- *** Parameters: ***
3
- {:title=>"header"}
4
- *** Markdown input: ***
5
- Paragraph
6
- ### header ###
7
-
8
- Paragraph
9
- header
10
- ------
11
-
12
- Paragraph
13
- header
14
- ======
15
-
16
- *** Output of inspect ***
17
- md_el(:document,[
18
- md_par(["Paragraph"]),
19
- md_el(:header,["header"],{:level=>3},[]),
20
- md_par(["Paragraph"]),
21
- md_el(:header,["header"],{:level=>2},[]),
22
- md_par(["Paragraph"]),
23
- md_el(:header,["header"],{:level=>1},[])
24
- ],{},[])
25
- *** Output of to_html ***
26
- <p>Paragraph</p>
27
-
28
- <h3 id='header'>header</h3>
29
-
30
- <p>Paragraph</p>
31
-
32
- <h2 id='header'>header</h2>
33
-
34
- <p>Paragraph</p>
35
-
36
- <h1 id='header'>header</h1>
37
- *** Output of to_latex ***
38
- Paragraph
39
-
40
- \hypertarget{header}{}\subsubsection*{{header}}\label{header}
41
-
42
- Paragraph
43
-
44
- \hypertarget{header}{}\subsection*{{header}}\label{header}
45
-
46
- Paragraph
47
-
48
- \hypertarget{header}{}\section*{{header}}\label{header}
49
- *** Output of to_md ***
50
- Paragraph
51
-
52
- headerParagraph
53
-
54
- headerParagraph
55
-
56
- header
57
- *** Output of to_s ***
58
- ParagraphheaderParagraphheaderParagraphheader
59
- *** EOF ***
60
-
61
-
62
-
63
- OK!
64
-
65
-
66
-
67
- *** Output of Markdown.pl ***
68
- (not used anymore)
69
- *** Output of Markdown.pl (parsed) ***
70
- (not used anymore)
@@ -1,1388 +0,0 @@
1
- Write a comment here
2
- *** Parameters: ***
3
- {} # params
4
- *** Markdown input: ***
5
-
6
- WebKit (Safari 3.1) and the CSS @font-face declaration
7
- ======================================================
8
-
9
- I'm a big fan of typography in general. If you check out [my homepage](http://elliottcable.name) or my [contact elliottcable](http://elliottcable.name/contact.xhtml) page, and you're using Safari/WebKit or Opera/Kestrel, you'll notice the typefaces (fonts, as colloquialized) are *very* non-standard. (As of this writing, I'm using [Museo][] and [Diavlo][][^jos] heavily on both.)
10
-
11
- The internet has not be a friendly place for typohiles like myself, up to this point, at least. One might even say it was a frightful, mentally scarring environment for those akin to yours truly. We've been restricted to reading page after page after page on day after day after day for year after year after year abominations of markup and design enslaved by the horrible overlords we know as Lucida, Verdana, Arial, Helvetica, Geneva, Georgia, Courier, and... dare I invoke ye, thou my terrible overlord? Times New Roman.
12
-
13
- Wherefore art thou, my glorious Archer? And thee as well, my beautiful Garamond? The technical restrictions of that horrible monster we know as the Web Browser hath forced us all too long to use those most banal, those most common, and those most abused, out of all of the typefaces of the world.
14
-
15
- All hyperbole aside, I'm extremely happy to see the advent of a standard `@font-face` declaration in CSS. Internet Explorer first implemented a crutched, basic version of this way back in version 4, but nothing ever really came of it - their decision to create the proprietary .EOT[^eot] format to appease overly restrictive type foundries' worries about intellectual property (aka. the cold, hard dominatrix that we know only as Ms. Profit) truly and completely killed that initial attempt at bringing astute typography and it's advocates to the web. This new run at `@font-face` by an established, trusted, and open group (the [W3C][] itself, responsible for helping to make much of what we use as designers on the web standard and cross-system compatible) has a much better chance, in my humble opinion - and I am quite looking forward to the consequences if it succeeds.
16
-
17
- Now, onwards to the topic of my post as declared in the header (yes, I know, a slow start - but it's an interesting topic with an interesting history!). WebKit, the open source rendering engine behind the wonderfulness that is Safari, and how it handles the 'new' `@font-face` declaration. No, it's not really 'new', but yes, it feels like it is.
18
-
19
- To put it simply, and to be very blunt, it's broken.
20
-
21
- The [CSS spec section][spec] for `@font-face` is very specific - typefaces are to be selected based on a wide array of criteria placed in the `@font-face` declaration block itself. Various textual CSS attributes may be defined within the `@font-face` declaration, and then they will be checked when the typeface is referred to later in the CSS. For instance, if I have two `@font-face` declarations for the Diavlo family - one for regular text, and one for a heavier weighted version of the typeface - then I later utilize Diavlo in a `font-family:` attribute, it should refer to the basic Diavlo font defined in the first `@font-face`. However, if I were to do the same, but also specify a heavy `font-weight:`, then it should use the heavier version of Diavlo. To place this example in code:
22
-
23
- @font-face {
24
- font-family: 'Diavlo';
25
- src: url(./Diavlo/Diavlo_Book.otf) format("opentype");
26
- }
27
-
28
- @font-face {
29
- font-family: 'Diavlo';
30
- font-weight: 900;
31
- src: url(./Diavlo/Diavlo_Black.otf) format("opentype");
32
- }
33
-
34
- h1, h2, h3, h4, h5, h6 {
35
- font-family: 'Diavlo';
36
- font-weight: 900;
37
- }
38
-
39
- div#content {
40
- font-family: 'Diavlo';
41
- }
42
-
43
- As you can see, my headings should use the typeface defined in `Diavlo_Black.otf`, while my body content should use `Diavlo_Book.otf`. However, in WebKit, this doesn't work - it completely ignores any attribute except `font-family:` and `src:` in a `@font-face` declaration! Completely ignores them! Not only that - not *only* that - it disregards all but the last `@font-face` for a given `font-family:` attribute string!
44
-
45
- The implication here is that, to make `@font-face` work as it is currently implemented in WebKit (and thus, Safari 3.1), I have to declare *completely imaginary, non-existent type families* to satisfy WebKit alone. Here's the method I have used in the places I current implement `@font-face`:
46
-
47
- @font-face {
48
- font-family: 'Diavlo Book';
49
- src: url(./Diavlo/Diavlo_Book.otf) format("opentype");
50
- }
51
-
52
- @font-face {
53
- font-family: 'Diavlo Black';
54
- src: url(./Diavlo/Diavlo_Black.otf) format("opentype");
55
- }
56
-
57
- h1, h2, h3, h4, h5, h6 {
58
- font-family: 'Diavlo Black';
59
- }
60
-
61
- div#content {
62
- font-family: 'Diavlo Book';
63
- }
64
-
65
- Isn't it horrible? Seriously, my eyes, they bleed. There's lots of problems with this far beyond the lack of semanticity when it comes to the typeface names... let me see how many ways this breaks the purpose of `@font-face`:
66
-
67
- - You remove a large element our control over the display of the page.
68
-
69
- As soon as we begin to use `@font-face` in our page, we can no longer make any use of any other textual control attribute - `font-weight:`, `font-style:`, and `font-variant:` are no longer available to us, because they no longer correctly map to technical typeface variant/features.
70
-
71
- Also, many default elements are destroyed, unusable, without 'fixing' - for instance, `<b>` would have no effect in a page styled for WebKit as above; We would have to specify something like `b {font-family: 'Diavlo Black';}` - how broken is that? Unless we caught all such default elements and re-styled them to use the bastardized names instead of the correct attributes, lots of basic HTML formatting would be broken. I myself may never use in-document formatting (separation of design and content!), but what about comments forms? Forum posts? Direct HTML-literal quotes?
72
-
73
- If we want to use Javascript to modify the display of the content, we can't simply adjust the mentioned textual control attributes - we have to know and change the entire `font-family:` array of strings.
74
-
75
- - You make us very wet.
76
-
77
- And by wet, I mean 'not DRY'. What if we decide to change one of the bastardized font names? Or use a different font entirely? We have to go through all of our CSS, all of our Javascript, and make sure we update every occurrence of the typeface's bastardized name.
78
-
79
- - You remove our user's user choice, and waste bandwidth.
80
-
81
- Since the names refer to families that don't, in fact, exist, the browser can't override the declaration with a user's installed version of the typeface. This means that, regardless of whether the user already has the typeface installed on their own computer, the browser won't use that - it doesn't know to use 'Diavlo', which the user has installed, because it was told to use 'Diavlo Black', which no user in the entire world has installed on their computer.
82
-
83
- This whole thing is rather worrying - I've heard Opera has `@font-face` support, though I haven't had time to test this myself, so I don't know if it actually does - or, for that matter, if it does it 'correctly', or has the same problems as WebKit. But either way, WebKit is one of the first two implementations to ever attempt to support `@font-face` (Microsoft's unrelated `@font-face` declaration notwithstanding) - I really don't want to see it's early mistakes carried on to FireFox in a few years, and then Internet Explorer a few decades after that. That will leave us stuck with this broken system forever, as it has been demonstrated time and time again that if nobody else supports an old standard correctly, a newcomer to the standard will not do it correctly either. I for one would really, really, hate that.
84
-
85
- In summary... come on, WebKit team, this isn't like you - you're always the ones with the closest-to-standard implementation, and the cleanest code, and... hell, overall? Webkit is the most secure/fastest browser available. But this is making me lose my faith in you, guys, please get it right. You're pioneering a leap into the future when it comes to the Web - this is as important, or _more_ important, than Mosiac's allowing of images was.
86
-
87
- To put it succinctly - don't fuck this up, y'all.
88
-
89
- [Museo]: <http://www.josbuivenga.demon.nl/museo.html> (Jos Buivenga's Museo free typeface)
90
- [Diavlo]: <http://www.josbuivenga.demon.nl/diavlo.html> (Jos Buivenga's free Diavlo typeface)
91
- [^jos]: These are fonts by [Jos Buivenga][jos], quite the amazing person. His (free) fonts are, uniquely, released for use on the web in `@font-face` declarations - unlike the vast majority of other (even free to download) typefaces, which have ridiculously restricting licenses and terms of use statements. Props, Jos - you're a pioneer, and deserve recognition as such.
92
- *[CSS]: Cascading Style Sheets
93
- *[.EOT]: Embedded OpenType
94
- [^eot]: To give Microsoft a little credit, something I rarely do... Yes, I'm aware Microsoft submitted EOT to the W3C as a proposal - the problem isn't with their attempts to make it non-proprietary, but with the basic concept of making typefaces on the web DRMed. Look what such attempts have done to the music and video industry - simply decimated it. Do we really want to see the same thing happen to our beloved medium as typography moves into the 21st century?
95
- *[W3C]: World Wide Web Consortium
96
- [W3C]: <http://w3c.org> (World Wide Web Consortium)
97
- [spec]: <http://?> ()
98
- *[DRY]: Don't Repeat Yourself
99
- [jos]: jos
100
-
101
- *** Output of inspect ***
102
- md_el(:document,[
103
- md_el(:header,["WebKit (Safari 3.1) and the CSS @font-face declaration"],{:level=>1},[]),
104
- md_par([
105
- "I",
106
- md_entity("rsquo"),
107
- "m a big fan of typography in general. If you check out ",
108
- md_im_link(["my homepage"], "http://elliottcable.name", nil),
109
- " or my ",
110
- md_im_link(["contact elliottcable"], "http://elliottcable.name/contact.xhtml", nil),
111
- " page, and you",
112
- md_entity("rsquo"),
113
- "re using Safari/WebKit or Opera/Kestrel, you",
114
- md_entity("rsquo"),
115
- "ll notice the typefaces (fonts, as colloquialized) are ",
116
- md_em(["very"]),
117
- " non-standard. (As of this writing, I",
118
- md_entity("rsquo"),
119
- "m using ",
120
- md_link(["Museo"],"museo"),
121
- " and ",
122
- md_link(["Diavlo"],"diavlo"),
123
- md_foot_ref("^jos"),
124
- " heavily on both.)"
125
- ]),
126
- md_par([
127
- "The internet has not be a friendly place for typohiles like myself, up to this point, at least. One might even say it was a frightful, mentally scarring environment for those akin to yours truly. We",
128
- md_entity("rsquo"),
129
- "ve been restricted to reading page after page after page on day after day after day for year after year after year abominations of markup and design enslaved by the horrible overlords we know as Lucida, Verdana, Arial, Helvetica, Geneva, Georgia, Courier, and",
130
- md_entity("hellip"),
131
- " dare I invoke ye, thou my terrible overlord? Times New Roman."
132
- ]),
133
- md_par([
134
- "Wherefore art thou, my glorious Archer? And thee as well, my beautiful Garamond? The technical restrictions of that horrible monster we know as the Web Browser hath forced us all too long to use those most banal, those most common, and those most abused, out of all of the typefaces of the world."
135
- ]),
136
- md_par([
137
- "All hyperbole aside, I",
138
- md_entity("rsquo"),
139
- "m extremely happy to see the advent of a standard ",
140
- md_code("@font-face"),
141
- " declaration in CSS. Internet Explorer first implemented a crutched, basic version of this way back in version 4, but nothing ever really came of it - their decision to create the proprietary .EOT",
142
- md_foot_ref("^eot"),
143
- " format to appease overly restrictive type foundries",
144
- md_entity("rsquo"),
145
- " worries about intellectual property (aka. the cold, hard dominatrix that we know only as Ms. Profit) truly and completely killed that initial attempt at bringing astute typography and it",
146
- md_entity("rsquo"),
147
- "s advocates to the web. This new run at ",
148
- md_code("@font-face"),
149
- " by an established, trusted, and open group (the ",
150
- md_link(["W3C"],"w3c"),
151
- " itself, responsible for helping to make much of what we use as designers on the web standard and cross-system compatible) has a much better chance, in my humble opinion - and I am quite looking forward to the consequences if it succeeds."
152
- ]),
153
- md_par([
154
- "Now, onwards to the topic of my post as declared in the header (yes, I know, a slow start - but it",
155
- md_entity("rsquo"),
156
- "s an interesting topic with an interesting history!). WebKit, the open source rendering engine behind the wonderfulness that is Safari, and how it handles the ",
157
- md_entity("lsquo"),
158
- "new",
159
- md_entity("rsquo"),
160
- " ",
161
- md_code("@font-face"),
162
- " declaration. No, it",
163
- md_entity("rsquo"),
164
- "s not really ",
165
- md_entity("lsquo"),
166
- "new",
167
- md_entity("rsquo"),
168
- ", but yes, it feels like it is."
169
- ]),
170
- md_par([
171
- "To put it simply, and to be very blunt, it",
172
- md_entity("rsquo"),
173
- "s broken."
174
- ]),
175
- md_par([
176
- "The ",
177
- md_link(["CSS spec section"],"spec"),
178
- " for ",
179
- md_code("@font-face"),
180
- " is very specific - typefaces are to be selected based on a wide array of criteria placed in the ",
181
- md_code("@font-face"),
182
- " declaration block itself. Various textual CSS attributes may be defined within the ",
183
- md_code("@font-face"),
184
- " declaration, and then they will be checked when the typeface is referred to later in the CSS. For instance, if I have two ",
185
- md_code("@font-face"),
186
- " declarations for the Diavlo family - one for regular text, and one for a heavier weighted version of the typeface - then I later utilize Diavlo in a ",
187
- md_code("font-family:"),
188
- " attribute, it should refer to the basic Diavlo font defined in the first ",
189
- md_code("@font-face"),
190
- ". However, if I were to do the same, but also specify a heavy ",
191
- md_code("font-weight:"),
192
- ", then it should use the heavier version of Diavlo. To place this example in code:"
193
- ]),
194
- md_el(:code,[],{:raw_code=>"@font-face {\n font-family: 'Diavlo';\n src: url(./Diavlo/Diavlo_Book.otf) format(\"opentype\");\n}\n\n@font-face {\n font-family: 'Diavlo';\n font-weight: 900;\n src: url(./Diavlo/Diavlo_Black.otf) format(\"opentype\");\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-family: 'Diavlo';\n font-weight: 900;\n}\n\ndiv#content {\n font-family: 'Diavlo';\n}"},[]),
195
- md_par([
196
- "As you can see, my headings should use the typeface defined in ",
197
- md_code("Diavlo_Black.otf"),
198
- ", while my body content should use ",
199
- md_code("Diavlo_Book.otf"),
200
- ". However, in WebKit, this doesn",
201
- md_entity("rsquo"),
202
- "t work - it completely ignores any attribute except ",
203
- md_code("font-family:"),
204
- " and ",
205
- md_code("src:"),
206
- " in a ",
207
- md_code("@font-face"),
208
- " declaration! Completely ignores them! Not only that - not ",
209
- md_em(["only"]),
210
- " that - it disregards all but the last ",
211
- md_code("@font-face"),
212
- " for a given ",
213
- md_code("font-family:"),
214
- " attribute string!"
215
- ]),
216
- md_par([
217
- "The implication here is that, to make ",
218
- md_code("@font-face"),
219
- " work as it is currently implemented in WebKit (and thus, Safari 3.1), I have to declare ",
220
- md_em(["completely imaginary, non-existent type families"]),
221
- " to satisfy WebKit alone. Here",
222
- md_entity("rsquo"),
223
- "s the method I have used in the places I current implement ",
224
- md_code("@font-face"),
225
- ":"
226
- ]),
227
- md_el(:code,[],{:raw_code=>"@font-face {\n font-family: 'Diavlo Book';\n src: url(./Diavlo/Diavlo_Book.otf) format(\"opentype\");\n}\n\n@font-face {\n font-family: 'Diavlo Black';\n src: url(./Diavlo/Diavlo_Black.otf) format(\"opentype\");\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-family: 'Diavlo Black';\n}\n\ndiv#content {\n font-family: 'Diavlo Book';\n}"},[]),
228
- md_par([
229
- "Isn",
230
- md_entity("rsquo"),
231
- "t it horrible? Seriously, my eyes, they bleed. There",
232
- md_entity("rsquo"),
233
- "s lots of problems with this far beyond the lack of semanticity when it comes to the typeface names",
234
- md_entity("hellip"),
235
- " let me see how many ways this breaks the purpose of ",
236
- md_code("@font-face"),
237
- ":"
238
- ]),
239
- md_el(:ul,[
240
- md_el(:li,[
241
- md_par([
242
- "You remove a large element our control over the display of the page."
243
- ]),
244
- md_par([
245
- "As soon as we begin to use ",
246
- md_code("@font-face"),
247
- " in our page, we can no longer make any use of any other textual control attribute - ",
248
- md_code("font-weight:"),
249
- ", ",
250
- md_code("font-style:"),
251
- ", and ",
252
- md_code("font-variant:"),
253
- " are no longer available to us, because they no longer correctly map to technical typeface variant/features."
254
- ]),
255
- md_par([
256
- "Also, many default elements are destroyed, unusable, without ",
257
- md_entity("lsquo"),
258
- "fixing",
259
- md_entity("rsquo"),
260
- " - for instance, ",
261
- md_code("<b>"),
262
- " would have no effect in a page styled for WebKit as above; We would have to specify something like ",
263
- md_code("b {font-family: 'Diavlo Black';}"),
264
- " - how broken is that? Unless we caught all such default elements and re-styled them to use the bastardized names instead of the correct attributes, lots of basic HTML formatting would be broken. I myself may never use in-document formatting (separation of design and content!), but what about comments forms? Forum posts? Direct HTML-literal quotes?"
265
- ]),
266
- md_par([
267
- "If we want to use Javascript to modify the display of the content, we can",
268
- md_entity("rsquo"),
269
- "t simply adjust the mentioned textual control attributes - we have to know and change the entire ",
270
- md_code("font-family:"),
271
- " array of strings."
272
- ])
273
- ],{:want_my_paragraph=>true},[]),
274
- md_el(:li,[
275
- md_par(["You make us very wet."]),
276
- md_par([
277
- "And by wet, I mean ",
278
- md_entity("lsquo"),
279
- "not DRY",
280
- md_entity("rsquo"),
281
- ". What if we decide to change one of the bastardized font names? Or use a different font entirely? We have to go through all of our CSS, all of our Javascript, and make sure we update every occurrence of the typeface",
282
- md_entity("rsquo"),
283
- "s bastardized name."
284
- ])
285
- ],{:want_my_paragraph=>true},[]),
286
- md_el(:li,[
287
- md_par([
288
- "You remove our user",
289
- md_entity("rsquo"),
290
- "s user choice, and waste bandwidth."
291
- ]),
292
- md_par([
293
- "Since the names refer to families that don",
294
- md_entity("rsquo"),
295
- "t, in fact, exist, the browser can",
296
- md_entity("rsquo"),
297
- "t override the declaration with a user",
298
- md_entity("rsquo"),
299
- "s installed version of the typeface. This means that, regardless of whether the user already has the typeface installed on their own computer, the browser won",
300
- md_entity("rsquo"),
301
- "t use that - it doesn",
302
- md_entity("rsquo"),
303
- "t know to use ",
304
- md_entity("lsquo"),
305
- "Diavlo",
306
- md_entity("rsquo"),
307
- ", which the user has installed, because it was told to use ",
308
- md_entity("lsquo"),
309
- "Diavlo Black",
310
- md_entity("rsquo"),
311
- ", which no user in the entire world has installed on their computer."
312
- ])
313
- ],{:want_my_paragraph=>true},[])
314
- ],{},[]),
315
- md_par([
316
- "This whole thing is rather worrying - I",
317
- md_entity("rsquo"),
318
- "ve heard Opera has ",
319
- md_code("@font-face"),
320
- " support, though I haven",
321
- md_entity("rsquo"),
322
- "t had time to test this myself, so I don",
323
- md_entity("rsquo"),
324
- "t know if it actually does - or, for that matter, if it does it ",
325
- md_entity("lsquo"),
326
- "correctly",
327
- md_entity("rsquo"),
328
- ", or has the same problems as WebKit. But either way, WebKit is one of the first two implementations to ever attempt to support ",
329
- md_code("@font-face"),
330
- " (Microsoft",
331
- md_entity("rsquo"),
332
- "s unrelated ",
333
- md_code("@font-face"),
334
- " declaration notwithstanding) - I really don",
335
- md_entity("rsquo"),
336
- "t want to see it",
337
- md_entity("rsquo"),
338
- "s early mistakes carried on to FireFox in a few years, and then Internet Explorer a few decades after that. That will leave us stuck with this broken system forever, as it has been demonstrated time and time again that if nobody else supports an old standard correctly, a newcomer to the standard will not do it correctly either. I for one would really, really, hate that."
339
- ]),
340
- md_par([
341
- "In summary",
342
- md_entity("hellip"),
343
- " come on, WebKit team, this isn",
344
- md_entity("rsquo"),
345
- "t like you - you",
346
- md_entity("rsquo"),
347
- "re always the ones with the closest-to-standard implementation, and the cleanest code, and",
348
- md_entity("hellip"),
349
- " hell, overall? Webkit is the most secure/fastest browser available. But this is making me lose my faith in you, guys, please get it right. You",
350
- md_entity("rsquo"),
351
- "re pioneering a leap into the future when it comes to the Web - this is as important, or ",
352
- md_em(["more"]),
353
- " important, than Mosiac",
354
- md_entity("rsquo"),
355
- "s allowing of images was."
356
- ]),
357
- md_par([
358
- "To put it succinctly - don",
359
- md_entity("rsquo"),
360
- "t fuck this up, y",
361
- md_entity("rsquo"),
362
- "all."
363
- ]),
364
- md_ref_def("museo", "http://www.josbuivenga.demon.nl/museo.html>", {:title=>"Jos Buivenga"}),
365
- md_ref_def("diavlo", "http://www.josbuivenga.demon.nl/diavlo.html>", {:title=>"Jos Buivenga"}),
366
- md_par([
367
- md_em([md_link(["CSS"],"css"), ": Cascading Style Sheets"]),
368
- md_link([".EOT"],"eot"),
369
- ": Embedded OpenType ",
370
- md_foot_ref("^eot"),
371
- ": To give Microsoft a little credit, something I rarely do",
372
- md_entity("hellip"),
373
- " Yes, I",
374
- md_entity("rsquo"),
375
- "m aware Microsoft submitted EOT to the W3C as a proposal - the problem isn",
376
- md_entity("rsquo"),
377
- "t with their attempts to make it non-proprietary, but with the basic concept of making typefaces on the web DRMed. Look what such attempts have done to the music and video industry - simply decimated it. Do we really want to see the same thing happen to our beloved medium as typography moves into the 21st century? ",
378
- md_em([md_link(["W3C"],"w3c"), ": World Wide Web Consortium"])
379
- ]),
380
- md_ref_def("w3c", "http://w3c.org>", {:title=>"World Wide Web Consortium"}),
381
- md_ref_def("spec", "http://?>", {:title=>") *[DRY]: Don"})
382
- ],{},[])
383
- *** Output of to_html ***
384
- <h1 id='webkit_safari_31_and_the_css_fontface_declaration'>WebKit (Safari 3.1) and the CSS @font-face declaration</h1>
385
-
386
- <p>I&#8217;m a big fan of typography in general. If you check out <a href='http://elliottcable.name'>my homepage</a> or my <a href='http://elliottcable.name/contact.xhtml'>contact elliottcable</a> page, and you&#8217;re using Safari/WebKit or Opera/Kestrel, you&#8217;ll notice the typefaces (fonts, as colloquialized) are <em>very</em> non-standard. (As of this writing, I&#8217;m using <a href='http://www.josbuivenga.demon.nl/museo.html&gt;' title='Jos Buivenga'>Museo</a> and <a href='http://www.josbuivenga.demon.nl/diavlo.html&gt;' title='Jos Buivenga'>Diavlo</a><sup id='fnref:1'><a href='#fn:1' rel='footnote'>1</a></sup> heavily on both.)</p>
387
-
388
- <p>The internet has not be a friendly place for typohiles like myself, up to this point, at least. One might even say it was a frightful, mentally scarring environment for those akin to yours truly. We&#8217;ve been restricted to reading page after page after page on day after day after day for year after year after year abominations of markup and design enslaved by the horrible overlords we know as Lucida, Verdana, Arial, Helvetica, Geneva, Georgia, Courier, and&#8230; dare I invoke ye, thou my terrible overlord? Times New Roman.</p>
389
-
390
- <p>Wherefore art thou, my glorious Archer? And thee as well, my beautiful Garamond? The technical restrictions of that horrible monster we know as the Web Browser hath forced us all too long to use those most banal, those most common, and those most abused, out of all of the typefaces of the world.</p>
391
-
392
- <p>All hyperbole aside, I&#8217;m extremely happy to see the advent of a standard <code>@font-face</code> declaration in CSS. Internet Explorer first implemented a crutched, basic version of this way back in version 4, but nothing ever really came of it - their decision to create the proprietary .EOT<sup id='fnref:2'><a href='#fn:2' rel='footnote'>2</a></sup> format to appease overly restrictive type foundries&#8217; worries about intellectual property (aka. the cold, hard dominatrix that we know only as Ms. Profit) truly and completely killed that initial attempt at bringing astute typography and it&#8217;s advocates to the web. This new run at <code>@font-face</code> by an established, trusted, and open group (the <a href='http://w3c.org&gt;' title='World Wide Web Consortium'>W3C</a> itself, responsible for helping to make much of what we use as designers on the web standard and cross-system compatible) has a much better chance, in my humble opinion - and I am quite looking forward to the consequences if it succeeds.</p>
393
-
394
- <p>Now, onwards to the topic of my post as declared in the header (yes, I know, a slow start - but it&#8217;s an interesting topic with an interesting history!). WebKit, the open source rendering engine behind the wonderfulness that is Safari, and how it handles the &#8216;new&#8217; <code>@font-face</code> declaration. No, it&#8217;s not really &#8216;new&#8217;, but yes, it feels like it is.</p>
395
-
396
- <p>To put it simply, and to be very blunt, it&#8217;s broken.</p>
397
-
398
- <p>The <a href='http://?&gt;' title=') *[DRY]: Don'>CSS spec section</a> for <code>@font-face</code> is very specific - typefaces are to be selected based on a wide array of criteria placed in the <code>@font-face</code> declaration block itself. Various textual CSS attributes may be defined within the <code>@font-face</code> declaration, and then they will be checked when the typeface is referred to later in the CSS. For instance, if I have two <code>@font-face</code> declarations for the Diavlo family - one for regular text, and one for a heavier weighted version of the typeface - then I later utilize Diavlo in a <code>font-family:</code> attribute, it should refer to the basic Diavlo font defined in the first <code>@font-face</code>. However, if I were to do the same, but also specify a heavy <code>font-weight:</code>, then it should use the heavier version of Diavlo. To place this example in code:</p>
399
-
400
- <pre><code>@font-face {
401
- font-family: &#39;Diavlo&#39;;
402
- src: url(./Diavlo/Diavlo_Book.otf) format(&quot;opentype&quot;);
403
- }
404
-
405
- @font-face {
406
- font-family: &#39;Diavlo&#39;;
407
- font-weight: 900;
408
- src: url(./Diavlo/Diavlo_Black.otf) format(&quot;opentype&quot;);
409
- }
410
-
411
- h1, h2, h3, h4, h5, h6 {
412
- font-family: &#39;Diavlo&#39;;
413
- font-weight: 900;
414
- }
415
-
416
- div#content {
417
- font-family: &#39;Diavlo&#39;;
418
- }</code></pre>
419
-
420
- <p>As you can see, my headings should use the typeface defined in <code>Diavlo_Black.otf</code>, while my body content should use <code>Diavlo_Book.otf</code>. However, in WebKit, this doesn&#8217;t work - it completely ignores any attribute except <code>font-family:</code> and <code>src:</code> in a <code>@font-face</code> declaration! Completely ignores them! Not only that - not <em>only</em> that - it disregards all but the last <code>@font-face</code> for a given <code>font-family:</code> attribute string!</p>
421
-
422
- <p>The implication here is that, to make <code>@font-face</code> work as it is currently implemented in WebKit (and thus, Safari 3.1), I have to declare <em>completely imaginary, non-existent type families</em> to satisfy WebKit alone. Here&#8217;s the method I have used in the places I current implement <code>@font-face</code>:</p>
423
-
424
- <pre><code>@font-face {
425
- font-family: &#39;Diavlo Book&#39;;
426
- src: url(./Diavlo/Diavlo_Book.otf) format(&quot;opentype&quot;);
427
- }
428
-
429
- @font-face {
430
- font-family: &#39;Diavlo Black&#39;;
431
- src: url(./Diavlo/Diavlo_Black.otf) format(&quot;opentype&quot;);
432
- }
433
-
434
- h1, h2, h3, h4, h5, h6 {
435
- font-family: &#39;Diavlo Black&#39;;
436
- }
437
-
438
- div#content {
439
- font-family: &#39;Diavlo Book&#39;;
440
- }</code></pre>
441
-
442
- <p>Isn&#8217;t it horrible? Seriously, my eyes, they bleed. There&#8217;s lots of problems with this far beyond the lack of semanticity when it comes to the typeface names&#8230; let me see how many ways this breaks the purpose of <code>@font-face</code>:</p>
443
-
444
- <ul>
445
- <li>
446
- <p>You remove a large element our control over the display of the page.</p>
447
-
448
- <p>As soon as we begin to use <code>@font-face</code> in our page, we can no longer make any use of any other textual control attribute - <code>font-weight:</code>, <code>font-style:</code>, and <code>font-variant:</code> are no longer available to us, because they no longer correctly map to technical typeface variant/features.</p>
449
-
450
- <p>Also, many default elements are destroyed, unusable, without &#8216;fixing&#8217; - for instance, <code>&lt;b&gt;</code> would have no effect in a page styled for WebKit as above; We would have to specify something like <code>b {font-family: &#39;Diavlo Black&#39;;}</code> - how broken is that? Unless we caught all such default elements and re-styled them to use the bastardized names instead of the correct attributes, lots of basic HTML formatting would be broken. I myself may never use in-document formatting (separation of design and content!), but what about comments forms? Forum posts? Direct HTML-literal quotes?</p>
451
-
452
- <p>If we want to use Javascript to modify the display of the content, we can&#8217;t simply adjust the mentioned textual control attributes - we have to know and change the entire <code>font-family:</code> array of strings.</p>
453
- </li>
454
-
455
- <li>
456
- <p>You make us very wet.</p>
457
-
458
- <p>And by wet, I mean &#8216;not DRY&#8217;. What if we decide to change one of the bastardized font names? Or use a different font entirely? We have to go through all of our CSS, all of our Javascript, and make sure we update every occurrence of the typeface&#8217;s bastardized name.</p>
459
- </li>
460
-
461
- <li>
462
- <p>You remove our user&#8217;s user choice, and waste bandwidth.</p>
463
-
464
- <p>Since the names refer to families that don&#8217;t, in fact, exist, the browser can&#8217;t override the declaration with a user&#8217;s installed version of the typeface. This means that, regardless of whether the user already has the typeface installed on their own computer, the browser won&#8217;t use that - it doesn&#8217;t know to use &#8216;Diavlo&#8217;, which the user has installed, because it was told to use &#8216;Diavlo Black&#8217;, which no user in the entire world has installed on their computer.</p>
465
- </li>
466
- </ul>
467
-
468
- <p>This whole thing is rather worrying - I&#8217;ve heard Opera has <code>@font-face</code> support, though I haven&#8217;t had time to test this myself, so I don&#8217;t know if it actually does - or, for that matter, if it does it &#8216;correctly&#8217;, or has the same problems as WebKit. But either way, WebKit is one of the first two implementations to ever attempt to support <code>@font-face</code> (Microsoft&#8217;s unrelated <code>@font-face</code> declaration notwithstanding) - I really don&#8217;t want to see it&#8217;s early mistakes carried on to FireFox in a few years, and then Internet Explorer a few decades after that. That will leave us stuck with this broken system forever, as it has been demonstrated time and time again that if nobody else supports an old standard correctly, a newcomer to the standard will not do it correctly either. I for one would really, really, hate that.</p>
469
-
470
- <p>In summary&#8230; come on, WebKit team, this isn&#8217;t like you - you&#8217;re always the ones with the closest-to-standard implementation, and the cleanest code, and&#8230; hell, overall? Webkit is the most secure/fastest browser available. But this is making me lose my faith in you, guys, please get it right. You&#8217;re pioneering a leap into the future when it comes to the Web - this is as important, or <em>more</em> important, than Mosiac&#8217;s allowing of images was.</p>
471
-
472
- <p>To put it succinctly - don&#8217;t fuck this up, y&#8217;all.</p>
473
-
474
- <p><em><span>CSS</span>: Cascading Style Sheets</em><span>.EOT</span>: Embedded OpenType <sup id='fnref:3'><a href='#fn:3' rel='footnote'>3</a></sup>: To give Microsoft a little credit, something I rarely do&#8230; Yes, I&#8217;m aware Microsoft submitted EOT to the W3C as a proposal - the problem isn&#8217;t with their attempts to make it non-proprietary, but with the basic concept of making typefaces on the web DRMed. Look what such attempts have done to the music and video industry - simply decimated it. Do we really want to see the same thing happen to our beloved medium as typography moves into the 21st century? <em><a href='http://w3c.org&gt;' title='World Wide Web Consortium'>W3C</a>: World Wide Web Consortium</em></p>
475
- <div class='footnotes'><hr /><ol /></div>
476
- *** Output of to_latex ***
477
- #<NameError: undefined local variable or method `fid' for md_foot_ref("^jos"):MaRuKu::MDElement>
478
- ./lib/maruku/output/to_latex.rb:466:in `to_latex_footnote_reference'
479
- ./lib/maruku/output/to_latex.rb:538:in `send'
480
- ./lib/maruku/output/to_latex.rb:538:in `array_to_latex'
481
- ./lib/maruku/output/to_latex.rb:529:in `each'
482
- ./lib/maruku/output/to_latex.rb:529:in `array_to_latex'
483
- ./lib/maruku/output/to_latex.rb:524:in `children_to_latex'
484
- ./lib/maruku/output/to_latex.rb:158:in `to_latex_paragraph'
485
- ./lib/maruku/output/to_latex.rb:538:in `send'
486
- ./lib/maruku/output/to_latex.rb:538:in `array_to_latex'
487
- ./lib/maruku/output/to_latex.rb:529:in `each'
488
- ./lib/maruku/output/to_latex.rb:529:in `array_to_latex'
489
- ./lib/maruku/output/to_latex.rb:524:in `children_to_latex'
490
- ./lib/maruku/output/to_latex.rb:42:in `to_latex'
491
- bin/marutest:93:in `send'
492
- bin/marutest:93:in `run_test'
493
- bin/marutest:88:in `each'
494
- bin/marutest:88:in `run_test'
495
- bin/marutest:262:in `marutest'
496
- bin/marutest:259:in `each'
497
- bin/marutest:259:in `marutest'
498
- bin/marutest:334
499
- *** Output of to_md ***
500
- WebKit (Safari 3.1) and the CSS @font-face declarationI m a big fan of typography in general.
501
- If you check out my homepageor my
502
- contact elliottcablepage, and you re
503
- using Safari/WebKit or Opera/Kestrel,
504
- you ll notice the typefaces (fonts, as
505
- colloquialized) are verynon-standard.
506
- (As of this writing, I m using Museoand
507
- Diavloheavily on both.)
508
-
509
- The internet has not be a friendly
510
- place for typohiles like myself, up to
511
- this point, at least. One might even
512
- say it was a frightful, mentally
513
- scarring environment for those akin to
514
- yours truly. We ve been restricted to
515
- reading page after page after page on
516
- day after day after day for year after
517
- year after year abominations of markup
518
- and design enslaved by the horrible
519
- overlords we know as Lucida, Verdana,
520
- Arial, Helvetica, Geneva, Georgia,
521
- Courier, and dare I invoke ye, thou my
522
- terrible overlord? Times New Roman.
523
-
524
- Wherefore art thou, my glorious Archer?
525
- And thee as well, my beautiful
526
- Garamond? The technical restrictions of
527
- that horrible monster we know as the
528
- Web Browser hath forced us all too long
529
- to use those most banal, those most
530
- common, and those most abused, out of
531
- all of the typefaces of the world.
532
-
533
- All hyperbole aside, I m extremely
534
- happy to see the advent of a standard
535
- declaration in CSS. Internet Explorer
536
- first implemented a crutched, basic
537
- version of this way back in version 4,
538
- but nothing ever really came of it -
539
- their decision to create the
540
- proprietary .EOT format to appease
541
- overly restrictive type foundries
542
- worries about intellectual property
543
- (aka. the cold, hard dominatrix that we
544
- know only as Ms. Profit) truly and
545
- completely killed that initial attempt
546
- at bringing astute typography and it s
547
- advocates to the web. This new run at
548
- by an established, trusted, and open
549
- group (the W3Citself, responsible for
550
- helping to make much of what we use as
551
- designers on the web standard and
552
- cross-system compatible) has a much
553
- better chance, in my humble opinion -
554
- and I am quite looking forward to the
555
- consequences if it succeeds.
556
-
557
- Now, onwards to the topic of my post as
558
- declared in the header (yes, I know, a
559
- slow start - but it s an interesting
560
- topic with an interesting history!).
561
- WebKit, the open source rendering
562
- engine behind the wonderfulness that is
563
- Safari, and how it handles the new
564
- declaration. No, it s not really new ,
565
- but yes, it feels like it is.
566
-
567
- To put it simply, and to be very blunt,
568
- it s broken.
569
-
570
- The CSS spec sectionfor is very
571
- specific - typefaces are to be selected
572
- based on a wide array of criteria
573
- placed in the declaration block itself.
574
- Various textual CSS attributes may be
575
- defined within the declaration, and
576
- then they will be checked when the
577
- typeface is referred to later in the
578
- CSS. For instance, if I have two
579
- declarations for the Diavlo family -
580
- one for regular text, and one for a
581
- heavier weighted version of the
582
- typeface - then I later utilize Diavlo
583
- in a attribute, it should refer to the
584
- basic Diavlo font defined in the first
585
- . However, if I were to do the same,
586
- but also specify a heavy , then it
587
- should use the heavier version of
588
- Diavlo. To place this example in code:
589
-
590
- As you can see, my headings should use
591
- the typeface defined in , while my body
592
- content should use . However, in
593
- WebKit, this doesn t work - it
594
- completely ignores any attribute except
595
- and in a declaration! Completely
596
- ignores them! Not only that - not only
597
- that - it disregards all but the last
598
- for a given attribute string!
599
-
600
- The implication here is that, to make
601
- work as it is currently implemented in
602
- WebKit (and thus, Safari 3.1), I have
603
- to declare
604
- completely imaginary, non-existent type families
605
- to satisfy WebKit alone. Here s the
606
- method I have used in the places I
607
- current implement :
608
-
609
- Isn t it horrible? Seriously, my eyes,
610
- they bleed. There s lots of problems
611
- with this far beyond the lack of
612
- semanticity when it comes to the
613
- typeface names let me see how many ways
614
- this breaks the purpose of :
615
-
616
- -You remove a large element our control over the display of the page.
617
- As soon as we begin to use in our page, we can no longer make any use of any other textual control attribute - , , and are no longer available to us, because they no longer correctly map to technical typeface variant/features.
618
- Also, many default elements are destroyed, unusable, without fixing - for instance, would have no effect in a page styled for WebKit as above; We would have to specify something like - how broken is that? Unless we caught all such default elements and re-styled them to use the bastardized names instead of the correct attributes, lots of basic HTML formatting would be broken. I myself may never use in-document formatting (separation of design and content!), but what about comments forms? Forum posts? Direct HTML-literal quotes?
619
- If we want to use Javascript to modify the display of the content, we cant simply adjust the mentioned textual control attributes - we have to know and change the entire array of strings.
620
- -ou make us very wet.
621
- And by wet, I mean not DRY. What if we decide to change one of the bastardized font names? Or use a different font entirely? We have to go through all of our CSS, all of our Javascript, and make sure we update every occurrence of the typefaces bastardized name.
622
- -You remove our users user choice, and waste bandwidth.
623
- Since the names refer to families that dont, in fact, exist, the browser cant override the declaration with a users installed version of the typeface. This means that, regardless of whether the user already has the typeface installed on their own computer, the browser wont use that - it doesnt know to use Diavlo, which the user has installed, because it was told to use Diavlo Black, which no user in the entire world has installed on their computer.
624
-
625
- This whole thing is rather worrying - I
626
- ve heard Opera has support, though I
627
- haven t had time to test this myself,
628
- so I don t know if it actually does -
629
- or, for that matter, if it does it
630
- correctly , or has the same problems as
631
- WebKit. But either way, WebKit is one
632
- of the first two implementations to
633
- ever attempt to support (Microsoft s
634
- unrelated declaration notwithstanding)
635
- - I really don t want to see it s early
636
- mistakes carried on to FireFox in a few
637
- years, and then Internet Explorer a few
638
- decades after that. That will leave us
639
- stuck with this broken system forever,
640
- as it has been demonstrated time and
641
- time again that if nobody else supports
642
- an old standard correctly, a newcomer
643
- to the standard will not do it
644
- correctly either. I for one would
645
- really, really, hate that.
646
-
647
- In summary come on, WebKit team, this
648
- isn t like you - you re always the ones
649
- with the closest-to-standard
650
- implementation, and the cleanest code,
651
- and hell, overall? Webkit is the most
652
- secure/fastest browser available. But
653
- this is making me lose my faith in you,
654
- guys, please get it right. You re
655
- pioneering a leap into the future when
656
- it comes to the Web - this is as
657
- important, or moreimportant, than
658
- Mosiac s allowing of images was.
659
-
660
- To put it succinctly - don t fuck this
661
- up, y all.
662
-
663
- CSS: Cascading Style Sheets.EOT:
664
- Embedded OpenType : To give Microsoft a
665
- little credit, something I rarely do
666
- Yes, I m aware Microsoft submitted EOT
667
- to the W3C as a proposal - the problem
668
- isn t with their attempts to make it
669
- non-proprietary, but with the basic
670
- concept of making typefaces on the web
671
- DRMed. Look what such attempts have
672
- done to the music and video industry -
673
- simply decimated it. Do we really want
674
- to see the same thing happen to our
675
- beloved medium as typography moves into
676
- the 21st century?
677
- W3C: World Wide Web Consortium
678
- *** Output of to_s ***
679
- WebKit (Safari 3.1) and the CSS @font-face declarationIm a big fan of typography in general. If you check out my homepage or my contact elliottcable page, and youre using Safari/WebKit or Opera/Kestrel, youll notice the typefaces (fonts, as colloquialized) are very non-standard. (As of this writing, Im using Museo and Diavlo heavily on both.)The internet has not be a friendly place for typohiles like myself, up to this point, at least. One might even say it was a frightful, mentally scarring environment for those akin to yours truly. Weve been restricted to reading page after page after page on day after day after day for year after year after year abominations of markup and design enslaved by the horrible overlords we know as Lucida, Verdana, Arial, Helvetica, Geneva, Georgia, Courier, and dare I invoke ye, thou my terrible overlord? Times New Roman.Wherefore art thou, my glorious Archer? And thee as well, my beautiful Garamond? The technical restrictions of that horrible monster we know as the Web Browser hath forced us all too long to use those most banal, those most common, and those most abused, out of all of the typefaces of the world.All hyperbole aside, Im extremely happy to see the advent of a standard declaration in CSS. Internet Explorer first implemented a crutched, basic version of this way back in version 4, but nothing ever really came of it - their decision to create the proprietary .EOT format to appease overly restrictive type foundries worries about intellectual property (aka. the cold, hard dominatrix that we know only as Ms. Profit) truly and completely killed that initial attempt at bringing astute typography and its advocates to the web. This new run at by an established, trusted, and open group (the W3C itself, responsible for helping to make much of what we use as designers on the web standard and cross-system compatible) has a much better chance, in my humble opinion - and I am quite looking forward to the consequences if it succeeds.Now, onwards to the topic of my post as declared in the header (yes, I know, a slow start - but its an interesting topic with an interesting history!). WebKit, the open source rendering engine behind the wonderfulness that is Safari, and how it handles the new declaration. No, its not really new, but yes, it feels like it is.To put it simply, and to be very blunt, its broken.The CSS spec section for is very specific - typefaces are to be selected based on a wide array of criteria placed in the declaration block itself. Various textual CSS attributes may be defined within the declaration, and then they will be checked when the typeface is referred to later in the CSS. For instance, if I have two declarations for the Diavlo family - one for regular text, and one for a heavier weighted version of the typeface - then I later utilize Diavlo in a attribute, it should refer to the basic Diavlo font defined in the first . However, if I were to do the same, but also specify a heavy , then it should use the heavier version of Diavlo. To place this example in code:As you can see, my headings should use the typeface defined in , while my body content should use . However, in WebKit, this doesnt work - it completely ignores any attribute except and in a declaration! Completely ignores them! Not only that - not only that - it disregards all but the last for a given attribute string!The implication here is that, to make work as it is currently implemented in WebKit (and thus, Safari 3.1), I have to declare completely imaginary, non-existent type families to satisfy WebKit alone. Heres the method I have used in the places I current implement :Isnt it horrible? Seriously, my eyes, they bleed. Theres lots of problems with this far beyond the lack of semanticity when it comes to the typeface names let me see how many ways this breaks the purpose of :You remove a large element our control over the display of the page.As soon as we begin to use in our page, we can no longer make any use of any other textual control attribute - , , and are no longer available to us, because they no longer correctly map to technical typeface variant/features.Also, many default elements are destroyed, unusable, without fixing - for instance, would have no effect in a page styled for WebKit as above; We would have to specify something like - how broken is that? Unless we caught all such default elements and re-styled them to use the bastardized names instead of the correct attributes, lots of basic HTML formatting would be broken. I myself may never use in-document formatting (separation of design and content!), but what about comments forms? Forum posts? Direct HTML-literal quotes?If we want to use Javascript to modify the display of the content, we cant simply adjust the mentioned textual control attributes - we have to know and change the entire array of strings.You make us very wet.And by wet, I mean not DRY. What if we decide to change one of the bastardized font names? Or use a different font entirely? We have to go through all of our CSS, all of our Javascript, and make sure we update every occurrence of the typefaces bastardized name.You remove our users user choice, and waste bandwidth.Since the names refer to families that dont, in fact, exist, the browser cant override the declaration with a users installed version of the typeface. This means that, regardless of whether the user already has the typeface installed on their own computer, the browser wont use that - it doesnt know to use Diavlo, which the user has installed, because it was told to use Diavlo Black, which no user in the entire world has installed on their computer.This whole thing is rather worrying - Ive heard Opera has support, though I havent had time to test this myself, so I dont know if it actually does - or, for that matter, if it does it correctly, or has the same problems as WebKit. But either way, WebKit is one of the first two implementations to ever attempt to support (Microsofts unrelated declaration notwithstanding) - I really dont want to see its early mistakes carried on to FireFox in a few years, and then Internet Explorer a few decades after that. That will leave us stuck with this broken system forever, as it has been demonstrated time and time again that if nobody else supports an old standard correctly, a newcomer to the standard will not do it correctly either. I for one would really, really, hate that.In summary come on, WebKit team, this isnt like you - youre always the ones with the closest-to-standard implementation, and the cleanest code, and hell, overall? Webkit is the most secure/fastest browser available. But this is making me lose my faith in you, guys, please get it right. Youre pioneering a leap into the future when it comes to the Web - this is as important, or more important, than Mosiacs allowing of images was.To put it succinctly - dont fuck this up, yall.CSS: Cascading Style Sheets.EOT: Embedded OpenType : To give Microsoft a little credit, something I rarely do Yes, Im aware Microsoft submitted EOT to the W3C as a proposal - the problem isnt with their attempts to make it non-proprietary, but with the basic concept of making typefaces on the web DRMed. Look what such attempts have done to the music and video industry - simply decimated it. Do we really want to see the same thing happen to our beloved medium as typography moves into the 21st century? W3C: World Wide Web Consortium
680
- *** EOF ***
681
-
682
-
683
-
684
-
685
- Failed tests: [:inspect, :to_html, :to_latex, :to_md, :to_s]
686
-
687
- *** Output of inspect ***
688
- -----| WARNING | -----
689
- md_el(:document,[
690
- md_el(:header,[
691
- "WebKit (Safari 3.1) and the ",
692
- md_el(:abbr,["CSS"],{:title=>"Cascading Style Sheets"},[]),
693
- " @font-face declaration"
694
- ],{:level=>1},[]),
695
- md_par([
696
- "I",
697
- md_entity("rsquo"),
698
- "m a big fan of typography in general. If you check out ",
699
- md_im_link(["my homepage"], "http://elliottcable.name", nil),
700
- " or my ",
701
- md_im_link(["contact elliottcable"], "http://elliottcable.name/contact.xhtml", nil),
702
- " page, and you",
703
- md_entity("rsquo"),
704
- "re using Safari/WebKit or Opera/Kestrel, you",
705
- md_entity("rsquo"),
706
- "ll notice the typefaces (fonts, as colloquialized) are ",
707
- md_em(["very"]),
708
- " non-standard. (As of this writing, I",
709
- md_entity("rsquo"),
710
- "m using ",
711
- md_link(["Museo"],"museo"),
712
- " and ",
713
- md_link(["Diavlo"],"diavlo"),
714
- md_foot_ref("^jos"),
715
- " heavily on both.)"
716
- ]),
717
- md_par([
718
- "The internet has not be a friendly place for typohiles like myself, up to this point, at least. One might even say it was a frightful, mentally scarring environment for those akin to yours truly. We",
719
- md_entity("rsquo"),
720
- "ve been restricted to reading page after page after page on day after day after day for year after year after year abominations of markup and design enslaved by the horrible overlords we know as Lucida, Verdana, Arial, Helvetica, Geneva, Georgia, Courier, and",
721
- md_entity("hellip"),
722
- " dare I invoke ye, thou my terrible overlord? Times New Roman."
723
- ]),
724
- md_par([
725
- "Wherefore art thou, my glorious Archer? And thee as well, my beautiful Garamond? The technical restrictions of that horrible monster we know as the Web Browser hath forced us all too long to use those most banal, those most common, and those most abused, out of all of the typefaces of the world."
726
- ]),
727
- md_par([
728
- "All hyperbole aside, I",
729
- md_entity("rsquo"),
730
- "m extremely happy to see the advent of a standard ",
731
- md_code("@font-face"),
732
- " declaration in ",
733
- md_el(:abbr,["CSS"],{:title=>"Cascading Style Sheets"},[]),
734
- ". Internet Explorer first implemented a crutched, basic version of this way back in version 4, but nothing ever really came of it - their decision to create the proprietary ",
735
- md_el(:abbr,[".EOT"],{:title=>"Embedded OpenType"},[]),
736
- md_foot_ref("^eot"),
737
- " format to appease overly restrictive type foundries",
738
- md_entity("rsquo"),
739
- " worries about intellectual property (aka. the cold, hard dominatrix that we know only as Ms. Profit) truly and completely killed that initial attempt at bringing astute typography and it",
740
- md_entity("rsquo"),
741
- "s advocates to the web. This new run at ",
742
- md_code("@font-face"),
743
- " by an established, trusted, and open group (the ",
744
- md_link([
745
- "",
746
- md_el(:abbr,["W3C"],{:title=>"World Wide Web Consortium"},[]),
747
- ""
748
- ],"w3c"),
749
- " itself, responsible for helping to make much of what we use as designers on the web standard and cross-system compatible) has a much better chance, in my humble opinion - and I am quite looking forward to the consequences if it succeeds."
750
- ]),
751
- md_par([
752
- "Now, onwards to the topic of my post as declared in the header (yes, I know, a slow start - but it",
753
- md_entity("rsquo"),
754
- "s an interesting topic with an interesting history!). WebKit, the open source rendering engine behind the wonderfulness that is Safari, and how it handles the ",
755
- md_entity("lsquo"),
756
- "new",
757
- md_entity("rsquo"),
758
- " ",
759
- md_code("@font-face"),
760
- " declaration. No, it",
761
- md_entity("rsquo"),
762
- "s not really ",
763
- md_entity("lsquo"),
764
- "new",
765
- md_entity("rsquo"),
766
- ", but yes, it feels like it is."
767
- ]),
768
- md_par([
769
- "To put it simply, and to be very blunt, it",
770
- md_entity("rsquo"),
771
- "s broken."
772
- ]),
773
- md_par([
774
- "The ",
775
- md_link([
776
- md_el(:abbr,["CSS"],{:title=>"Cascading Style Sheets"},[]),
777
- " spec section"
778
- ],"spec"),
779
- " for ",
780
- md_code("@font-face"),
781
- " is very specific - typefaces are to be selected based on a wide array of criteria placed in the ",
782
- md_code("@font-face"),
783
- " declaration block itself. Various textual ",
784
- md_el(:abbr,["CSS"],{:title=>"Cascading Style Sheets"},[]),
785
- " attributes may be defined within the ",
786
- md_code("@font-face"),
787
- " declaration, and then they will be checked when the typeface is referred to later in the ",
788
- md_el(:abbr,["CSS"],{:title=>"Cascading Style Sheets"},[]),
789
- ". For instance, if I have two ",
790
- md_code("@font-face"),
791
- " declarations for the Diavlo family - one for regular text, and one for a heavier weighted version of the typeface - then I later utilize Diavlo in a ",
792
- md_code("font-family:"),
793
- " attribute, it should refer to the basic Diavlo font defined in the first ",
794
- md_code("@font-face"),
795
- ". However, if I were to do the same, but also specify a heavy ",
796
- md_code("font-weight:"),
797
- ", then it should use the heavier version of Diavlo. To place this example in code:"
798
- ]),
799
- md_el(:code,[],{:raw_code=>"@font-face {\n font-family: 'Diavlo';\n src: url(./Diavlo/Diavlo_Book.otf) format(\"opentype\");\n}\n\n@font-face {\n font-family: 'Diavlo';\n font-weight: 900;\n src: url(./Diavlo/Diavlo_Black.otf) format(\"opentype\");\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-family: 'Diavlo';\n font-weight: 900;\n}\n\ndiv#content {\n font-family: 'Diavlo';\n}"},[]),
800
- md_par([
801
- "As you can see, my headings should use the typeface defined in ",
802
- md_code("Diavlo_Black.otf"),
803
- ", while my body content should use ",
804
- md_code("Diavlo_Book.otf"),
805
- ". However, in WebKit, this doesn",
806
- md_entity("rsquo"),
807
- "t work - it completely ignores any attribute except ",
808
- md_code("font-family:"),
809
- " and ",
810
- md_code("src:"),
811
- " in a ",
812
- md_code("@font-face"),
813
- " declaration! Completely ignores them! Not only that - not ",
814
- md_em(["only"]),
815
- " that - it disregards all but the last ",
816
- md_code("@font-face"),
817
- " for a given ",
818
- md_code("font-family:"),
819
- " attribute string!"
820
- ]),
821
- md_par([
822
- "The implication here is that, to make ",
823
- md_code("@font-face"),
824
- " work as it is currently implemented in WebKit (and thus, Safari 3.1), I have to declare ",
825
- md_em(["completely imaginary, non-existent type families"]),
826
- " to satisfy WebKit alone. Here",
827
- md_entity("rsquo"),
828
- "s the method I have used in the places I current implement ",
829
- md_code("@font-face"),
830
- ":"
831
- ]),
832
- md_el(:code,[],{:raw_code=>"@font-face {\n font-family: 'Diavlo Book';\n src: url(./Diavlo/Diavlo_Book.otf) format(\"opentype\");\n}\n\n@font-face {\n font-family: 'Diavlo Black';\n src: url(./Diavlo/Diavlo_Black.otf) format(\"opentype\");\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-family: 'Diavlo Black';\n}\n\ndiv#content {\n font-family: 'Diavlo Book';\n}"},[]),
833
- md_par([
834
- "Isn",
835
- md_entity("rsquo"),
836
- "t it horrible? Seriously, my eyes, they bleed. There",
837
- md_entity("rsquo"),
838
- "s lots of problems with this far beyond the lack of semanticity when it comes to the typeface names",
839
- md_entity("hellip"),
840
- " let me see how many ways this breaks the purpose of ",
841
- md_code("@font-face"),
842
- ":"
843
- ]),
844
- md_el(:ul,[
845
- md_el(:li,[
846
- md_par([
847
- "You remove a large element our control over the display of the page."
848
- ]),
849
- md_par([
850
- "As soon as we begin to use ",
851
- md_code("@font-face"),
852
- " in our page, we can no longer make any use of any other textual control attribute - ",
853
- md_code("font-weight:"),
854
- ", ",
855
- md_code("font-style:"),
856
- ", and ",
857
- md_code("font-variant:"),
858
- " are no longer available to us, because they no longer correctly map to technical typeface variant/features."
859
- ]),
860
- md_par([
861
- "Also, many default elements are destroyed, unusable, without ",
862
- md_entity("lsquo"),
863
- "fixing",
864
- md_entity("rsquo"),
865
- " - for instance, ",
866
- md_code("<b>"),
867
- " would have no effect in a page styled for WebKit as above; We would have to specify something like ",
868
- md_code("b {font-family: 'Diavlo Black';}"),
869
- " - how broken is that? Unless we caught all such default elements and re-styled them to use the bastardized names instead of the correct attributes, lots of basic HTML formatting would be broken. I myself may never use in-document formatting (separation of design and content!), but what about comments forms? Forum posts? Direct HTML-literal quotes?"
870
- ]),
871
- md_par([
872
- "If we want to use Javascript to modify the display of the content, we can",
873
- md_entity("rsquo"),
874
- "t simply adjust the mentioned textual control attributes - we have to know and change the entire ",
875
- md_code("font-family:"),
876
- " array of strings."
877
- ])
878
- ],{:want_my_paragraph=>true},[]),
879
- md_el(:li,[
880
- md_par(["You make us very wet."]),
881
- md_par([
882
- "And by wet, I mean ",
883
- md_entity("lsquo"),
884
- "not ",
885
- md_el(:abbr,["DRY"],{:title=>"Don't Repeat Yourself"},[]),
886
- md_entity("rsquo"),
887
- ". What if we decide to change one of the bastardized font names? Or use a different font entirely? We have to go through all of our ",
888
- md_el(:abbr,["CSS"],{:title=>"Cascading Style Sheets"},[]),
889
- ", all of our Javascript, and make sure we update every occurrence of the typeface",
890
- md_entity("rsquo"),
891
- "s bastardized name."
892
- ])
893
- ],{:want_my_paragraph=>true},[]),
894
- md_el(:li,[
895
- md_par([
896
- "You remove our user",
897
- md_entity("rsquo"),
898
- "s user choice, and waste bandwidth."
899
- ]),
900
- md_par([
901
- "Since the names refer to families that don",
902
- md_entity("rsquo"),
903
- "t, in fact, exist, the browser can",
904
- md_entity("rsquo"),
905
- "t override the declaration with a user",
906
- md_entity("rsquo"),
907
- "s installed version of the typeface. This means that, regardless of whether the user already has the typeface installed on their own computer, the browser won",
908
- md_entity("rsquo"),
909
- "t use that - it doesn",
910
- md_entity("rsquo"),
911
- "t know to use ",
912
- md_entity("lsquo"),
913
- "Diavlo",
914
- md_entity("rsquo"),
915
- ", which the user has installed, because it was told to use ",
916
- md_entity("lsquo"),
917
- "Diavlo Black",
918
- md_entity("rsquo"),
919
- ", which no user in the entire world has installed on their computer."
920
- ])
921
- ],{:want_my_paragraph=>true},[])
922
- ],{},[]),
923
- md_par([
924
- "This whole thing is rather worrying - I",
925
- md_entity("rsquo"),
926
- "ve heard Opera has ",
927
- md_code("@font-face"),
928
- " support, though I haven",
929
- md_entity("rsquo"),
930
- "t had time to test this myself, so I don",
931
- md_entity("rsquo"),
932
- "t know if it actually does - or, for that matter, if it does it ",
933
- md_entity("lsquo"),
934
- "correctly",
935
- md_entity("rsquo"),
936
- ", or has the same problems as WebKit. But either way, WebKit is one of the first two implementations to ever attempt to support ",
937
- md_code("@font-face"),
938
- " (Microsoft",
939
- md_entity("rsquo"),
940
- "s unrelated ",
941
- md_code("@font-face"),
942
- " declaration notwithstanding) - I really don",
943
- md_entity("rsquo"),
944
- "t want to see it",
945
- md_entity("rsquo"),
946
- "s early mistakes carried on to FireFox in a few years, and then Internet Explorer a few decades after that. That will leave us stuck with this broken system forever, as it has been demonstrated time and time again that if nobody else supports an old standard correctly, a newcomer to the standard will not do it correctly either. I for one would really, really, hate that."
947
- ]),
948
- md_par([
949
- "In summary",
950
- md_entity("hellip"),
951
- " come on, WebKit team, this isn",
952
- md_entity("rsquo"),
953
- "t like you - you",
954
- md_entity("rsquo"),
955
- "re always the ones with the closest-to-standard implementation, and the cleanest code, and",
956
- md_entity("hellip"),
957
- " hell, overall? Webkit is the most secure/fastest browser available. But this is making me lose my faith in you, guys, please get it right. You",
958
- md_entity("rsquo"),
959
- "re pioneering a leap into the future when it comes to the Web - this is as important, or ",
960
- md_em(["more"]),
961
- " important, than Mosiac",
962
- md_entity("rsquo"),
963
- "s allowing of images was."
964
- ]),
965
- md_par([
966
- "To put it succinctly - don",
967
- md_entity("rsquo"),
968
- "t fuck this up, y",
969
- md_entity("rsquo"),
970
- "all."
971
- ]),
972
- md_ref_def("museo", "http://www.josbuivenga.demon.nl/museo.html", {:title=>"Jos Buivenga"}),
973
- md_ref_def("diavlo", "http://www.josbuivenga.demon.nl/diavlo.html", {:title=>"Jos Buivenga"}),
974
- md_el(:footnote,[
975
- md_par([
976
- "These are fonts by ",
977
- md_link(["Jos Buivenga"],"jos"),
978
- ", quite the amazing person. His (free) fonts are, uniquely, released for use on the web in ",
979
- md_code("@font-face"),
980
- " declarations - unlike the vast majority of other (even free to download) typefaces, which have ridiculously restricting licenses and terms of use statements. Props, Jos - you",
981
- md_entity("rsquo"),
982
- "re a pioneer, and deserve recognition as such."
983
- ])
984
- ],{:footnote_id=>"^jos"},[]),
985
- md_el(:abbr_def,[],{:abbr=>"CSS",:text=>"Cascading Style Sheets"},[]),
986
- md_el(:abbr_def,[],{:abbr=>".EOT",:text=>"Embedded OpenType"},[]),
987
- md_el(:footnote,[
988
- md_par([
989
- "To give Microsoft a little credit, something I rarely do",
990
- md_entity("hellip"),
991
- " Yes, I",
992
- md_entity("rsquo"),
993
- "m aware Microsoft submitted EOT to the ",
994
- md_el(:abbr,["W3C"],{:title=>"World Wide Web Consortium"},[]),
995
- " as a proposal - the problem isn",
996
- md_entity("rsquo"),
997
- "t with their attempts to make it non-proprietary, but with the basic concept of making typefaces on the web DRMed. Look what such attempts have done to the music and video industry - simply decimated it. Do we really want to see the same thing happen to our beloved medium as typography moves into the 21st century?"
998
- ])
999
- ],{:footnote_id=>"^eot"},[]),
1000
- md_el(:abbr_def,[],{:abbr=>"W3C",:text=>"World Wide Web Consortium"},[]),
1001
- md_ref_def("w3c", "http://w3c.org", {:title=>"World Wide Web Consortium"}),
1002
- md_ref_def("spec", "http://?", {:title=>nil}),
1003
- md_el(:abbr_def,[],{:abbr=>"DRY",:text=>"Don't Repeat Yourself"},[]),
1004
- md_ref_def("jos", "jos", {:title=>nil})
1005
- ],{},[])
1006
- *** Output of to_html ***
1007
- -----| WARNING | -----
1008
- <h1 id='webkit_safari_31_and_the_css_fontface_declaration'>WebKit (Safari 3.1) and the <abbr title='Cascading Style Sheets'>CSS</abbr> @font-face declaration</h1>
1009
-
1010
- <p>I&#8217;m a big fan of typography in general. If you check out <a href='http://elliottcable.name'>my homepage</a> or my <a href='http://elliottcable.name/contact.xhtml'>contact elliottcable</a> page, and you&#8217;re using Safari/WebKit or Opera/Kestrel, you&#8217;ll notice the typefaces (fonts, as colloquialized) are <em>very</em> non-standard. (As of this writing, I&#8217;m using <a href='http://www.josbuivenga.demon.nl/museo.html' title='Jos Buivenga'>Museo</a> and <a href='http://www.josbuivenga.demon.nl/diavlo.html' title='Jos Buivenga'>Diavlo</a><sup id='fnref:1'><a href='#fn:1' rel='footnote'>1</a></sup> heavily on both.)</p>
1011
-
1012
- <p>The internet has not be a friendly place for typohiles like myself, up to this point, at least. One might even say it was a frightful, mentally scarring environment for those akin to yours truly. We&#8217;ve been restricted to reading page after page after page on day after day after day for year after year after year abominations of markup and design enslaved by the horrible overlords we know as Lucida, Verdana, Arial, Helvetica, Geneva, Georgia, Courier, and&#8230; dare I invoke ye, thou my terrible overlord? Times New Roman.</p>
1013
-
1014
- <p>Wherefore art thou, my glorious Archer? And thee as well, my beautiful Garamond? The technical restrictions of that horrible monster we know as the Web Browser hath forced us all too long to use those most banal, those most common, and those most abused, out of all of the typefaces of the world.</p>
1015
-
1016
- <p>All hyperbole aside, I&#8217;m extremely happy to see the advent of a standard <code>@font-face</code> declaration in <abbr title='Cascading Style Sheets'>CSS</abbr>. Internet Explorer first implemented a crutched, basic version of this way back in version 4, but nothing ever really came of it - their decision to create the proprietary <abbr title='Embedded OpenType'>.EOT</abbr><sup id='fnref:2'><a href='#fn:2' rel='footnote'>2</a></sup> format to appease overly restrictive type foundries&#8217; worries about intellectual property (aka. the cold, hard dominatrix that we know only as Ms. Profit) truly and completely killed that initial attempt at bringing astute typography and it&#8217;s advocates to the web. This new run at <code>@font-face</code> by an established, trusted, and open group (the <a href='http://w3c.org' title='World Wide Web Consortium'><abbr title='World Wide Web Consortium'>W3C</abbr></a> itself, responsible for helping to make much of what we use as designers on the web standard and cross-system compatible) has a much better chance, in my humble opinion - and I am quite looking forward to the consequences if it succeeds.</p>
1017
-
1018
- <p>Now, onwards to the topic of my post as declared in the header (yes, I know, a slow start - but it&#8217;s an interesting topic with an interesting history!). WebKit, the open source rendering engine behind the wonderfulness that is Safari, and how it handles the &#8216;new&#8217; <code>@font-face</code> declaration. No, it&#8217;s not really &#8216;new&#8217;, but yes, it feels like it is.</p>
1019
-
1020
- <p>To put it simply, and to be very blunt, it&#8217;s broken.</p>
1021
-
1022
- <p>The <a href='http://?'><abbr title='Cascading Style Sheets'>CSS</abbr> spec section</a> for <code>@font-face</code> is very specific - typefaces are to be selected based on a wide array of criteria placed in the <code>@font-face</code> declaration block itself. Various textual <abbr title='Cascading Style Sheets'>CSS</abbr> attributes may be defined within the <code>@font-face</code> declaration, and then they will be checked when the typeface is referred to later in the <abbr title='Cascading Style Sheets'>CSS</abbr>. For instance, if I have two <code>@font-face</code> declarations for the Diavlo family - one for regular text, and one for a heavier weighted version of the typeface - then I later utilize Diavlo in a <code>font-family:</code> attribute, it should refer to the basic Diavlo font defined in the first <code>@font-face</code>. However, if I were to do the same, but also specify a heavy <code>font-weight:</code>, then it should use the heavier version of Diavlo. To place this example in code:</p>
1023
-
1024
- <pre><code>@font-face {
1025
- font-family: &#39;Diavlo&#39;;
1026
- src: url(./Diavlo/Diavlo_Book.otf) format(&quot;opentype&quot;);
1027
- }
1028
-
1029
- @font-face {
1030
- font-family: &#39;Diavlo&#39;;
1031
- font-weight: 900;
1032
- src: url(./Diavlo/Diavlo_Black.otf) format(&quot;opentype&quot;);
1033
- }
1034
-
1035
- h1, h2, h3, h4, h5, h6 {
1036
- font-family: &#39;Diavlo&#39;;
1037
- font-weight: 900;
1038
- }
1039
-
1040
- div#content {
1041
- font-family: &#39;Diavlo&#39;;
1042
- }</code></pre>
1043
-
1044
- <p>As you can see, my headings should use the typeface defined in <code>Diavlo_Black.otf</code>, while my body content should use <code>Diavlo_Book.otf</code>. However, in WebKit, this doesn&#8217;t work - it completely ignores any attribute except <code>font-family:</code> and <code>src:</code> in a <code>@font-face</code> declaration! Completely ignores them! Not only that - not <em>only</em> that - it disregards all but the last <code>@font-face</code> for a given <code>font-family:</code> attribute string!</p>
1045
-
1046
- <p>The implication here is that, to make <code>@font-face</code> work as it is currently implemented in WebKit (and thus, Safari 3.1), I have to declare <em>completely imaginary, non-existent type families</em> to satisfy WebKit alone. Here&#8217;s the method I have used in the places I current implement <code>@font-face</code>:</p>
1047
-
1048
- <pre><code>@font-face {
1049
- font-family: &#39;Diavlo Book&#39;;
1050
- src: url(./Diavlo/Diavlo_Book.otf) format(&quot;opentype&quot;);
1051
- }
1052
-
1053
- @font-face {
1054
- font-family: &#39;Diavlo Black&#39;;
1055
- src: url(./Diavlo/Diavlo_Black.otf) format(&quot;opentype&quot;);
1056
- }
1057
-
1058
- h1, h2, h3, h4, h5, h6 {
1059
- font-family: &#39;Diavlo Black&#39;;
1060
- }
1061
-
1062
- div#content {
1063
- font-family: &#39;Diavlo Book&#39;;
1064
- }</code></pre>
1065
-
1066
- <p>Isn&#8217;t it horrible? Seriously, my eyes, they bleed. There&#8217;s lots of problems with this far beyond the lack of semanticity when it comes to the typeface names&#8230; let me see how many ways this breaks the purpose of <code>@font-face</code>:</p>
1067
-
1068
- <ul>
1069
- <li>
1070
- <p>You remove a large element our control over the display of the page.</p>
1071
-
1072
- <p>As soon as we begin to use <code>@font-face</code> in our page, we can no longer make any use of any other textual control attribute - <code>font-weight:</code>, <code>font-style:</code>, and <code>font-variant:</code> are no longer available to us, because they no longer correctly map to technical typeface variant/features.</p>
1073
-
1074
- <p>Also, many default elements are destroyed, unusable, without &#8216;fixing&#8217; - for instance, <code>&lt;b&gt;</code> would have no effect in a page styled for WebKit as above; We would have to specify something like <code>b {font-family: &#39;Diavlo Black&#39;;}</code> - how broken is that? Unless we caught all such default elements and re-styled them to use the bastardized names instead of the correct attributes, lots of basic HTML formatting would be broken. I myself may never use in-document formatting (separation of design and content!), but what about comments forms? Forum posts? Direct HTML-literal quotes?</p>
1075
-
1076
- <p>If we want to use Javascript to modify the display of the content, we can&#8217;t simply adjust the mentioned textual control attributes - we have to know and change the entire <code>font-family:</code> array of strings.</p>
1077
- </li>
1078
-
1079
- <li>
1080
- <p>You make us very wet.</p>
1081
-
1082
- <p>And by wet, I mean &#8216;not <abbr title='Don&apos;t Repeat Yourself'>DRY</abbr>&#8217;. What if we decide to change one of the bastardized font names? Or use a different font entirely? We have to go through all of our <abbr title='Cascading Style Sheets'>CSS</abbr>, all of our Javascript, and make sure we update every occurrence of the typeface&#8217;s bastardized name.</p>
1083
- </li>
1084
-
1085
- <li>
1086
- <p>You remove our user&#8217;s user choice, and waste bandwidth.</p>
1087
-
1088
- <p>Since the names refer to families that don&#8217;t, in fact, exist, the browser can&#8217;t override the declaration with a user&#8217;s installed version of the typeface. This means that, regardless of whether the user already has the typeface installed on their own computer, the browser won&#8217;t use that - it doesn&#8217;t know to use &#8216;Diavlo&#8217;, which the user has installed, because it was told to use &#8216;Diavlo Black&#8217;, which no user in the entire world has installed on their computer.</p>
1089
- </li>
1090
- </ul>
1091
-
1092
- <p>This whole thing is rather worrying - I&#8217;ve heard Opera has <code>@font-face</code> support, though I haven&#8217;t had time to test this myself, so I don&#8217;t know if it actually does - or, for that matter, if it does it &#8216;correctly&#8217;, or has the same problems as WebKit. But either way, WebKit is one of the first two implementations to ever attempt to support <code>@font-face</code> (Microsoft&#8217;s unrelated <code>@font-face</code> declaration notwithstanding) - I really don&#8217;t want to see it&#8217;s early mistakes carried on to FireFox in a few years, and then Internet Explorer a few decades after that. That will leave us stuck with this broken system forever, as it has been demonstrated time and time again that if nobody else supports an old standard correctly, a newcomer to the standard will not do it correctly either. I for one would really, really, hate that.</p>
1093
-
1094
- <p>In summary&#8230; come on, WebKit team, this isn&#8217;t like you - you&#8217;re always the ones with the closest-to-standard implementation, and the cleanest code, and&#8230; hell, overall? Webkit is the most secure/fastest browser available. But this is making me lose my faith in you, guys, please get it right. You&#8217;re pioneering a leap into the future when it comes to the Web - this is as important, or <em>more</em> important, than Mosiac&#8217;s allowing of images was.</p>
1095
-
1096
- <p>To put it succinctly - don&#8217;t fuck this up, y&#8217;all.</p>
1097
- <div class='footnotes'><hr /><ol><li id='fn:1'>
1098
- <p>These are fonts by <a href='jos'>Jos Buivenga</a>, quite the amazing person. His (free) fonts are, uniquely, released for use on the web in <code>@font-face</code> declarations - unlike the vast majority of other (even free to download) typefaces, which have ridiculously restricting licenses and terms of use statements. Props, Jos - you&#8217;re a pioneer, and deserve recognition as such.</p>
1099
- <a href='#fnref:1' rev='footnote'>&#8617;</a></li><li id='fn:2'>
1100
- <p>To give Microsoft a little credit, something I rarely do&#8230; Yes, I&#8217;m aware Microsoft submitted EOT to the <abbr title='World Wide Web Consortium'>W3C</abbr> as a proposal - the problem isn&#8217;t with their attempts to make it non-proprietary, but with the basic concept of making typefaces on the web DRMed. Look what such attempts have done to the music and video industry - simply decimated it. Do we really want to see the same thing happen to our beloved medium as typography moves into the 21st century?</p>
1101
- <a href='#fnref:2' rev='footnote'>&#8617;</a></li></ol></div>
1102
- *** Output of to_latex ***
1103
- -----| WARNING | -----
1104
- \hypertarget{webkit_safari_31_and_the_css_fontface_declaration}{}\section*{{WebKit (Safari 3.1) and the CSS @font-face declaration}}\label{webkit_safari_31_and_the_css_fontface_declaration}
1105
-
1106
- I'{}m a big fan of typography in general. If you check out \href{http://elliottcable.name}{my homepage} or my \href{http://elliottcable.name/contact.xhtml}{contact elliottcable} page, and you'{}re using Safari/WebKit or Opera/Kestrel, you'{}ll notice the typefaces (fonts, as colloquialized) are \emph{very} non-standard. (As of this writing, I'{}m using \href{http://www.josbuivenga.demon.nl/museo.html}{Museo} and \href{http://www.josbuivenga.demon.nl/diavlo.html}{Diavlo}\footnote{These are fonts by \href{jos}{Jos Buivenga}, quite the amazing person. His (free) fonts are, uniquely, released for use on the web in {\colorbox[rgb]{1.00,0.93,1.00}{\tt \char64font\char45face}} declarations - unlike the vast majority of other (even free to download) typefaces, which have ridiculously restricting licenses and terms of use statements. Props, Jos - you'{}re a pioneer, and deserve recognition as such.} heavily on both.)
1107
-
1108
- The internet has not be a friendly place for typohiles like myself, up to this point, at least. One might even say it was a frightful, mentally scarring environment for those akin to yours truly. We'{}ve been restricted to reading page after page after page on day after day after day for year after year after year abominations of markup and design enslaved by the horrible overlords we know as Lucida, Verdana, Arial, Helvetica, Geneva, Georgia, Courier, and\ldots{} dare I invoke ye, thou my terrible overlord? Times New Roman.
1109
-
1110
- Wherefore art thou, my glorious Archer? And thee as well, my beautiful Garamond? The technical restrictions of that horrible monster we know as the Web Browser hath forced us all too long to use those most banal, those most common, and those most abused, out of all of the typefaces of the world.
1111
-
1112
- All hyperbole aside, I'{}m extremely happy to see the advent of a standard {\colorbox[rgb]{1.00,0.93,1.00}{\tt \char64font\char45face}} declaration in CSS. Internet Explorer first implemented a crutched, basic version of this way back in version 4, but nothing ever really came of it - their decision to create the proprietary .EOT\footnote{To give Microsoft a little credit, something I rarely do\ldots{} Yes, I'{}m aware Microsoft submitted EOT to the W3C as a proposal - the problem isn'{}t with their attempts to make it non-proprietary, but with the basic concept of making typefaces on the web DRMed. Look what such attempts have done to the music and video industry - simply decimated it. Do we really want to see the same thing happen to our beloved medium as typography moves into the 21st century?} format to appease overly restrictive type foundries'{} worries about intellectual property (aka. the cold, hard dominatrix that we know only as Ms. Profit) truly and completely killed that initial attempt at bringing astute typography and it'{}s advocates to the web. This new run at {\colorbox[rgb]{1.00,0.93,1.00}{\tt \char64font\char45face}} by an established, trusted, and open group (the \href{http://w3c.org}{W3C} itself, responsible for helping to make much of what we use as designers on the web standard and cross-system compatible) has a much better chance, in my humble opinion - and I am quite looking forward to the consequences if it succeeds.
1113
-
1114
- Now, onwards to the topic of my post as declared in the header (yes, I know, a slow start - but it'{}s an interesting topic with an interesting history!). WebKit, the open source rendering engine behind the wonderfulness that is Safari, and how it handles the `{}new'{} {\colorbox[rgb]{1.00,0.93,1.00}{\tt \char64font\char45face}} declaration. No, it'{}s not really `{}new'{}, but yes, it feels like it is.
1115
-
1116
- To put it simply, and to be very blunt, it'{}s broken.
1117
-
1118
- The \href{http://?}{CSS spec section} for {\colorbox[rgb]{1.00,0.93,1.00}{\tt \char64font\char45face}} is very specific - typefaces are to be selected based on a wide array of criteria placed in the {\colorbox[rgb]{1.00,0.93,1.00}{\tt \char64font\char45face}} declaration block itself. Various textual CSS attributes may be defined within the {\colorbox[rgb]{1.00,0.93,1.00}{\tt \char64font\char45face}} declaration, and then they will be checked when the typeface is referred to later in the CSS. For instance, if I have two {\colorbox[rgb]{1.00,0.93,1.00}{\tt \char64font\char45face}} declarations for the Diavlo family - one for regular text, and one for a heavier weighted version of the typeface - then I later utilize Diavlo in a {\colorbox[rgb]{1.00,0.93,1.00}{\tt font\char45family\char58}} attribute, it should refer to the basic Diavlo font defined in the first {\colorbox[rgb]{1.00,0.93,1.00}{\tt \char64font\char45face}}. However, if I were to do the same, but also specify a heavy {\colorbox[rgb]{1.00,0.93,1.00}{\tt font\char45weight\char58}}, then it should use the heavier version of Diavlo. To place this example in code:
1119
-
1120
- \begin{verbatim}@font-face {
1121
- font-family: 'Diavlo';
1122
- src: url(./Diavlo/Diavlo_Book.otf) format("opentype");
1123
- }
1124
-
1125
- @font-face {
1126
- font-family: 'Diavlo';
1127
- font-weight: 900;
1128
- src: url(./Diavlo/Diavlo_Black.otf) format("opentype");
1129
- }
1130
-
1131
- h1, h2, h3, h4, h5, h6 {
1132
- font-family: 'Diavlo';
1133
- font-weight: 900;
1134
- }
1135
-
1136
- div#content {
1137
- font-family: 'Diavlo';
1138
- }\end{verbatim}
1139
- As you can see, my headings should use the typeface defined in {\colorbox[rgb]{1.00,0.93,1.00}{\tt Diavlo\char95Black\char46otf}}, while my body content should use {\colorbox[rgb]{1.00,0.93,1.00}{\tt Diavlo\char95Book\char46otf}}. However, in WebKit, this doesn'{}t work - it completely ignores any attribute except {\colorbox[rgb]{1.00,0.93,1.00}{\tt font\char45family\char58}} and {\colorbox[rgb]{1.00,0.93,1.00}{\tt src\char58}} in a {\colorbox[rgb]{1.00,0.93,1.00}{\tt \char64font\char45face}} declaration! Completely ignores them! Not only that - not \emph{only} that - it disregards all but the last {\colorbox[rgb]{1.00,0.93,1.00}{\tt \char64font\char45face}} for a given {\colorbox[rgb]{1.00,0.93,1.00}{\tt font\char45family\char58}} attribute string!
1140
-
1141
- The implication here is that, to make {\colorbox[rgb]{1.00,0.93,1.00}{\tt \char64font\char45face}} work as it is currently implemented in WebKit (and thus, Safari 3.1), I have to declare \emph{completely imaginary, non-existent type families} to satisfy WebKit alone. Here'{}s the method I have used in the places I current implement {\colorbox[rgb]{1.00,0.93,1.00}{\tt \char64font\char45face}}:
1142
-
1143
- \begin{verbatim}@font-face {
1144
- font-family: 'Diavlo Book';
1145
- src: url(./Diavlo/Diavlo_Book.otf) format("opentype");
1146
- }
1147
-
1148
- @font-face {
1149
- font-family: 'Diavlo Black';
1150
- src: url(./Diavlo/Diavlo_Black.otf) format("opentype");
1151
- }
1152
-
1153
- h1, h2, h3, h4, h5, h6 {
1154
- font-family: 'Diavlo Black';
1155
- }
1156
-
1157
- div#content {
1158
- font-family: 'Diavlo Book';
1159
- }\end{verbatim}
1160
- Isn'{}t it horrible? Seriously, my eyes, they bleed. There'{}s lots of problems with this far beyond the lack of semanticity when it comes to the typeface names\ldots{} let me see how many ways this breaks the purpose of {\colorbox[rgb]{1.00,0.93,1.00}{\tt \char64font\char45face}}:
1161
-
1162
- \begin{itemize}%
1163
- \item You remove a large element our control over the display of the page.
1164
-
1165
- As soon as we begin to use {\colorbox[rgb]{1.00,0.93,1.00}{\tt \char64font\char45face}} in our page, we can no longer make any use of any other textual control attribute - {\colorbox[rgb]{1.00,0.93,1.00}{\tt font\char45weight\char58}}, {\colorbox[rgb]{1.00,0.93,1.00}{\tt font\char45style\char58}}, and {\colorbox[rgb]{1.00,0.93,1.00}{\tt font\char45variant\char58}} are no longer available to us, because they no longer correctly map to technical typeface variant/features.
1166
-
1167
- Also, many default elements are destroyed, unusable, without `{}fixing'{} - for instance, {\colorbox[rgb]{1.00,0.93,1.00}{\tt \char60b\char62}} would have no effect in a page styled for WebKit as above; We would have to specify something like {\colorbox[rgb]{1.00,0.93,1.00}{\tt b~\char123font\char45family\char58~\char39Diavlo~Black\char39\char59\char125}} - how broken is that? Unless we caught all such default elements and re-styled them to use the bastardized names instead of the correct attributes, lots of basic HTML formatting would be broken. I myself may never use in-document formatting (separation of design and content!), but what about comments forms? Forum posts? Direct HTML-literal quotes?
1168
-
1169
- If we want to use Javascript to modify the display of the content, we can'{}t simply adjust the mentioned textual control attributes - we have to know and change the entire {\colorbox[rgb]{1.00,0.93,1.00}{\tt font\char45family\char58}} array of strings.
1170
-
1171
-
1172
- \item You make us very wet.
1173
-
1174
- And by wet, I mean `{}not DRY'{}. What if we decide to change one of the bastardized font names? Or use a different font entirely? We have to go through all of our CSS, all of our Javascript, and make sure we update every occurrence of the typeface'{}s bastardized name.
1175
-
1176
-
1177
- \item You remove our user'{}s user choice, and waste bandwidth.
1178
-
1179
- Since the names refer to families that don'{}t, in fact, exist, the browser can'{}t override the declaration with a user'{}s installed version of the typeface. This means that, regardless of whether the user already has the typeface installed on their own computer, the browser won'{}t use that - it doesn'{}t know to use `{}Diavlo'{}, which the user has installed, because it was told to use `{}Diavlo Black'{}, which no user in the entire world has installed on their computer.
1180
-
1181
-
1182
-
1183
- \end{itemize}
1184
- This whole thing is rather worrying - I'{}ve heard Opera has {\colorbox[rgb]{1.00,0.93,1.00}{\tt \char64font\char45face}} support, though I haven'{}t had time to test this myself, so I don'{}t know if it actually does - or, for that matter, if it does it `{}correctly'{}, or has the same problems as WebKit. But either way, WebKit is one of the first two implementations to ever attempt to support {\colorbox[rgb]{1.00,0.93,1.00}{\tt \char64font\char45face}} (Microsoft'{}s unrelated {\colorbox[rgb]{1.00,0.93,1.00}{\tt \char64font\char45face}} declaration notwithstanding) - I really don'{}t want to see it'{}s early mistakes carried on to FireFox in a few years, and then Internet Explorer a few decades after that. That will leave us stuck with this broken system forever, as it has been demonstrated time and time again that if nobody else supports an old standard correctly, a newcomer to the standard will not do it correctly either. I for one would really, really, hate that.
1185
-
1186
- In summary\ldots{} come on, WebKit team, this isn'{}t like you - you'{}re always the ones with the closest-to-standard implementation, and the cleanest code, and\ldots{} hell, overall? Webkit is the most secure/fastest browser available. But this is making me lose my faith in you, guys, please get it right. You'{}re pioneering a leap into the future when it comes to the Web - this is as important, or \emph{more} important, than Mosiac'{}s allowing of images was.
1187
-
1188
- To put it succinctly - don'{}t fuck this up, y'{}all.
1189
- *** Output of to_md ***
1190
- -----| WARNING | -----
1191
- WebKit (Safari 3.1) and the CSS @font-face declarationI m a big fan of typography in general.
1192
- If you check out my homepageor my
1193
- contact elliottcablepage, and you re
1194
- using Safari/WebKit or Opera/Kestrel,
1195
- you ll notice the typefaces (fonts, as
1196
- colloquialized) are verynon-standard.
1197
- (As of this writing, I m using Museoand
1198
- Diavloheavily on both.)
1199
-
1200
- The internet has not be a friendly
1201
- place for typohiles like myself, up to
1202
- this point, at least. One might even
1203
- say it was a frightful, mentally
1204
- scarring environment for those akin to
1205
- yours truly. We ve been restricted to
1206
- reading page after page after page on
1207
- day after day after day for year after
1208
- year after year abominations of markup
1209
- and design enslaved by the horrible
1210
- overlords we know as Lucida, Verdana,
1211
- Arial, Helvetica, Geneva, Georgia,
1212
- Courier, and dare I invoke ye, thou my
1213
- terrible overlord? Times New Roman.
1214
-
1215
- Wherefore art thou, my glorious Archer?
1216
- And thee as well, my beautiful
1217
- Garamond? The technical restrictions of
1218
- that horrible monster we know as the
1219
- Web Browser hath forced us all too long
1220
- to use those most banal, those most
1221
- common, and those most abused, out of
1222
- all of the typefaces of the world.
1223
-
1224
- All hyperbole aside, I m extremely
1225
- happy to see the advent of a standard
1226
- declaration in CSS. Internet Explorer
1227
- first implemented a crutched, basic
1228
- version of this way back in version 4,
1229
- but nothing ever really came of it -
1230
- their decision to create the
1231
- proprietary .EOTformat to appease
1232
- overly restrictive type foundries
1233
- worries about intellectual property
1234
- (aka. the cold, hard dominatrix that we
1235
- know only as Ms. Profit) truly and
1236
- completely killed that initial attempt
1237
- at bringing astute typography and it s
1238
- advocates to the web. This new run at
1239
- by an established, trusted, and open
1240
- group (the W3Citself, responsible for
1241
- helping to make much of what we use as
1242
- designers on the web standard and
1243
- cross-system compatible) has a much
1244
- better chance, in my humble opinion -
1245
- and I am quite looking forward to the
1246
- consequences if it succeeds.
1247
-
1248
- Now, onwards to the topic of my post as
1249
- declared in the header (yes, I know, a
1250
- slow start - but it s an interesting
1251
- topic with an interesting history!).
1252
- WebKit, the open source rendering
1253
- engine behind the wonderfulness that is
1254
- Safari, and how it handles the new
1255
- declaration. No, it s not really new ,
1256
- but yes, it feels like it is.
1257
-
1258
- To put it simply, and to be very blunt,
1259
- it s broken.
1260
-
1261
- The CSS spec sectionfor is very
1262
- specific - typefaces are to be selected
1263
- based on a wide array of criteria
1264
- placed in the declaration block itself.
1265
- Various textual CSSattributes may be
1266
- defined within the declaration, and
1267
- then they will be checked when the
1268
- typeface is referred to later in the CSS
1269
- . For instance, if I have two
1270
- declarations for the Diavlo family -
1271
- one for regular text, and one for a
1272
- heavier weighted version of the
1273
- typeface - then I later utilize Diavlo
1274
- in a attribute, it should refer to the
1275
- basic Diavlo font defined in the first
1276
- . However, if I were to do the same,
1277
- but also specify a heavy , then it
1278
- should use the heavier version of
1279
- Diavlo. To place this example in code:
1280
-
1281
- As you can see, my headings should use
1282
- the typeface defined in , while my body
1283
- content should use . However, in
1284
- WebKit, this doesn t work - it
1285
- completely ignores any attribute except
1286
- and in a declaration! Completely
1287
- ignores them! Not only that - not only
1288
- that - it disregards all but the last
1289
- for a given attribute string!
1290
-
1291
- The implication here is that, to make
1292
- work as it is currently implemented in
1293
- WebKit (and thus, Safari 3.1), I have
1294
- to declare
1295
- completely imaginary, non-existent type families
1296
- to satisfy WebKit alone. Here s the
1297
- method I have used in the places I
1298
- current implement :
1299
-
1300
- Isn t it horrible? Seriously, my eyes,
1301
- they bleed. There s lots of problems
1302
- with this far beyond the lack of
1303
- semanticity when it comes to the
1304
- typeface names let me see how many ways
1305
- this breaks the purpose of :
1306
-
1307
- -You remove a large element our control over the display of the page.
1308
- As soon as we begin to use in our page, we can no longer make any use of any other textual control attribute - , , and are no longer available to us, because they no longer correctly map to technical typeface variant/features.
1309
- Also, many default elements are destroyed, unusable, without fixing - for instance, would have no effect in a page styled for WebKit as above; We would have to specify something like - how broken is that? Unless we caught all such default elements and re-styled them to use the bastardized names instead of the correct attributes, lots of basic HTML formatting would be broken. I myself may never use in-document formatting (separation of design and content!), but what about comments forms? Forum posts? Direct HTML-literal quotes?
1310
- If we want to use Javascript to modify the display of the content, we cant simply adjust the mentioned textual control attributes - we have to know and change the entire array of strings.
1311
- -ou make us very wet.
1312
- And by wet, I mean not DRY. What if we decide to change one of the bastardized font names? Or use a different font entirely? We have to go through all of our CSS, all of our Javascript, and make sure we update every occurrence of the typefaces bastardized name.
1313
- -You remove our users user choice, and waste bandwidth.
1314
- Since the names refer to families that dont, in fact, exist, the browser cant override the declaration with a users installed version of the typeface. This means that, regardless of whether the user already has the typeface installed on their own computer, the browser wont use that - it doesnt know to use Diavlo, which the user has installed, because it was told to use Diavlo Black, which no user in the entire world has installed on their computer.
1315
-
1316
- This whole thing is rather worrying - I
1317
- ve heard Opera has support, though I
1318
- haven t had time to test this myself,
1319
- so I don t know if it actually does -
1320
- or, for that matter, if it does it
1321
- correctly , or has the same problems as
1322
- WebKit. But either way, WebKit is one
1323
- of the first two implementations to
1324
- ever attempt to support (Microsoft s
1325
- unrelated declaration notwithstanding)
1326
- - I really don t want to see it s early
1327
- mistakes carried on to FireFox in a few
1328
- years, and then Internet Explorer a few
1329
- decades after that. That will leave us
1330
- stuck with this broken system forever,
1331
- as it has been demonstrated time and
1332
- time again that if nobody else supports
1333
- an old standard correctly, a newcomer
1334
- to the standard will not do it
1335
- correctly either. I for one would
1336
- really, really, hate that.
1337
-
1338
- In summary come on, WebKit team, this
1339
- isn t like you - you re always the ones
1340
- with the closest-to-standard
1341
- implementation, and the cleanest code,
1342
- and hell, overall? Webkit is the most
1343
- secure/fastest browser available. But
1344
- this is making me lose my faith in you,
1345
- guys, please get it right. You re
1346
- pioneering a leap into the future when
1347
- it comes to the Web - this is as
1348
- important, or moreimportant, than
1349
- Mosiac s allowing of images was.
1350
-
1351
- To put it succinctly - don t fuck this
1352
- up, y all.
1353
-
1354
- These are fonts by Jos Buivenga, quite
1355
- the amazing person. His (free) fonts
1356
- are, uniquely, released for use on the
1357
- web in declarations - unlike the vast
1358
- majority of other (even free to
1359
- download) typefaces, which have
1360
- ridiculously restricting licenses and
1361
- terms of use statements. Props, Jos -
1362
- you re a pioneer, and deserve
1363
- recognition as such.
1364
-
1365
- *[CSS]: Cascading Style Sheets
1366
- *[.EOT]: Embedded OpenType
1367
- To give Microsoft a little credit,
1368
- something I rarely do Yes, I m aware
1369
- Microsoft submitted EOT to the W3Cas a
1370
- proposal - the problem isn t with their
1371
- attempts to make it non-proprietary,
1372
- but with the basic concept of making
1373
- typefaces on the web DRMed. Look what
1374
- such attempts have done to the music
1375
- and video industry - simply decimated
1376
- it. Do we really want to see the same
1377
- thing happen to our beloved medium as
1378
- typography moves into the 21st century?
1379
-
1380
- *[W3C]: World Wide Web Consortium
1381
- *[DRY]: Don't Repeat Yourself
1382
- *** Output of to_s ***
1383
- -----| WARNING | -----
1384
- WebKit (Safari 3.1) and the CSS @font-face declarationIm a big fan of typography in general. If you check out my homepage or my contact elliottcable page, and youre using Safari/WebKit or Opera/Kestrel, youll notice the typefaces (fonts, as colloquialized) are very non-standard. (As of this writing, Im using Museo and Diavlo heavily on both.)The internet has not be a friendly place for typohiles like myself, up to this point, at least. One might even say it was a frightful, mentally scarring environment for those akin to yours truly. Weve been restricted to reading page after page after page on day after day after day for year after year after year abominations of markup and design enslaved by the horrible overlords we know as Lucida, Verdana, Arial, Helvetica, Geneva, Georgia, Courier, and dare I invoke ye, thou my terrible overlord? Times New Roman.Wherefore art thou, my glorious Archer? And thee as well, my beautiful Garamond? The technical restrictions of that horrible monster we know as the Web Browser hath forced us all too long to use those most banal, those most common, and those most abused, out of all of the typefaces of the world.All hyperbole aside, Im extremely happy to see the advent of a standard declaration in CSS. Internet Explorer first implemented a crutched, basic version of this way back in version 4, but nothing ever really came of it - their decision to create the proprietary .EOT format to appease overly restrictive type foundries worries about intellectual property (aka. the cold, hard dominatrix that we know only as Ms. Profit) truly and completely killed that initial attempt at bringing astute typography and its advocates to the web. This new run at by an established, trusted, and open group (the W3C itself, responsible for helping to make much of what we use as designers on the web standard and cross-system compatible) has a much better chance, in my humble opinion - and I am quite looking forward to the consequences if it succeeds.Now, onwards to the topic of my post as declared in the header (yes, I know, a slow start - but its an interesting topic with an interesting history!). WebKit, the open source rendering engine behind the wonderfulness that is Safari, and how it handles the new declaration. No, its not really new, but yes, it feels like it is.To put it simply, and to be very blunt, its broken.The CSS spec section for is very specific - typefaces are to be selected based on a wide array of criteria placed in the declaration block itself. Various textual CSS attributes may be defined within the declaration, and then they will be checked when the typeface is referred to later in the CSS. For instance, if I have two declarations for the Diavlo family - one for regular text, and one for a heavier weighted version of the typeface - then I later utilize Diavlo in a attribute, it should refer to the basic Diavlo font defined in the first . However, if I were to do the same, but also specify a heavy , then it should use the heavier version of Diavlo. To place this example in code:As you can see, my headings should use the typeface defined in , while my body content should use . However, in WebKit, this doesnt work - it completely ignores any attribute except and in a declaration! Completely ignores them! Not only that - not only that - it disregards all but the last for a given attribute string!The implication here is that, to make work as it is currently implemented in WebKit (and thus, Safari 3.1), I have to declare completely imaginary, non-existent type families to satisfy WebKit alone. Heres the method I have used in the places I current implement :Isnt it horrible? Seriously, my eyes, they bleed. Theres lots of problems with this far beyond the lack of semanticity when it comes to the typeface names let me see how many ways this breaks the purpose of :You remove a large element our control over the display of the page.As soon as we begin to use in our page, we can no longer make any use of any other textual control attribute - , , and are no longer available to us, because they no longer correctly map to technical typeface variant/features.Also, many default elements are destroyed, unusable, without fixing - for instance, would have no effect in a page styled for WebKit as above; We would have to specify something like - how broken is that? Unless we caught all such default elements and re-styled them to use the bastardized names instead of the correct attributes, lots of basic HTML formatting would be broken. I myself may never use in-document formatting (separation of design and content!), but what about comments forms? Forum posts? Direct HTML-literal quotes?If we want to use Javascript to modify the display of the content, we cant simply adjust the mentioned textual control attributes - we have to know and change the entire array of strings.You make us very wet.And by wet, I mean not DRY. What if we decide to change one of the bastardized font names? Or use a different font entirely? We have to go through all of our CSS, all of our Javascript, and make sure we update every occurrence of the typefaces bastardized name.You remove our users user choice, and waste bandwidth.Since the names refer to families that dont, in fact, exist, the browser cant override the declaration with a users installed version of the typeface. This means that, regardless of whether the user already has the typeface installed on their own computer, the browser wont use that - it doesnt know to use Diavlo, which the user has installed, because it was told to use Diavlo Black, which no user in the entire world has installed on their computer.This whole thing is rather worrying - Ive heard Opera has support, though I havent had time to test this myself, so I dont know if it actually does - or, for that matter, if it does it correctly, or has the same problems as WebKit. But either way, WebKit is one of the first two implementations to ever attempt to support (Microsofts unrelated declaration notwithstanding) - I really dont want to see its early mistakes carried on to FireFox in a few years, and then Internet Explorer a few decades after that. That will leave us stuck with this broken system forever, as it has been demonstrated time and time again that if nobody else supports an old standard correctly, a newcomer to the standard will not do it correctly either. I for one would really, really, hate that.In summary come on, WebKit team, this isnt like you - youre always the ones with the closest-to-standard implementation, and the cleanest code, and hell, overall? Webkit is the most secure/fastest browser available. But this is making me lose my faith in you, guys, please get it right. Youre pioneering a leap into the future when it comes to the Web - this is as important, or more important, than Mosiacs allowing of images was.To put it succinctly - dont fuck this up, yall.These are fonts by Jos Buivenga, quite the amazing person. His (free) fonts are, uniquely, released for use on the web in declarations - unlike the vast majority of other (even free to download) typefaces, which have ridiculously restricting licenses and terms of use statements. Props, Jos - youre a pioneer, and deserve recognition as such.To give Microsoft a little credit, something I rarely do Yes, Im aware Microsoft submitted EOT to the W3C as a proposal - the problem isnt with their attempts to make it non-proprietary, but with the basic concept of making typefaces on the web DRMed. Look what such attempts have done to the music and video industry - simply decimated it. Do we really want to see the same thing happen to our beloved medium as typography moves into the 21st century?
1385
- *** Output of Markdown.pl ***
1386
- (not used anymore)
1387
- *** Output of Markdown.pl (parsed) ***
1388
- (not used anymore)