The clever arrangement of numbers on the web
Numbers are arranged in small groups for better legibility. This applies to print as well as websites. For example, telephone numbers are divided into two groups from the right; a long IBAN, on the other hand, is arranged into five groups of four and one group of two, starting on the left.
When it comes to print products, you have to type in the numbers in any case. On the Web, however, you might prefer to copy and paste them – particularly for longer and more complicated sequences. As a web designer, the task here will be to make the site as easy as possible for the users.
Take the example of an IBAN again.
This number is twenty-two digits in length. If you use blank spaces for structure, the length increases and the banking software will report the number as erroneous – or, even more annoying, it will cut off the number after the twenty-second digit.
If you use the HTML tag
Assign a span using
The resulting code for the IBAN appears as follows:
IBAN:
By the way: you can use the pseudo-element “after” to display the hyphen between the area code and telephone number in such a way that the hyphen will not be copied when you copy and paste.
When it comes to print products, you have to type in the numbers in any case. On the Web, however, you might prefer to copy and paste them – particularly for longer and more complicated sequences. As a web designer, the task here will be to make the site as easy as possible for the users.
Take the example of an IBAN again.
This number is twenty-two digits in length. If you use blank spaces for structure, the length increases and the banking software will report the number as erroneous – or, even more annoying, it will cut off the number after the twenty-second digit.If you use the HTML tag
<span> for structure, however, with the assigned spacing, the numbers are displayed in an organized manner and can nonetheless be copied without spaces.Assign a span using
<span> in the CSS definition:span.space {margin-right:0.3 em;}The resulting code for the IBAN appears as follows:
IBAN:
<span class= 'space'>DE32</span><span>class= 'space'>6724</span><span>class= 'space'>0039</span><span>class= 'space'>2640</span>01
By the way: you can use the pseudo-element “after” to display the hyphen between the area code and telephone number in such a way that the hyphen will not be copied when you copy and paste.
span.space {margin-right:0.3 em;}
span.slash:after
{content: "/";
margin-right: 0.3em;
margin-left: 0.3em;}
Tel.: <span class= 'space'>06</span><span>class= 'space'>17</span><span>class= 'slash'>2</span><span>class= 'space'>48</span><span>class= 'space'>44</span>18