Web porting and shutdown by format
As is known, stretching texts on sites with the help of the “text-align: justify;” construct is not recommended . The main problem is too large gaps between words due to the lack of hyphenation in words.
For a long time, browsers could not translate words by themselves. However, recently the situation with the support of automatic hyphenation began to improve. Firefox 6 began to support hyphenation in English texts, and with the release of Firefox 8, the turn came to the Russian texts. The transfers are also in the latest versions of Safari. Therefore, it is time to think about how you can use the switch on the format with rollback to the switch to the left, if the browser does not support automatic hyphenation.
My idea of the solution lies on the surface. When loading the page, we create two narrow temporary elements with a long word, one of which has hyphenation included. If its height is greater, then the browser supports automatic hyphenation.
Here is a code snippet illustrating the idea:
On the demo page in the first fragment, the switch is applied by format and hyphenation, if the browser supports them:
The second (off to the left) and third (off by format) fragments are given for comparison, there are no transfers in them.
')
I tested this code in the main browsers under Windows (except IE10) and in some under Ubuntu. The transfers only support Firefox (screenshot above) and Safari on Windows, and the code works correctly in both browsers. It also turned out that in my installation Ubuntu Firefox does not tolerate Russian words, apparently due to the lack of dictionaries.
Thus, now you can use the switch on the format, along with automatic transfers in those browsers where they are supported, and on those sites where appropriate.
And how would you solve this problem?
For a long time, browsers could not translate words by themselves. However, recently the situation with the support of automatic hyphenation began to improve. Firefox 6 began to support hyphenation in English texts, and with the release of Firefox 8, the turn came to the Russian texts. The transfers are also in the latest versions of Safari. Therefore, it is time to think about how you can use the switch on the format with rollback to the switch to the left, if the browser does not support automatic hyphenation.
My idea of the solution lies on the surface. When loading the page, we create two narrow temporary elements with a long word, one of which has hyphenation included. If its height is greater, then the browser supports automatic hyphenation.
Here is a code snippet illustrating the idea:
<style> .hyphens { -moz-hyphens: auto; -ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } </style> <script type="text/javascript"> function is_hyphens () { function get_height (eItem) { var rect = eItem.getBoundingClientRect(); return rect ? (rect.bottom - rect.top) : eItem.offsetHeight; } var eHyphens = document.createElement('DIV'), eNoHyphens = document.createElement('DIV'); document.body.appendChild(eHyphens); document.body.appendChild(eNoHyphens); eHyphens.innerHTML = eNoHyphens.innerHTML = ''; // 1em Safari, 2em iPad eHyphens.style.width = eNoHyphens.style.width = '3em'; eHyphens.className = 'hyphens'; var result = get_height(eHyphens) > get_height(eNoHyphens); document.body.removeChild(eHyphens); document.body.removeChild(eNoHyphens); return result; } </script> On the demo page in the first fragment, the switch is applied by format and hyphenation, if the browser supports them:
The second (off to the left) and third (off by format) fragments are given for comparison, there are no transfers in them.
')
I tested this code in the main browsers under Windows (except IE10) and in some under Ubuntu. The transfers only support Firefox (screenshot above) and Safari on Windows, and the code works correctly in both browsers. It also turned out that in my installation Ubuntu Firefox does not tolerate Russian words, apparently due to the lack of dictionaries.
Thus, now you can use the switch on the format, along with automatic transfers in those browsers where they are supported, and on those sites where appropriate.
And how would you solve this problem?
Source: https://habr.com/ru/post/136336/
All Articles