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 13:59] – Fuller example 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 ==== | ||
Line 50: | Line 57: | ||
**number-format** | **number-format** | ||
+ | |||
Line 63: | Line 71: | ||
grouping-separator: | grouping-separator: | ||
decimal-separator : "," | decimal-separator : "," | ||
+ | } | ||
+ | @decimal-format creditcard { | ||
+ | grouping-separator: | ||
} | } | ||
@media all { | @media all { | ||
Line 79: | Line 90: | ||
td.sweprice { | td.sweprice { | ||
number-format: | number-format: | ||
+ | } | ||
+ | .creditcard { | ||
+ | number-format: | ||
} | } | ||
td.sweprice:: | td.sweprice:: | ||
Line 88: | Line 102: | ||
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 116: | ||
td.sweprice:: | td.sweprice:: | ||
content: " Swedish crowns"; | content: " Swedish crowns"; | ||
+ | } | ||
+ | .creditcard { | ||
+ | /* Speak numbers in pairs, no nead to hear the word " | ||
+ | number-format: | ||
} | } | ||
} | } |