In the railway diagram, double byte language text will overflow the label.

#1

I added some spaces before and after the Chinese. I know there is a better solution, but I don’t have the ability.

#2

Hi, and Welcome!

Can you post a little screenshot, or even better a link to a working version with some text in it.

#3

it looks like

\n\t\tthis.text = text;\n\t\tthis.width = text.length * 8 + 20; /* Assume that each char is .5em, and that the em is 16px */\n\t\tthis.up = 11;\n\t\tthis.down = 11;\n\t}\n\tsubclassOf(Terminal, FakeSVG);\n\tTerminal.prototype.needsSpace = true;\n\tTerminal.prototype.format = function(x, y, width) {\n\t\t// Hook up the two sides if this is narrower than its stated width.\n\t\tvar gaps = determineGaps(width, this.width);\n\t\tPath(x,y).h(gaps[0]).addTo(this);\n\t\tPath(x+gaps[0]+this.width,y).h(gaps[1]).addTo(this);\n\t\tx += gaps[0];\n\n\t\tFakeSVG('rect', {x:x, y:y-11, width:this.width, height:this.up+this.down, rx:10, ry:10}).addTo(this);\n\t\tFakeSVG('text', {x:x+this.width/2, y:y+4}, this.text).addTo(this);\n\t\treturn this;\n\t}\n\n\tfunction NonTerminal(text) {\n\t\tif(!(this instanceof NonTerminal)) return new NonTerminal(text);\n\t\tFakeSVG.call(this, 'g');\n\t\tthis.text = text;\n\t\tthis.width = text.length * 8 + 20;

in https://tiddlywiki.com/#%24%3A%2Fplugins%2Ftiddlywiki%2Frailroad%2Fparser.js

assumes text.length * 8 + 20 is ok (but it is insufficient for double byte characters)

suggests a solution but i don’t know enough to implement this; maybe mario will know?

#4

I think that’s right. IMO it’s not about the number of characters or string.length, it’s about the size some double byte chars need. … As written in the comment it uses 0.5em with 1em expected to be 16px.

So depending on the language used, this may be different from language to language … So we may need a global setting for the plugin, where we can adjust the 0.5em width per character.

1 Like
#5

@list Please post a little screenshot without any extra spaces.

It would also be nice to have a some railroad code similar to the following, but with your characters.

<$railroad text="""
start [:optional] {repeated +","} end
"""/>

If I do add unicode chars, I do get a parser error.

#6

hi mario, (i’m not @list but) i did a successful test with

<$railroad text=""" ["你问我爱你有多深"] {this is in english} ["and another"] """/>

maybe it needs the quotes?

i think approximately chinese requires 1em width per character; e.g. if i recall correctly “roman” numerals in chinese fonts are double the width of roman numerals in roman fonts

is this where the “ch” unit could be used? i.e. where *8 becomes *4ch somehow? css - Specify width in *characters* - Stack Overflow

https://github.com/tabatkins/railroad-diagrams suggests “SVG can’t actually respond to the sizes of content; in particular, there’s no way to make SVG adjust sizing/positioning based on the length of some text. Instead, I guess at some font metrics, which mostly work as long as you’re using a fairly standard monospace font. This works pretty well, but long text inside of a construct might eventually overflow the construct.”

#7

I think for the time being the “workaround” by adding some spaces is the way to go.

Thanks for the testcase. … I’ve had a short look at the latest library at GitHub.

They also have an option now. But it is global. I think we need something “per element” as in your example. With a global setting, the English text “labels” would be too wide then.

There is a second problem is, that our library is 8 years old and modified, to fit the TW needs. eg: links and transclusions.

4 years ago the main library switched to a class based code, which isn’t ES5. … It would be simple to implement the global parameter, but a per element setting would need much more changes.

We would need to have a closer look, if it would be possible to get some of our changes upstream.