Text-wrapping, hyphenation, emojis and what not

HTML

              
                h1 Text-wrapping, hyphenation, emojis and what not

ul.skiplinks
	li <a href="#css">Skip to the CSS Used</a>
	li <a href="#tests">Skip to the Tests</a>
	li <a href="#questions">Skip to the Questions</a>
	li <a href="#answers">Skip to the Answers</a>
	li <a href="#acknowledgements">Skip to the Acknowledgements</a>

h2#css 💅 CSS Used

pre
	code
		| .test {
		|     width: 50vw;
		|     -webkit-hyphens: auto;
		|     -ms-hyphens: auto;
		|     hyphens: auto;
		|     padding: 0.5em;
		|     outline: 1px solid #666;
		| }

h2#tests 🎰 The Tests

h3 Long emoji strings

.testwrapper#test-emoji-pileofpoo

	h4 The 💩 emoji

	.test
		| 💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩

	p.toggleLang 🇦🇶 
		a(href="#test-emoji-pileofpoo") Set/Remove <code>lang</code> attribute

	p.showResults 👁 
		a(href="#test-emoji-pileofpoo") Show/Hide Browser test Results

	dl.results
		dt Safari 10.0.2 (macOS)
		dd The 💩 emoji gets text-wrapped, not hyphenated.
		dt Chrome 55 (macOS)
		dd The 💩 emoji gets text-wrapped, not hyphenated.
		dt Chrome 55 (Win10)
		dd The 💩 emoji gets text-wrapped, not hyphenated.
		dt Firefox 52.0a2 (macOS)
		dd The 💩 emoji gets text-wrapped, not hyphenated.
		dt Firefox 50 (Win10)
		dd The 💩 emoji gets text-wrapped, not hyphenated.
		dt IE11 (Win10)
		dd The 💩 emoji does not get text-wrapped, nor hyphenated. The container overflows.
		dt Edge12 (Win10)
		dd The 💩 emoji does not get text-wrapped, nor hyphenated. The container overflows.

.testwrapper#test-emoji-warningtriangle

	h4 The ⚠️ emoji

	.test
		| ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️

	p.toggleLang 🇦🇶 
		a(href="#test-emoji-warningtriangle") Set/Remove <code>lang</code> attribute

	p.showResults 👁 
		a(href="#test-emoji-warningtriangle") Show/Hide Browser test Results

	dl.results
		dt Safari 10.0.2 (macOS)
		dd The ⚠️ emoji does not get text-wrapped, nor hyphenated. The container overflows.
		dt Chrome 55 (macOS)
		dd The ⚠️ emoji does not get text-wrapped, nor hyphenated. The container overflows.
		dt Chrome 55 (Win10)
		dd The ⚠️ emoji does not get text-wrapped, nor hyphenated. The container overflows.
		dt Firefox 52.0a2 (macOS)
		dd The ⚠️ emoji does not get text-wrapped, nor hyphenated. The container stretches.
		dt Firefox 50 (Win10)
		dd The ⚠️ emoji does not get text-wrapped, nor hyphenated. The container stretches.
		dt IE11 (Win10)
		dd The ⚠️ emoji does not get text-wrapped, nor hyphenated. The container overflows.
		dt Edge12 (Win10)
		dd The ⚠️ emoji does not get text-wrapped, nor hyphenated. The container overflows.

h3 Long <code>\w</code> strings

h4 Mutliple long strings

