The same code looks differently when I open it from a local file and from Codepen. Why does that happen?

Question

Here is a pen by Chris Coyier, referred in his article Handling Long Words and URLs: https://codepen.io/team/css-tricks/pen/RWaNxr.

<style>
.hyphenate {
  /* Careful, this breaks the word wherever it is without a hyphen */
  overflow-wrap: break-word;
  word-wrap: break-word;

  /* Adds a hyphen where the word breaks */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

/* Demo Styles */

body {
  background: #333;
  font-family: 'Open Sans', sans-serif;
}

.container {
  background: #fff;
  border-radius: 5px;
  width: 300px;
  margin: auto auto 25px;
  padding: 25px;
}
</style>

<div class="container">
  <p class="hyphenate">For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.</p>
</div>
<div class="container">
  <p class="hyphenate">According to Wikipedia, The longest word in any of the major English language dictionary is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.</p>
</div>

Here is how it looks in Firefox if you simply open this link in the browser:

And here is how it looks if you copy everything to a local HTML file:

Why it looks different?

score 2 · Accepted Answer · answered Jan 02 '21 at 11:05

It does not work locally because there is no language defined. Simply add

lang="en-US"

and it will work.

Hyphenation rules are language-specific. In HTML, the language is determined by the lang attribute, and browsers will hyphenate only if this attribute is present and if an appropriate hyphenation dictionary is available.

I found that info here, while original is in this docs. Additionally:

The default value of lang is unknown, therefore it is recommended to always specify this attribute with the appropriate value.

as stated here.

score 1 · Answer 2 · answered Jan 02 '21 at 16:56

When we do it in codepen the HTML markup before and after <body> and </body> is auto generated in an iframe. Because of that there it the html will render like this.

<html class="" lang="en">

When localy we don't see the lang attribute. So try adding the lang attribute to the html tag then you will se the changes <html class="" lang="en">

score 0 · Answer 3 · answered Dec 31 '20 at 11:00

0

The CodePen settings include extra resources that you didn't include in your local copy.

answered Dec 31 '20 at 11:00

Quentin

914,110
126
1,211
1,335

If I include this line in my local HTML, it doesn't change the look for me. Does it change it for you? (And by the way, if you look at the second screenshot, you will see that Open Sans is installed on my computer locally.) – john c. j. Dec 31 '20 at 11:16
1

And the same things are happen with the default font as well. (In my case, it is Times New Roman.) So it is not something related to a font or font features. – john c. j. Dec 31 '20 at 11:53

score 0 · Answer 4 · answered Dec 31 '20 at 12:30

0

I would say that's because the Codepen interface contains its own browser/rendering engine, which can behave differently than the browser which you use for viewing it when used on its own (without codepen "in-between")

answered Dec 31 '20 at 12:30

Johannes

64,305
18
73
130

1

Although this is theoretically possible, I do not see any reason for it. The whole point of Codepen is to provide an option to observe markup using different browsers and different operating systems (maybe I'm wrong, of course...). Also, taking in consideration the human psychology, what is the reason for Chris to share code that works in Codepen only (and not even mention this fact)? – john c. j. Dec 31 '20 at 12:47

The same code looks differently when I open it from a local file and from Codepen. Why does that happen?

4 Answers4