How do I put two spaces after every period in our HTML?

Asked 7/10, 2011 at 16:49 Answered 30/12, 2023 at 9:14

I need there to be two spaces after every period in every sentence in our entire site (don't ask).

One way to do it is to embark on manually adding a &nbsp  after every single period. This will take several hours.

We can't just find and replace every period, because we have concatenations in PHP and other cases where there is a period and then a space, but it's not in a sentence.

Is there a way to do this...and everything still work in Internet Explorer 6?

[edit] - The tricky part is that in the code, there are lines of PHP that include dots with spaces around them like this:

<?php echo site_url('/css/' . $some_name .'.css');?>

I definitely don't want extra spaces to break lines like that, so I would be happy adding two visible spaces after each period in all P tags.

Openhanded answered 7/10, 2011 at 16:49 Comment(6)

apart from PHP and Javascript context, also ellipsis (the three dots), won't probably require a space after each dot. – Frunze 7/10, 2011 at 16:51

No there isn't, and you shouldn't be trying in the first place. (If the goal is to exactly reproduce a document, then HTML is the wrong tool, if it isn't then you shouldn't be trying to use outmoded typographical conventions). – Aurie 7/10, 2011 at 16:54

@Frunze — That shouldn't be a problem, because if someone wants an elipsis then they'll use an elipsis (…) and not three full stops (...), right? (No, probably not, sigh). – Aurie 7/10, 2011 at 16:55

Do you already have two spaces after every period, and you just need to make them show up when the page is displayed? – Isosteric 7/10, 2011 at 17:14

This is one where I'd advocate fighting the good fight and telling them that there's a good reason that whitespace+ is condensed to whitespace in HTML and that the practice of double space after the period should have died with the invention of proportional fonts. – Shaughn 7/10, 2011 at 17:21

Quentin, the ellipsis is a legacy character from Latin 1. It's not exactly needed and robs the typesetter of control over spacing. – Dressler 7/10, 2011 at 17:31

You might be able to use the JavaScript split method or regex depending on the scope of the text.

Here's the split method:

var el = document.getElementById("mydiv");
if (el){
    el.innerText = el.innerText.split(".").join(".\xA0 ");   
}

Test case:

Hello world.Insert spaces after the period.Using the split method.

Result:

Hello world. Insert spaces after the period. Using the split method.

Euphonize answered 7/10, 2011 at 17:10 Comment(1)

Edited my answer. Is that what you meant? – Euphonize 7/10, 2011 at 17:42

As we all know, HTML collapses white space, but it only does this for display. The extra spaces are still there. So if the source material was created with two spaces after each period, then some of these substitution methods that are being suggested can be made to work reliably - search for "period-space-space" and replace it with something more suituble, like period-space-&emsp14;. Please note that you shouldn't use   because it can prevent proper wrapping at margins. (If you're using ragged right, the margin change won't be noticeable as long as you use the the nbsp BEFORE the space.)

You can also wrap each sentence in a span and use the :after selector to add a space and format it to be wide with "word-spacing". Or you can wrap the space between sentences itself in a span and style that directly.

I've written a javascript solution for blogger that does this on the fly, looks for period-space-space, and replaces it with a spanned, styled space that appears wider.

If however your original material doesn't include this sort of thing then you'll have to study up on sentence boundary detection algorithms (which are not so simple), and then modify one to also not trip over PHP code.

Positivism answered 2/1, 2013 at 16:25 Comment(1)

Searching for this answer as I'm developing a screenplay sharing php/html/js application. And thumbs up to this comment - &emsp14; is the way to go. For whatever reason, screenplays continue to use monospace fonts, like courier. The production department says one page = one minute of screentime. Or maybe just because they're used to it. Who knows? In any case, it is being used, so I would like to thank those who actually answered the question. To those who argue against asking the question in the first place, I have fortunately reached my character limit, and so can say nothing. – Confusion 24/5, 2021 at 6:43

You might be able to use the JavaScript split method or regex depending on the scope of the text.

Here's the split method:

var el = document.getElementById("mydiv");
if (el){
    el.innerText = el.innerText.split(".").join(".\xA0 ");   
}

Test case:

Hello world.Insert spaces after the period.Using the split method.

Result:

Hello world. Insert spaces after the period. Using the split method.

Euphonize answered 7/10, 2011 at 17:10 Comment(1)

Edited my answer. Is that what you meant? – Euphonize 7/10, 2011 at 17:42

Have you thought using output buffer? ob_start($callback)

Not tested, but if you'll stick this before any output (or betetr yet, offload the function):

<?php
    function processDots($buffer)
    {
      return (str_replace(".", ".&nbsp;", $buffer));
    }

    ob_start("processDots");
?>

and add this to end of input:

<?php ob_end_flush(); ?>

Might just work :)

Sorensen answered 7/10, 2011 at 17:29 Comment(2)

now it's a dot and a space, this isn't the solution, obviously, but an idea to develop on. – Sorensen 7/10, 2011 at 17:32

I think you should replace only a . followed by a space. Since other .s usually don't end a sentence. – Clypeus 7/10, 2011 at 17:33

If you're not opposed to a "post processing"/"javascript" solution:

var nodes = $('*').contents().map(function(a, b) {
    return (b.nodeType === Node.TEXT_NODE ? b : null);
});
$.each(nodes, function(i,node){
    node.data = node.data.replace(/(\.\s)/g, '.\u00A0\u00A0');
});

Using jQuery for the sake of brevity, but not required.

p.s. I saw your comment about not all periods and a space are to be treated equal, but this is about as good as it gets. otherwise, you're going to need a lot better/more bullet-proof approach.

Orthicon answered 7/10, 2011 at 17:20 Comment(1)

This would prevent line-breaking after a sentence. Better to use U+00A0 U+0020 instead. – Dressler 7/10, 2011 at 17:27

Incorporate something like this into your PHP file:

<?php if (preg_match('/^. [A-Z]$/' || '/^.  [A-Z]$/')) { preg_replace('. ', '.&nbsp; '); } ?>

This allows you to search for the beginning of each new sentence as in .spacespaceA-Z, or .spaceA-Z and then replaces that with . space. [note: Capital letter is not replaced]

Smoothtongued answered 4/1, 2019 at 16:15 Comment(0)

The code from elbrant doesn't work. I copied the entire thing but get validation errors everywhere.

I tried adding it to functions.php in WordPress without the beginning and ending brackets. GeneratePress also breaks it.

error Parse error: syntax error, unexpected token "<", expecting end of file in your code on line 5

Latashalatashia answered 30/12, 2023 at 9:14 Comment(1)

If you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context. - From Review – Tabatha 30/12, 2023 at 23:58

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags