Skip to content

Conversation

@developedbygeo
Copy link

I really liked this project (well done by the way!) and wanted to work on the title issue.

My goal was to allow up to 220 character-long titles, without overflowing the parent container or overlapping with the author's initials. Of course, this can further be adjusted to accommodate even longer titles.

The approach is a JS/CSS combination, by dynamically adjusting the font size, adding a little bit of padding at the bottom, and evaluating the min/max spine height accordingly.

Looking forward to hearing your thoughts!

@petargyurov
Copy link
Owner

Hey, thank you for the contribution! I like this idea and it seems to work well. There are cases where the title still overlaps with the author's initials though.

If you take a look at PR #5 you'll see we're thinking of just truncating the title if it's over a certain character length. And PR #7 seems to be a mix of your solution and truncation, though I think I prefer your implementation of dynamic font-size and padding better.

Curious to hear what you think. Thanks

@developedbygeo
Copy link
Author

I did have a look at PR #5, but I am generally not fond of truncating text with an ellipsis in this context.
The idea behind my PR is that the dev that is using this component can easily tap into the settings and modify them to their liking, without obscuring the title's text content.

This could be done by either adjusting the randomHeight's lower and upper limits (if the adjustment is needed), or by tapping into the adjustTextStyle and providing their preferable font size and padding-bottom.

If you have any suggestions or ideas on how to further improve this, I'd certainly be interested to have a look!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants