This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
ideas:content-formatting [2008/01/14 10:46] – rearrange rationale fantasai | ideas:content-formatting [2008/01/14 14:05] – Added explanatory text itpastorn | ||
---|---|---|---|
Line 18: | Line 18: | ||
Use XSLT's format-number syntax as a starting ground | Use XSLT's format-number syntax as a starting ground | ||
+ | |||
==== Rationale ==== | ==== Rationale ==== | ||
- | * i18n | + | * i18n - numbers are displayed in many different ways across the world |
- | * Enhanced usability, without sacrificing accessibility or scriptability | + | * Enhanced usability, without sacrificing accessibility or scriptability. Grouping numbers in thousands or in pairs will make the easier to read for most users. We do want to suppress line breaks, though. |
- | * Enhanced accessibility, | + | * Enhanced accessibility, |
This is a question about visual presentation. As such it should be handled with CSS. | This is a question about visual presentation. As such it should be handled with CSS. | ||
No other technology can be made media-specific. | No other technology can be made media-specific. | ||
+ | |||
+ | The ability to format numbers without changing their actual value is a common practice in spreadsheet software, and should be just as easy on the web. | ||
=== Example HTML === | === Example HTML === | ||
Line 44: | Line 47: | ||
"nine hundred and eighty seven million six hundred and fifty four thousand three hundred and twenty | "nine hundred and eighty seven million six hundred and fifty four thousand three hundred and twenty | ||
one **comma** zero zero Swedish crowns" | one **comma** zero zero Swedish crowns" | ||
+ | |||
+ | <span class=" | ||
+ | |||
+ | Should be displayed as '' | ||
+ | |||
==== New CSS rules ==== | ==== New CSS rules ==== | ||
- | **@decimal-format** that draws its ideas from xsl: | + | === @decimal-format |
+ | |||
+ | This rule draws its ideas from xsl: | ||
+ | |||
+ | It is used to specify the same things as its XSL counterpart, | ||
+ | |||
+ | === number-format === | ||
- | **number-format** | + | This rule draws its ideas from xsl: |
+ | It consists of two parts for its value. A string that is identical to the second argument in XSL number format, and an | ||
+ | optional reference to a decimal format, specified with an " | ||
==== Example CSS ==== | ==== Example CSS ==== | ||
Line 63: | Line 79: | ||
grouping-separator: | grouping-separator: | ||
decimal-separator : "," | decimal-separator : "," | ||
+ | } | ||
+ | @decimal-format creditcard { | ||
+ | grouping-separator: | ||
} | } | ||
@media all { | @media all { | ||
Line 79: | Line 98: | ||
td.sweprice { | td.sweprice { | ||
number-format: | number-format: | ||
+ | } | ||
+ | .creditcard { | ||
+ | number-format: | ||
} | } | ||
td.sweprice:: | td.sweprice:: | ||
Line 88: | Line 110: | ||
Grouping both unnecessary and unwanted, words like | Grouping both unnecessary and unwanted, words like | ||
" | " | ||
+ | Those words should only be spelled out by a screen reader when | ||
+ | | ||
*/ | */ | ||
td.price { | td.price { | ||
Line 100: | Line 124: | ||
td.sweprice:: | td.sweprice:: | ||
content: " Swedish crowns"; | content: " Swedish crowns"; | ||
+ | } | ||
+ | .creditcard { | ||
+ | /* Speak numbers in pairs, no nead to hear the word " | ||
+ | number-format: | ||
} | } | ||
} | } |