Html - text overruns width of paragraph

GeorgePorge
June 25, 2024
70 views
0 votes
2 Answers

I’m having a very strange issue and one which I’ve never seen in more than 20 years of web development. I have text which is overrunning the width of the paragraph which contains it:

My client has requested the Duffy Script font from Adobe which might be the problem, since when I switch to sans serif, the issue goes away. But I’d really like to fix it if I can!

I’ve created a simple jsfiddle which shows the problem – you can simply resize the right-hand pane to see the problem I screen-capped in the image: https://jsfiddle.net/GeorgeMooWoof/4x50etdy/6/

Can anyone help at all please?

Thanks so much

@import url("https://use.typekit.net/twt4ckp.css");
.container {
  padding-right: 20px;
  background: yellow;
}

p {
  font-family: "duffy-script", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  background: rgba(255, 0, 0, 0.2);
}

<div class="container">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

Answers

As explained in @herrstrietzel’s post, this problem is caused by the Contextual alternates. Use font-feature-settings: 'calt' 0 as mentioned instead.

(The problem is fixed by optimizeSpeed because of its side-effect of disabling ligatures. Same with adding a positive letter-spacing.)

Setting text-rendering:optimizeSpeed fixes the problem for me (on Chrome and Edge).

@import url("https://use.typekit.net/twt4ckp.css");
.container {
  padding-right: 20px;
  background: yellow;
}

.par {
  font-family: "duffy-script", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  background: rgba(255, 0, 0, 0.2);
  text-rendering: optimizeSpeed;
}

<div class="container">
  <p class="par">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

As commented by the OP, adding letter-spacing: 0.01px appears to fix the problem as well.

@import url("https://use.typekit.net/twt4ckp.css");
.container {
  padding-right: 20px;
  /* background: yellow; */
}

.par {
  display: inline-block;
  font-family: "duffy-script", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  width: 233px;
  background: rgba(255, 0, 0, 0.2);
  letter-spacing: 0.01px;
}

<div class="container">
        <p class="par">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>

The issue is caused by the calt contextual alternative feature.

Apparently, chromium browsers can’t calculate the current wordlength correctly with this feature enabled.

font-feature-settings: 'calt' 0;

Does fix the problem while enabling other features (e.g ligatures)

@import url("https://use.typekit.net/twt4ckp.css");
*{
    box-sizing:border-box;

}


.container {
  padding-right: 20px;
  background: yellow;
  resize:both;
  overflow:auto;
  line-height:1.5em;
  max-width:100%;
  
}
p {
  font-family: "duffy-script", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  background: rgba(255, 0, 0, 0.2);
}

.no-feat{
   font-feature-settings:  'calt' 0;
}

  <h3>Resize me</h3>

<div class="container">
  <p class="feat">
  firm Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  
    <p class="no-feat">
  firm Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – text overruns width of paragraph

Answers