Many writers represent fractions on web pages as decimals (0.25), percentages (25%), words (“one quarter”) or linear “shilling fractions” (1/4). While most of these representations aren’t wrong, they can often look odd or out of place, especially when used in measurements: “½ cup of sugar” looks better on the page, and takes less space, than the awkward “0.5 cups”.
许多作者将网页上的分数表示为小数(0.25)，百分比(25％)，单词(“四分之一”)或线性“先令分数”(1/4)。 尽管大多数表示形式都没错，但它们通常看起来很奇怪或不合适，特别是在测量中使用时：“½杯糖”在页面上看起来比笨拙的“ 0.5杯”更好，占用的空间更少。 。
As the richness of web typography grows, we’re starting to gain very precise control over features that have historically been treated as afterthoughts. The highest degree of finesse is currently found in OpenType fonts, but it is also the most advanced technique. I’ll start with the common approaches to creating fractions on web pages, and address the expert option for fractions seperately.
随着网络排版的丰富性的增长，我们开始对过去一直被视为事后考虑的功能获得非常精确的控制。 目前，OpenType字体的技巧最高，但它也是最先进的技术。 我将从在网页上创建分数的常用方法开始，然后分别介绍分数的专家选项 。
普通分数 (Common fractions)
| Fraction | Decimal | Hexadecimal | HTML Entity |
|---|---|---|---|
| ½ | ½ | ½ | ½ |
| ⅓ | ⅓ | ࡩ | ⅓ |
| ⅔ | ⅔ | ࡪ | ⅔ |
| ¼ | ¼ | ¼ | ¼ |
| ¾ | ¾ | ¾ | ¾ |
| ⅕ | ⅕ | ࡫ | ⅕ |
| ⅖ | ⅖ | ࡬ | ⅖ |
| ⅗ | ⅗ | ࡭ | ⅗ |
| ⅘ | ⅘ | ࡮ | ⅘ |
| ⅙ | ⅙ | ࡯ | ⅙ |
| ⅚ | ⅚ | ×A; | ⅚ |
| ⅐ | ⅐ | ࡦ | &frac17; |
| ⅛ | ⅛ | ×B; | ⅛ |
| ⅜ | ⅜ | ×C; | ⅜ |
| ⅝ | ⅝ | ×D; | ⅝ |
| ⅞ | ⅞ | ×E; | ⅞ |
| ⅑ | ⅑ | ࡧ | — |
| ⅒ | ⅒ | — |
| 分数 | 小数 | 十六进制 | HTML实体 |
|---|---|---|---|
| ½ | ＆＃189; | ＆＃xBD; | ＆frac12; |
| ⅓ | ＆＃8531; | ＆＃2153; | ＆frac13; |
| ⅔ | ＆＃8532; | ＆＃2154; | ＆frac23; |
| ¼ | ＆＃188; | ＆＃xBC; | ＆frac14; |
| ¾ | ＆＃190; | ＆＃xBE; | ＆frac34; |
| ⅕ | ＆＃8533; | ＆＃2155; | ＆frac15; |
| ⅖ | ＆＃8534; | ＆＃2156; | ＆frac25; |
| ⅗ | ＆＃8535; | ＆＃2157; | ＆frac35; |
| ⅘ | ＆＃8536; | ＆＃2158; | ＆frac45; |
| ⅙ | ＆＃8537; | ＆＃2159; | ＆frac16; |
| ⅚ | ＆＃8538; | ＆＃215A; | ＆frac56; |
| ⅐ | ＆＃8528; | ＆＃2150; | ＆frac17; |
| ⅛ | ＆＃8539; | ＆＃215B; | ＆frac18; |
| ⅜ | ＆＃8540; | ＆＃215C; | ＆frac38; |
| ⅝ | ＆＃8541; | ＆＃215D; | ＆frac58; |
| ⅞ | ＆＃8542; | ＆＃215E; | ＆frac78; |
| ⅑ | ＆＃8529; | ＆＃2151; | - |
| ⅒ | ＆＃8530; | - |
Common “vulgar” fractions are represented in HTML by the &frac entity. The entity code must include an enumerator and denominator. For example, ¼ represents one quarter, which will appear on the page as ¼ .
常见的“粗俗”部分由&frac实体以HTML表示。 实体代码必须包含一个枚举数和分母。 例如， ¼ 代表四分之一，将在页面上显示为¼。
Well-designed typefaces support the full range of common fractions shown in the table. (Note that the hexadecimal version is used to create the fraction in CSS or JavaScript)*
精心设计的字体可支持表中所示的所有常见分数。 (请注意，十六进制版本用于在CSS或JavaScript中创建分数)*
If you’re encoding your web page in UTF-8 (and you should be) it is possible to copy the fraction character from Adobe InDesign or Microsoft Word (which will automatically create most common fractions from simply having the enumerator and denominator separated by a slash in the text). You can then paste the fraction character directly into your page.
如果您要使用UTF-8对网页进行编码 (应该如此)，则可以从Adobe InDesign或Microsoft Word复制分数字符(它们会自动创建最常见的分数，方法是将枚举数和分母用文字中的斜线)。 然后，您可以将小数字符直接粘贴到页面中。
线性分数 (Linear Fractions)
If you write the enumerator and denominator of the fraction inline in your web page, you should at least use the correct fraction symbol for the purpose, which is not the forward slash character on your keyboard. The inline fraction symbol is represented by the HTML entity ⁄ (⁄ in decimal) The linearized fraction for “one sixteenth” would therefore be: 1⁄16 , appearing as 1⁄16 on the page.
如果在网页中内联编写分数的枚举数和分母，则至少应为此使用正确的分数符号，它不是键盘上的正斜杠字符。 内联分数符号由HTML实体⁄表示⁄ ( ⁄以十进制表示)因此，“十六分之一”的线性化分数为： 1⁄16 ，在页面上显示为1⁄16。
伪造分数 (Faked Fractions)
By wrapping the enumerator with the <sup> (superscript) tag, the denominator in the <sub> (subscript) element, and seperating them with the correct symbol, it is possible to “fake” a fraction: <sup>1</sup> ⁄ <sub>100</sub>
通过用<sup> (上标)标签包装分母，在<sub> (下标)元素中使用分母，并用正确的符号分隔它们，可以“伪造”一个分数：<sup> 1 </ sup>＆＃8260; <sub> 100 </ sub>
Which produces:
产生：
1 ⁄ 100
100分之1
As you can see, this technique will throw off the line leading; on the other hand, it makes the enumerator and denominator separately addressable in CSS, allowing you to treat them differently from the solidus: for example, creating red numerals divided by a black line.
如您所见，该技术将使领先优势脱颖而出。 另一方面，它使枚举数和分母在CSS中可分别寻址，从而使您可以将它们与固相线区别对待：例如，创建用黑线分隔的红色数字。
The easiest way to create fractions, including generating real fractions with arbitrary enumerators and divisors, is a job best left for OTF fonts and advanced CSS3 properties.
创建分数的最简单方法(包括使用任意枚举数和除数生成实分数)是最适合OTF字体和高级CSS3属性的工作 。
翻译自: https://thenewcode.com/566/Writing-Fractions-On-Web-Pages-Correctly-With-Entities
550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
