Text hyphenation, paragraph hyphenate

There might be a simple answer or a quick way to solve this… but I was wondering how one can utilize hyphenation on a paragraph of text?

I mean adobe applications have e a hyphenation on and off button. Is there a simple way to incorporate hyphens?

Any help will be greatly appreciated!

1 Like

If you wanted all text to be hyphenated, you could add this CSS to the Head of your document:

  	  -webkit-hyphens: auto;
  	  -moz-hyphens: auto;
  	  -ms-hyphens: auto;
  	  hyphens: auto;

Or if you just wanted to set hyphenation on a single element, you could set a class on an element (like hyphen) and you would then replace .HYPE_element with .hyphen.

You can edit the contents of the <head>…</head> of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector.


Works like a charm!

Thank you for the prompt response.

While Im not big on hyphens, I do know some will eventually will find it useful. Like with most apps, its a check box of some sort more or less. This workaround is pretty simple but it wouldn’t hurt to have a check box. Specially The ‘Add More Fonts’ emulated dropdown button which has dead space in front and in the end the one produces a pop up of of three choices when clicked. The interaction could work based on specific targeted text box element. @Jonathan perhaps add-on for Hype 5? :joy:

Almost felt embarrassed for missing the hyphenate button… but then I checked again and it was not there. haha whew

It would be a simple and nice feature for people who are really getting down to the details of typography when working within a certain grid/column.

1 Like

Yeah man, I thought it was there just hidden in the menu turns out its not there at all whhha sup with that? No love for Hyphens?

We keep track of feature requests… For this post, I’m counting 2 requests for exposing hyphenation in the UI, and one from @photics. I’ll add my vote, but I only count for half a vote. (Like the first post to add your vote).

That post, from almost three years ago, was a bit incoherent. (I must have been tired.) I don’t think I was requesting a Hyphenation feature. Also, in general, I don’t usually make feature requests. I make suggestions to make the software better. :smile:

But looking back, I think that suggestion was more about specifying the document language. I probably wouldn’t recommend Hype manage that today – unless there was a way to change it dynamically. If I’m specifying the language, it usually means the document has multi-lingual support.

As for hyphens… eh… I think the checkbox Pete mentioned is a good idea. However, I don’t think it’s so important that it should add weight to the exported Hype JavaScript. (I think Hype should dynamically create a custom HYPE-xxx.min.js file exported, that is only the code needed. Advertisers would greatly benefit from that.)

Hyphens are most useful with “Block Justified” text. Hype does have that option. If it’s just a few lines of CSS, maybe it’s not such a bad idea. Gotta keep that JS lean though!

Also… heh… Hyphenation… HYPEnation :us:


Woopdidoo so patriotic aren’t we? :joy:

I agree, its not that a big of deal. How about just doing what @daniel did with css only the writing will be done by Hype when clicking the checkbox. This way nothing is added to .JS Think Photoshop Actions. :innocent: That opens up another topic @jonathan Actions, creating your actions within Hype. Not the actions your thinking of kind of like recorded actions much like what you can do with Automater? Anyhow, just a thought.

Adding a single property like this wouldn’t actually add too much weight to the Hype runtime. (That said there are definitely different strategies in delivering a runtime that would be nice to explore. Advertisers don’t seem to have a problem with CDNs since this counts the runtime as 0b, though this is unfair to users!)

I’m going to break apart a different topic for @petester’s comment about actions.

Thanks for the request!