Avoid widows with jQuery

Design help Custom code
1

Hi,

Seems by inserting this script on a page, you will avoid widows in your typesetting. However, as this is jQuery, I would need to reference the jQuery library in my ‘<head>’ tags as well. - How would I be able to do this? I mean, isn’t that something I need to install on the web server somewhere?

Please advise, thank you. This would be a handy feature for anyone to add, if it works!

<script>
$('p').each(function(){
    var string = $(this).html();
    string = string.replace(/ ([^ ]*)$/,'&nbsp;$1');
    $(this).html(string);
});
</script>

Thank you.

2

Hi @Tine22,

What script? and, did you mean windows?

3

Hi @Tine22, this script can be put in the Footer of the page, jQuery is automatically loaded. http://help.webflow.com/faq/how-to-add-custom-head-and-body-code-to-a-webflow-site

4

Widows is a term used in typesetting.

In typesetting, widows and orphans are lines at the beginning or end of a paragraph, which are left dangling at the top or bottom of a column, separated from the rest of the paragraph. There is some disagreement about the definitions of widow and orphan; what one source calls a widow another calls an orphan.

5

@samliew Owh. I see I need update my knowledge more than before. Glad I am here. Thanks sam. I honestly appreciate it.

@Tine22 Ah that script.

6

@Tine22,

Looks like that script makes the paragraph not wrap to the next line no matter how long it is. Using JavaScript is not the best solution for this.

You can simply achieve this with the following custom style:

<style>
p {
  white-space: nowrap;
}
</style>

Paste this in Site Settings > Custom Code > Header Code

7

No… in typography, when a single word is wrapped to a line on its own (all by itself), it’s called a widow - and it is something designers and marketing people work hard to avoid at all costs. If that process can be automated on the web, you are ‘safe’!

Hope that helps to explain. The other guy is saying the jQuery library is already installed which is great.

8

Hang on - will this work for widows though? I am not so sure. - - Widows are where the last sentence in a paragraph auto-wraps and you wind up with only a single word on the last line of the paragraph. We want to achieve the effect where the paragraph will always at least bring down the last two words to the last line of the paragraph.
(orphans are the other explanation you mentioned above… where top or bottom of column are a single sentence only, and feel unsettled)

Thanks!

9 
<style>
p {
  white-space: nowrap;
}
</style>

Hi - unfortunately this did not work. …Or, how should I try to edit that if I have assigned a specific custom class to the text I need to auto-wrap? Instead of ‘p’, have .myClassIAmReferringTo …like that? - Thank you.

10

For your script, you can place it in Site Settings > Custom Code > Footer Code. You do not need to load jQuery, it is already loaded.

11

I will try the footer - but do I need to change ‘p’ to the specific name of the class I am using to style my ‘p’ txt?

13

Tried both ways - no result. In fact, when I plugged in the following, it made all paragraph text break outside of the grid and flow to the far right-hand side of the screen.

<style>
p {
  white-space: nowrap;
}
</style>
14

It depends on whether you want it to apply site-wide or just a specific class.

15

I’m afraid it does not work. I’ve tried it with specific class name as well as ‘p’.

16

It does work. http://sandbox-903b9c.webflow.io/widow-test

The last two words always accompany each other.

17

What about when it’s a section with small text block on left and image on right? - I have applied to footer site-wide and get no result.
I put this…Firebug revealed the custom class for me.

Then I even tried this...
    <script>
    $('.txtblocks p').each(function(){
        var string = $(this).html();
        string = string.replace(/ ([^ ]*)$/,'&nbsp;$1');
        $(this).html(string);
    });
    </script>

Still no luck there!

18

That’s probably poor design. You could avoid that.

I showed you an example that it works.

19

It’s a standard container div, and within two divs… one with the txt on left , the other calling in the image on right.
The div with the text is called div class=“txtblocks”. I do not see anything incorrect with structure. All looks valid to me.

20

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.