Break down long words

Home Forums Reykjavik Break down long words

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #18550

    velden
    Participant

    Break down long words

    Resolved

    Is there an accessible plugin to break down the words in the ‘list child page’ – page type?

    #18552

    Oliver Juhas
    Keymaster

    Hi velden,

    There’s no need for a plugin here. You can achieve this by applying some custom CSS:

    .child-page-title {
    	-webkit-hyphens: auto;
    	-moz-hyphens: auto;
    	hyphens: auto;
    }

    But please note that different browsers apply hyphens differently, some even don’t support this feature, so it is very inconsistent.

    But maybe you want to make the child theme title font smaller? That could also prevent the need for hyphenation.

    .child-page-title {
    	font-size: 119%;
    }

    (Hope I’ve targeted the CSS correctly as you haven’t provided any screenshot or URL where I can check the problem in action ;) )

    Anyway, the theme is styled to break long words into multiple lines. But without hyphens due to aforementioned browser problem.

    Best regards,

    Oliver Juhas
    WebMan Design

    #18756

    velden
    Participant

    Thanks for your reply. We saw that the theme is breaking long words, but not in the Dutch language. F.e. gebruikerssessies should be gebruikers(-)sessies but not gebruik(-)sessies.

    How can we manage that? Or do we need a plugin?

    #18758

    Oliver Juhas
    Keymaster

    Hi velden,

    The theme does not break words using hyphens.

    I’ve just tested this with the “gebruikerssessies” word and with the default theme styles I can not replicate your word break.

    However, with custom styles I’ve provided above I can see the word breaks the way you’ve described. Please understand word breaking is automatic process in browser. Theme has no control over that actually. I suggest reading https://css-tricks.com/almanac/properties/h/hyphenate/ article for more information.

    I’ve actually tested a suggestion from that article to use ­ in your word to hint browser where to apply the hyphen. So, for your case it would look like gebruikers­sessies. (Please note that this needs to be added in HTML mode of the text editor.)

    Best regards,

    Oliver Juhas
    WebMan Design

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.