Text goes out of boundary

[orsinium]

Maybe, something wrong with my fonts

[nwtgck]

@orsinium Thank you for reporting. Can I ask questions? The repository is https://github.com/dephell/dephell? The image type is SVG? I'd like to know about your environment if possible.

Here is a screenshot of a card of dephell/dephell in SVG in gh-card.dev in Safari in macOS.

[orsinium]

Thank you for your reply :)

Both svg and png give the same bug on original site. However, when I pasted the link on it here, it would be rendered correctly. That's strange. I'll discover it a bit tomorrow.

[nwtgck]

@orsinium Thanks.

That's strange. I'll discover it a bit tomorrow.

It's storage. But we have proof in the screenshot in the first issue comment. In PNG, I know some repos have the same problem.

[nwtgck]

The purpose of this comment is to provide the current implementation causing this issue.

Details of implementation

In the current implementation, a description text of repo is not auto line-wrapped. Very poor implementation is here. It splits a description into lines which may go out of boundary.

gh-card/backend/src/main/scala/io/github/nwtgck/gh_card/GitHubRepositorySvgGenerator.scala

Lines 6 to 24 in 74c93cb

	// TODO: Make it declarative
	// TODO: Support non-English description
	private def descriptionToLines(description: String): List[String] = {
	val splitter = " "
	val words = description.split(splitter)
	var line: String = ""
	var lines: List[String] = List.empty
	for(word <- words) {
	line += word + splitter
	if (line.length > 55) {
	lines :+= line
	line = ""
	}
	}
	if (line != "") {
	lines :+= line
	}
	lines
	}

I don't think the hard-coded > 55 is good at all. But I found it works well in most cases which I investigated manually, so I use it.

Solution candidate

According to https://stackoverflow.com/a/4991339/2885946, text wrapping is not supported in SVG 1.1.

Text wrapping is not part of SVG1.1

The answer says <foreignObject> and HTML are a solution. It may be a general solution to solve this issue.