Hyphenation CSS

support
1

Dear hugo community,

I’m still pretty new to website design and want to implement automatic hyphenation to all my website content.

I designed my homepage using the Zen theme: zen-theme.

To achieve my goal I If first create a CSS (called hyphen.css) (as described here: mozilla-dev) in the layouts folder.
Then a linking to the CSS is added into the section of baseof.html:

< link rel=“stylesheet” type=“css” href=“/layouts/_default/hyphen.css”>

Unfortunately, it won’t work when applying in the markdown files by specifying the text with:

< p lang=“en” class=“auto”>

Is there a way to implement hyphenation all over the website?

Thanks in advance!

2

Markdown strips HTML classes. If you need the above markup then consider using HTML files under your content directory (Hugo supports HTML, these files still need front matter)

Regarding the best way to hyphenate this is an OT question here. The forum is Hugo Support only. For CSS or JS please try asking at StackOverflow and similar forums.

3

I prefer not to. I’d like to define a CSS regarding the hyphenation which applies automatically to the whole content of the site. Something like

html *
{
-webkit-hyphens: auto !important;
-ms-hyphens: auto !important;
hyphens: auto !important;
}

In any way, my question is rather referred to the hugo folder structure: The described CSS has to be placed into the static folder and accessed through the baseof.html as described above?

4

That is not the place for a stylesheet (I just noticed now).

You can try that but remember the word static should be omitted from the link to the stylesheet.

5

Thanks, I already moved it to static/css and refer to it via

< link rel=“stylesheet” type=“css/text” href=“/static/css/hyphen.css”>

Still doesn’t work.

Independently of the the hyphenation, I would like to understand Hugo’s structure here. From what I read, I can overdrive the theme specific configuration by adding my own HTML or CSS. Let’s say I just want to change the color of all of my text on the website. Here, I’d also create a similar CSS and put it into the static/css folder:

html *
{
color: blue !important;
}

And refer to it via the baseof.html as mentioned above.
Is that the correct way of doing this in Hugo?

6

My phone’s auto-correct did its wonders. In my comment above I meant to type that you should omit the word /static/ from the link to the stylesheet and instead what was published in my comment was commit (which is wrong).

Change the link to:
< link rel=“stylesheet” type=“css/text” href="/css/hyphen.css">

You never reference the static folder when linking to a file that is its child.

The only time such a reference is needed is when there is a need to traverse a project’s directory structure with the readDir and readFile functions.

P.S. Also take care not to copy paste quotes from the forum because Discourse changes these into smart quotes and these will not work in Go templates.

2 Likes
7

That makes sense, if Hugo already expects it to be in the static folder!

Yay it works :smiley: !

Again, it was just a small issue, having a big effect!

Thanks a lot for your help!