Hyphenation in headings – is that possible?

Kirby 2 Solved ✅
1

Which actually is my question. I tried something like that in the CSS

h2.title{
	...
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	}

But still very long words break in an ugly manner on small screens. So I added this in the title line:

This is a heading with a superduper­trooper long word in it.

Regrettably the ­ does not have any effect here. Has anybody an idea how to manage that? (While writing this I notice that ­ works on this board - I have to wrap it in a code tag, so that it is displayed…)

2

What do you mean by

They don’t break where it would be grammatically correct? And what is the matter with ­? Where have you put it, in the text files or in the html?

3

I should elaborate a bit: The language is set, to make hyphenation work. And it works indeed (and it with correct grammar), but not for instance on the Opera browser. So I tried to force it a bit for Opera (and others where this might not work either).

The hyphenation is a general thing, and ­ is something for singular cases, I would say, or not? Since it’s not a general issue but only on certain pages I would like ­ to apply in the text file. Or is there any alternative?

4

Sadly, browser support for the hyphens property is currently far from perfect. If you need an extensive solution that works across languages, there are two alternatives:

  • PHP Typography is a very extensive PHP class that can automatically insert the ­ character into HTML code depending on the rules of many laguages. It also provides a very reliable »smart quotes«-feature and much more. Intergration can be done by adding a filter to kirbytext. You can also configure minimum characters before and after hyphenation. But be aware, that this is very resource-hungry script that should only be used together with caching. Another downside of using &shy characters in general is, that they will also be copied to the clipboard, when text is selected and copied. When editing the copied text later, you might have to deal with invisible characters beetween the letters.
  • hypenator.js Is a client-side JavaScript-based solution. It has the great advantage, that you can load it conditionally, if the browser does not support CSS hyphenation. Biggest downside: Depeding on the language of you content the hyphenation rules have to be loaded and for some languages with very complex rules like German, this adds notable weight to your site. Also, loading performance my be decreased because the browser has to do all the work when your site is loaded.

Hope, I was able to help you!

5

I have tested using &shy on the current Opera browser for Mac where it works as it should. Unfortunately, I cannot access my local host from Opera Mini.

As @fabianmichael writes above, browser support for css hyphens is limited: http://caniuse.com/#search=hyphens

Using hyphenator.js is certainly a workaround but the question is if it the additional weight is justified for just a few headlines.

6

Thanks a lot for the nice support. I will check the suggested workarounds. I don’t have the slightest idea why my opera is behaving that way, but well…

Anyhow: Kirby is a revealation! I love it already, at least for smaller solutions, having worked with WordPress for many years. Actually, just to allow a little chat here: I intend to make a “book” where each page can look different, but WordPress is not flexible enough for that task.
So looking for something that would allow me the biggest creative freedom but that at the same time would provide a frameworkt to organize all that stuff in a quick and reasonable way. And: here I am. I am very pleased.

I will pay soon, promise!

1 Like