How to deal with long words/strings on mobile
To cover heroes and tables
Heroes
On mobile devices with a smaller screen width, the use of long words in hero content types can cause an issue. The length of the word causes it to go off the screen and make the user have to scroll horizontally, for example:
On Silktide, this will report as under the error ‘Ensure pages don't scroll in two dimensions on small screens’. This violates WCAG (Web Content Accessibility Guidelines) AA 1.4.10. This states that content must fit on small screens (such as mobile phones) without requiring scrolling in two dimensions.
To fix this, a code change has been made. But, to ensure the words break in the right place, you need to add a soft hyphen character. The soft hyphen will only show if it is needed.
To add the soft hyphen in T4, go to ‘Tools’ and ‘<> Source code’ and add ­ where a word should break, for example:
<p>Accommoda­tion</p>When published, the soft hyphen will only show if it is needed, for example:
If your issue occurs on a course page, the heading is taken from the Course name field where there is no Tools option. In this case, you can add the ­ directly into the word in this field, for example:
This is true for any similar field where there is no Tools option. And, again, the soft hyphen will only show when it is needed.
A similar issue can occur when there is a long compound word with a /, such as “Biology/Zoology” or “Therapy/Advanced”. In this case, we don’t want to add a soft hyphen. We don’t want:
And we don’t want to simply add a space after the / as this will not look good on desktop. What we want is a zero-width space. The code for this is ​ and you add it in the same way as the soft hyphen.
Tables
The problem of long strings caused by the use of a / can also be an issue within tables in mobile view. Because a column in a table is narrower than the full page width, just a couple of long words separated by a / can cause the page to be too wide for the screen. In this case, the table will be in a text block so the Tools option will be available. Simply go into the source code and add a zero-width space ​ after each /.
Long strings can also appear in tables because of a bug in the system that replaces normal spaces (ie spaces with nothing in them) with a non-breaking space that appears as in the source code.
To resolve this, go into the source code and replace the non-breaking space with a simple space (space bar). The easiest way to do this is to carry out a Ctrl F search for in the source code window. This will highlight every instance and you can go through manually and replace them. If there a lot of instances, copying from the source code into Notepad on a Windows machine will allow you to do a Ctrl H search and replace to replace the with a space. You can then copy the amended text from Notepad and put it back in the source code window.