Blog

Code Snippet: French punctuation rules

Version: 1.0.0 (Dec 29, 2020)

Introduction

In French, probably different from the rest of the world, there are interesting rules for punctuation marks: There is always a space before colon, semicolon, question mark, and exclamation mark (:;?!).
The French know these rules, of course, and dutifully write the space before these punctuation marks. So far, so good.

It gets funny in the browser on smartphones: The browser wraps if necessary and orientates itself on spaces, among other things. With a bit of bad luck, the punctuation mark moves to the next line on its own.

Solution

With my code snippet I try to create a solution as simple as possible:
When the page is loaded in the browser, I search the entire text for spaces followed by a punctuation mark (:;?!) and replace the space with a non-breaking space. The browser then no longer wraps here.

Default
Corrected

I would like to express my sincere thanks to Isabelle de Maublanc for her conceptual support and numerous tests.

Download

The code snippet is available for download here:

french-punctuation.code-snippets.json
Version 1.0.0, 2020-12-29

For installation and use of the downloaded JSON file you will need the plugin Code Snippets.
You can install the JSON file using the "Import" function of the plugin. 
Don't forget to activate the snippet after import.

Alternative: At the end of this page you can view and copy the complete source code of the snippet.

New functionalities and bug fixes are documented in the change log.

Donation

I enjoy developing code snippets and solving requirements with them. I provide the snippets free of charge.

If you like, you can honor my many hours of work with a small coffee donation via PayPal.

  When clicking the button, a connection to PayPal is established.

Your donation will of course be taxed properly by me.

Disclaimer

I have developed and tested the code snippet to the best of my knowledge under WordPress 5.6 and Oxygen 3.6.1. 
I provide the code snippet for free use.
I cannot give any guarantee for the functionality because of the countless possible variations in WordPress environments.
Download and use of this code snippet is at your own risk and responsibility.

Change Log

  • Version 1.0.0 (2020-12-29)
    • Initial release

Source Code

<?php
add_action('wp_footer',function(){
	?>
<script id="maltmann-french-punctuation-script">
(function($){
	$('body :not(script,style)').contents().filter(function() {
		return this.nodeType === 3; // text nodes
	}).replaceWith(function() {
		return this.nodeValue.replace(/ +([\:\;\!\?])/g, ' $1');
	});
})(jQuery);
</script>

<?php
});

First published: Dec 29, 2020 on Code Snippet: French punctuation rules
magnifier