.testwrapper#test-textstrings-multiple

	.test
		| abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

	p.toggleLang 🇦🇶 
		a(href="#test-textstrings-multiple") Set/Remove <code>lang</code> attribute

	p.showResults 👁 
		a(href="#test-textstrings-multiple") Show/Hide Browser test Results

	dl.results
		dt Safari 10.0.2 (macOS)
		dd Multiple long strings get hyphenated <em>(<code>-webkit</code> vendor prefix required though)</em>.
		dt Chrome 55 (macOS)
		dd Multiple long strings get hyphenated, except for the last long string in the series. When a <code>lang</code> attribute is set, the hyphenation changes.
		dt Chrome 55 (Win10)
		dd Multiple long strings do not get hyphenated.
		dt Firefox 52.0a2 (macOS)
		dd Multiple long strings do not get hyphenated by default. Only when a <code>lang</code> attribute is set to <a href="https://developer.mozilla.org/en/docs/Web/CSS/hyphens#Notes_on_supported_languages">one of the supported languages</a> the text is hyphenated.
		dt Firefox 50 (Win10)
		dd Multiple long strings do not get hyphenated by default. Only when a <code>lang</code> attribute is set to <a href="https://developer.mozilla.org/en/docs/Web/CSS/hyphens#Notes_on_supported_languages">one of the supported languages</a> the text is hyphenated.
		dt IE11 (Win10)
		dd Multiple long strings do not get hyphenated. The container overflows.
		dt Edge12 (Win10)
		dd Multiple long strings do not get hyphenated. The container overflows.

.testwrapper#test-textstrings-single
	
	h4 Single long string

	.test
		| abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

	p.toggleLang 🇦🇶 
		a(href="#test-textstrings-single") Set/Remove <code>lang</code> attribute

	p.showResults 👁 
		a(href="#test-textstrings-single") Show/Hide Browser test Results

	dl.results
		dt Safari 10.0.2 (macOS)
		dd Single long strings get hyphenated <em>(<code>-webkit</code> vendor prefix required though)</em>
		dt Chrome 55 (macOS)
		dd A single long string does not get hyphenated <em>(because it is the last one, cfr. multiple long strings – see above)</em>
		dt Chrome 55 (Win10)
		dd Multiple long strings do not get hyphenated.
		dt Firefox 52.0a2 (macOS)
		dd Single long strings do not get hyphenated by default. Only when a <code>lang</code> attribute is set to <a href="https://developer.mozilla.org/en/docs/Web/CSS/hyphens#Notes_on_supported_languages">one of the supported languages</a> the text is hyphenated.
		dt Firefox 50 (Win10)
		dd Single long strings do not get hyphenated by default. Only when a <code>lang</code> attribute is set to <a href="https://developer.mozilla.org/en/docs/Web/CSS/hyphens#Notes_on_supported_languages">one of the supported languages</a> the text is hyphenated.
		dt IE11 (Win10)
		dd Multiple long strings do not get hyphenated. The container overflows.
		dt Edge12 (Win10)
		dd Multiple long strings do not get hyphenated. The container overflows.

h2#questions ⁉️ Questions

p Looking at the results, this raises some questions

h3 Core questions

ol
	li Why do some emojis get text-wrapped, and some not? &rarr; <a href="https://www.bram.us/2016/12/23/text-wrapping-hyphenation-emojis-and-what-not/#question_1" target="_top">Answered!</a>
	li If the above is a feature: is there a list of emojis – or can we detect which emojis – that get text-wrapped (and those who are not) available somewhere? &rarr; <a href="https://www.bram.us/2016/12/23/text-wrapping-hyphenation-emojis-and-what-not/#question_2" target="_top">Answered!</a>
	li Why do emojis get text-wrapped, and not hyphenated? &rarr; <a href="https://www.bram.us/2016/12/23/text-wrapping-hyphenation-emojis-and-what-not/#question_3" target="_top">Answered!</a>
	
h3 Browser specific Questions

ol(start=4)
	li Why, in Chrome 55, is hyphenation not applied on the last string? &rarr; <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=676890&can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=">It's a bug. <del>Fixed in Chrome 56 and up</del>.</a> <ins>This issue regressed, and is now properly fixed in Chrome 90</ins>
	li Why, in Firefox 52.0a2, does the container stretch out on the ⚠️-test, whilst other browsers overflow?
	li Why, in IE11/Edge12, does the 💩-test not wrap, whilst other browsers do?
	li Why, in IE11/Edge12, does hyphenation not work <a href="http://caniuse.com/#feat=css-hyphens" target="_top">even though it should</a>? Setting the <code>lang</code> to <code>en-US</code>, or setting the <code>lang</code> on the <code>body</code> or <code>html</code> yield the same result.
	li Why, in Chrome 55 and Safari 10.0.2, is hyphenation applied even when the required <code>lang</code> is not set?
	
