UIWebView had a helpful property named paginationMode. It gave you horizontal pagination out of the box; specifically using the values: leftToRight, and rightToLeft. However, UIWebView is going out of favor, and since iOS 8, Apple officially encourages using WKWebView. Unfortunately, WKWebView doesn't have that property nor its equivalent out of the box.
Thankfully, horizontal pagination (left and right) is doable using CSS. CSS has a helpful property called column-width. Using that results in segmenting the html body into columns of the specified width. So, the idea is as follows:
Set the column-width property of the body to the webview's width.
Set the height property of the body to the webview's height.
Set isPagingEnabled of the webview's scrollView to true.
That's it (for left to right content though). It's up to you where to set the above values. For example, you can do it in webView(_:didFinish:) of the webview's navigationDelegate.
Now, RTL support.
It's as simple as setting the direction style property of the html tag to rtl. But if that somehow badly affects your page, then you have to get more creative. One crazy solution is as follows:
Wrap all the contents of the <body> tag in one container div.
Set the -webkit-transform property of that div to scale(-1, 1). (i.e. this results in horizontal mirroring)
Thanks to my friend and colleague Sayed Arfa for suggesting column-width and overall inspiration.
Update
At the time of writing this post, I somehow missed this thread. They suggested to use the undocumented(?) CSS property value overflow:-webkit-paged-x. This is more convenient than what's explained above as it doesn't need us to compute a width nor do additional work for RTL handling. However, it doesn't seem reliable, as the chromium project seems to plan to remove it.
(Originally published 2017-11-03)
UIWebViewhad a helpful property namedpaginationMode. It gave you horizontal pagination out of the box; specifically using the values:leftToRight, andrightToLeft. However,UIWebViewis going out of favor, and since iOS 8, Apple officially encourages usingWKWebView. Unfortunately,WKWebViewdoesn't have that property nor its equivalent out of the box.Thankfully, horizontal pagination (left and right) is doable using CSS. CSS has a helpful property called
column-width. Using that results in segmenting the html body into columns of the specified width. So, the idea is as follows:column-widthproperty of the body to the webview's width.heightproperty of the body to the webview's height.isPagingEnabledof the webview'sscrollViewto true.That's it (for left to right content though). It's up to you where to set the above values. For example, you can do it in
webView(_:didFinish:)of the webview'snavigationDelegate.Now, RTL support.
It's as simple as setting the
directionstyle property of the html tag tortl. But if that somehow badly affects your page, then you have to get more creative. One crazy solution is as follows:<body>tag in one containerdiv.-webkit-transformproperty of that div toscale(-1, 1). (i.e. this results in horizontal mirroring)webview.transform = CGAffeineTransform(scaledX: -1, y: 1))Credits:
Thanks to my friend and colleague Sayed Arfa for suggesting
column-widthand overall inspiration.Update
At the time of writing this post, I somehow missed this thread. They suggested to use the undocumented(?) CSS property value
overflow:-webkit-paged-x. This is more convenient than what's explained above as it doesn't need us to compute a width nor do additional work for RTL handling. However, it doesn't seem reliable, as the chromium project seems to plan to remove it.