Allow HTML pub contents to render cleanly with custom numbers #395
Conversation
* Shorten ID and span text so text input and outcome is clearer
Publishers can enter custom numbers. Add support for the forms: * Numbers without periods (1) * Numbers with decimals (1.2) * Allow long numbers to be spaced correctly and not wrap badly (100.) * Ignore numbers bigger than 999 (eg 2014) * Ignore contents items that are just numbers
| display: block; | ||
| } | ||
| .contents-text { | ||
| padding-left: 0.2em; |
fofr
Jul 3, 2017
Author
Contributor
Good catch.
Good catch.
| # Must be followed by a space | ||
| # May contain a period `1.` | ||
| # May be a decimal `1.2` | ||
| number = /^\d{1,3}(\.?|\.\d{1,2})(?=\s)/.match(content_item_text) |
andysellick
Jul 3, 2017
Contributor
This probably isn't an issue but wanted to check - this regex will match '1.12 Title' but not '1.123 Title' i.e. anything with more than two numbers after a decimal point. Is this intentional? I don't know if any of our content would exceed those two characters or not.
This probably isn't an issue but wanted to check - this regex will match '1.12 Title' but not '1.123 Title' i.e. anything with more than two numbers after a decimal point. Is this intentional? I don't know if any of our content would exceed those two characters or not.
fofr
Jul 3, 2017
Author
Contributor
Correct, that was intentional. I didn't find any examples of X.ABC. I felt like it should be limited. Something like 1.0003 might reasonably be a decimal rather than a heading level. Unlikely to happen in reality.
Correct, that was intentional. I didn't find any examples of X.ABC. I felt like it should be limited. Something like 1.0003 might reasonably be a decimal rather than a heading level. Unlikely to happen in reality.
| display: block; | ||
| } | ||
| .contents-text { | ||
| padding-left: 0.2em; |
andysellick
Jul 3, 2017
Contributor
Need a rule for rtl?
Need a rule for rtl?
| display: block; | ||
| margin-left: 1.5em; | ||
| } | ||
|
|
||
| .direction-rtl & { | ||
| .contents-number { | ||
| float: right; |
andysellick
Jul 3, 2017
Contributor
Have you allowed for rtl content? Looks like this rule needs to be removed - if rtl class is applied, float right on contents-number breaks the layout.
Have you allowed for rtl content? Looks like this rule needs to be removed - if rtl class is applied, float right on contents-number breaks the layout.
fofr
Jul 3, 2017
Author
Contributor
| // correct appearance | ||
| display: inline-block; | ||
| .contents-number { | ||
| min-width: 1.3em; |
andysellick
Jul 3, 2017
Contributor
Not sure this is wide enough, maybe 1.4em?
https://www.gov.uk/government/publications/vat-notice-700-the-vat-guide/vat-notice-700-the-vat-guide
Not sure this is wide enough, maybe 1.4em?
https://www.gov.uk/government/publications/vat-notice-700-the-vat-guide/vat-notice-700-the-vat-guide
Fixes styles on https://www.gov.uk/government/publications/why-overseas-companies-should -set-up-in-the-uk/1651201
Increasing to 1.5em gives enough space for all X. and XX. numbers, keeping contents items aligned up to 100.
Publishers can enter custom numbers. Add support for the forms:
A list of HTML publications with custom numbering:
https://gist.github.com/fofr/622c0c52dfee41cde9402c56ec5d67ea
Hover and focus states
Examples
https://www.gov.uk/government/publications/xbrl-guide-for-uk-businesses/xbrl-guide-for-uk-businesses
https://www.gov.uk/government/publications/archived-case-reports/archived-case-reports
https://www.gov.uk/government/publications/british-forces-air-strikes-in-iraq-monthly-list/raf-air-strikes-in-iraq-and-syria-december-2015
https://www.gov.uk/government/publications/vietnam-country-of-concern--2/vi-t-nam-bao-cao-nhan-quy-n-2014-c-a-b-ngo-i-giao-anh
Examples where new is not as good
https://www.gov.uk/government/publications/fifth-meeting-of-the-leadership-for-libraries-taskforce/minutes-of-the-fifth-meeting-of-the-leadership-for-libraries-taskforce