h2#answers ℹ️ Answers

p Thanks to <a href="https://twitter.com/KhaledGhetas">Khaled Hosny</a> I've been able to crack this nut and answer the core questions. <a href="https://www.bram.us/2016/12/23/text-wrapping-hyphenation-emojis-and-what-not/" target="_top">Check out the answers on my blog</a>.
	
h2#acknowledgements 👏 Acknowledgements

p Thanks go out to to:
ul
	li <a href="https://twitter.com/haroenv">Haroen Viaene</a> for providing test results data on Win10.
	li <a href="https://twitter.com/KhaledGhetas">Khaled Hosny</a> for <a href="https://twitter.com/KhaledGhetas/status/812311551474536448">pointing</a> me towards the needed Line Breaking Properties Specification to solving this.

CSS

              
                html, body
	margin 0
	padding 0
	
*
	box-sizing border-box

html, body
	width 100vw
	height 100vh
	
body
	padding 1vw
	font-size calc(1em + 0.2vw)
	
del, ins
	font-style: italic;

ul.skiplinks
	margin 0
	padding 0
	li
		margin 0
		padding 0
		list-style-type none
		&:before
			content '→ '
	
@keyframes yellowfade {
    0% { background-color: yellow; }
    100% { background-color: transparent; }
}
	
h2
	margin-top 10vw

	&:target
		background-color yellow
		animation yellowfade 500ms ease-in-out 1000ms 1 forwards
	
h3
	margin-top 5vw
	
.test
	width 50vw
	-webkit-hyphens auto
	-ms-hyphens auto
	hyphens auto
	padding 0.5em
	outline 1px solid #666

	margin 2em 0 1em
	position relative	

	&::before
		content 'NO LANG ATTR SET'
		position absolute
		top 0
		left -1px
		background dimgray
		color #fff
		font-size 0.8em
		line-height 0.8em
		padding 0.4em 0.6em
		font-family Consolas, Courier New, monospace
		transform translate3d(0,-100%,0)
		opacity 0.4
		
	&[lang="en"]::before
		content 'lang="en"'
		background darkgreen
		opacity 1
	
.setLanguage:before
	content '👉 '
	
dl.results
	width calc(50vw - 0.5em)
	display flex
	flex-direction row
	flex-wrap wrap
	align-items baseline
	margin 1em 0 1em 1.5em
	
	display none
	
	&--visible
		display flex
	
	dt
		flex 0 1 12.5vw
		font-style italic
		margin 0
		padding 0.5em 0 0 0
		
	dd
		flex 0 1 calc(37.5vw - 0.5em)
		margin 0
		padding 0.5em 0 0 0.5em
		
		&:before
			content '→ '

JS

              
                document.addEventListener('DOMContentLoaded', (e) => {

	Array.from(document.querySelectorAll('.toggleLang a')).forEach(($el) => {
			$el.addEventListener('click', (e) => {
				e.preventDefault();
				const target = document.querySelector(`${e.currentTarget.getAttribute('href')} .test`);
				if (target.getAttribute('lang')) {
					target.removeAttribute('lang');
				} else {
					target.setAttribute('lang', 'en');
				}
			});
	});

	Array.from(document.querySelectorAll('.showResults a')).forEach(($el) => {
			$el.addEventListener('click', (e) => {
				e.preventDefault();
				const target = document.querySelector(`${e.currentTarget.getAttribute('href')} .results`);
				target.classList.toggle('results--visible');
			});
	});

});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions