Hyphenate Text in Cardstack


#1

Hi, I would need to hyphenate text in the cards text stack. Is there a way to do that?

Thank you,
Jan


#2

You’re going to need to give me more to go on @Fuellemann. An example would be helpful as will a description of what you’re doing and what is “going wrong” to keep you from using hyphenated text.


#3

Where are your magic abilities :sweat_smile: ?

I friend of mine has tested my current site with a tablet. And he notices some longer words in a card group stack which are not hyphenated and thus breaking the design:

In the card stack I am using the card pragraph for the text.


#4

That is not a problem with the stack but that the word is soooo long that even when it is on a line of its own it will not fit within the dimensions of the containing element. The Card stack uses the same word wrap as the Paragraph stack (and the rest) which is the CSS: word-wrap: normal;

You’ll see here that it happens with a Paragraph stack as well as a normal Stacks Text stack when over constrained:

You could apply different CSS to the affected area in whatever way you might like or you could try redesigning the affected area to be less constrained – perhaps using 2 columns instead of one? or causing the first column to take up 12 units at that breakpoint and the other two columns to use 6 units each.

That said, it is just your crazy long German words and a tightly constrained space that are opposing one another here.

Note event if you use the CSS word-wrap: break-word it will not add in a hyphen, it will just break the extra long word into two chunks and drop half of it to the next line.


#5

Thanks, I see. I am now using the Hyphenate stack from Marathia, wich works fine, and your normal paragraph stack.

So - to add to your long list of possible todos: I herby officially request support of hyphenation for Foundry (it will make my life a lot easier for these crazy long german words :slight_smile: )

Jan


#6

Foundry supports normal word breaks as it should. The stack you linked to has this set of limitations on the product page:

37%20AM

This is in no way knocking the stack, as it seems good, but with those number of limitations, based off browser choice and OS and whatnot, it doesn’t seem like it would be a good thing to work into a standard stack like Paragraph. It would probably be better to not over constrain a column of text, IMO.


#7

True. So it seems there is no general solution available. Thanks for looking into!

Jan