Addressing 2D Scrolling Errors in Silktide

There are a few common causes of the Ensure pages don't scroll in two dimensions on small screens error in Silktide. These are some suggestions on how to fix them.

URL/email address appearing in page content

While there are a few components that are set up to allow long strings of characters to break mid-word, in most cases these strings of text will only break on specific characters such as dashes. This means that URLs and email addresses will try to stay on one line of text, even if it causes 2D scrolling. Some possible fixes:

• Use descriptive link text, rather than printing URLs to pages. This is also preferred for accessibility reasons.
• If the URL is important to the content (for example, in a tutorial about how to add links to a page):
  • One option is to add the helper class word-break--all to the custom class field on the block containing the URL will often fix the scrolling. You will want to check the content on small screens to make sure this doesn't introduce any other readability issues.
  • Another option is to wrap the URL itself in a code block

 

When copy/pasting content from other applications, such as Word, there are often extra bits of code that come along in the background. The editor strips out much of this extra code, but sometimes non-breaking space characters stick around and/or are created by CKeditor in the process of cleaning up the pasted content.

These create long strings of non-breaking text that the browser wants to display on a single line. If you have otherwise normal looking words that are spilling into the overflow area of the preview screen, then   characters are the most likely reason why.

To fix this, go into the source code of the block. Copy and paste this HTML into a separate text editor, then do a find and replace and change all instances of " " to a regular " " space. Then copy and paste it back into the source code and save the block.

Tables

Even moderate size tables can extend out horizontally enough that they cause 2d scrolling. This is acceptable per WCAG 2.1 standards, because the 2d relationship is essential to understanding the content. We have accounted for this in the theme to limit the scrolling to the table portion of the page only. You can safely ignore these pages in Silktide, assuming that no other content on the page is falling into the overflow area.

Theme Issues & Other Edge Cases

We have worked hard to eliminate overflow issues that would be caused by the theme. However, there are occasionally edge cases that pop up. If you have ruled out the above issues but are still finding two-dimensional scrolling errors on your site, get in touch with web.help@wwu.edu and we will investigate.