Sugarcube? Overflowing period?

Question

Hey , so I happened to catch this odd behavior, and I wanted to ask if there's anything I should be doing to prevent it. It might just be a twine thing in general, not really connected to sugarcube. I'm not sure. Or maybe it's just how my browser is rendering the screen. I dunno. But, anyway...

Pic:

https://ibb.co/i5tGXG

Sorry for the tininess of that pic. The screen it's from it pretty dirty.

But, here's the code that's producing this. Specifically, the "@@#pcBlah;$pcBlah@@.<<else>>" part.

...<<if $blahblah[0] === "hmmm">>blah... //@@#pcSize;$pcSize@@,// ''@@#pcLength;$pcLength@@ blah blah blah'' and @@#pcBlah;$pcBlah@@.<<else>>blah<</if>>...

So, anyone encounter this? Anyone have their own solution on how best to mitigate this? Or is it just something people have come to accept? Or am I doing something wrong here?

It isn't really a major issue for me. Just a bit jarring to see.

===

Oh, it just occurred to me that it might not be all that obvious, what's going on here with that kind of pic. Essentially, the period has separated from the word it's supposed to connect to. It's dropped off the previous line and is now sitting on its own. So... it's pretty ugly.

===

Anyway, here's a slightly bigger pic. I'll be moving on, so this is probably the last chance I'll have to take a pic of it.

https://ibb.co/mdGZmb

===

Well, investigating the possibilities of using special characters to keep the work and the period together, I found that they didn't work. So, zero-width no-break ones and whatever. A few of them. No luck.

Answer 1

That shouldn't be happening.  Even separated by an element as they are, the browser's word wrapping algorithm should be treating the content of the <span id="pcBlah"> and the period as adjacent/conjoined tokens for the purposes of wrapping.

The only thing I can think of off-hand is that the styles associated with the ID pcBlah and/or the value of the story variable $pcBlah must be the cause.

Comments

Yeah, it's strange. I see it happening in my current project, but if I copy the lines and variables over into a new project, then I don't see that behavior anymore.

I have altered the styles a bit, from the default ones. But, wanting to test, I disabled the stylesheet entirely. So, it's mostly black again. But, I still see the same behavior. So, I don't think it's got anything to do with changes in styles.

Maybe... it's the changes I did... No, I can only really think of the changes I did via the stylesheet. If I take that away, then it's just normally written passages.

Do you want to look at this behavior? Maybe you could debug what's happening? I could upload it privately, but I don't thin kit's really ready for general perusal. Could I email it to you? I'll zip it. I could include the source too, since they're just in .tw files.

---

I can take a look at it if you like.  The easiest thing would be to put it up on Dropbox, Google Drive, or something like that and e-mail me a private share link.  I suppose you could also simply attach it to an e-mail, if it's not too large.

---

After giving your project a quick once over, at a guess, it's likely because you're running it in Debug/Test Mode.  The debug views are generated by special markup interspersed within your regular markup, which only happens in that mode.  Toggling the views off only hides that debugging markup, so simply being in the mode can produce artifacts which you would not see under normal usage.

I'll test it out in depth tomorrow, but I'm fairly sure my guess is probably correct.  You may test for yourself right now by testing your project outside of Debug/Test Mode.

---

Yeah, I just tried it. You were right. So, I'll mark this one as answered. Thanks. I probably would have gone on not knowing, since I've gotten into the habit of just running debug. Cool. I can just go back to writing now.

---

I'm still going to look into more tomorrow, as I don't think that should be happening regardless.  It could be that some of the debugging markup isn't being hidden properly.

---

I've looked into it.  As I thought, some of the debug view markup wasn't being properly hidden resulting in the anomalous line wrapping.

The issue will be fixed in the next SugarCube release.

Answer 2

Generally (in the context of line-wrapping) a period placed at the end of a word is associated as part of that word, which is why word+period is treated as a single unit. The same is true for other characters like the coma, colon, semi-colon, etc.

eg. The following Passage content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 12345 magna aliqua.

... gets converted into HTML like the following.

<div id="passage-untitled-passage" data-passage="Untitled Passage" class="passage">
	"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 12345 magna aliqua."
</div>

... you will notice that the generated HTML consists of a parent div element with a single child HTML TextNode element containing the line of text.
note: To indicate that the line of text in the above is actually a HTML TextNode I have wrapped that line in double quotes, which is how the Web Developer tools built into your web-browser also generally represents a Text Node. These double quotes are not included/displayed within the visible output.

If we change that line of text to include Custom Styling like the following.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 12345 magna @@aliqua@@.

... the generated HTML would look like the following.

<div id="passage-untitled-passage" data-passage="Untitled Passage" class="passage">
	"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 12345 magna "
	<span class="marked">aliqua</span>
	"."
</div>

... and you will notice that the parent div element now has three children, two TextNodes and a span element. You will also notice that the period is no longer directly associated with the word aliqua, and this is possibly the cause of your issue if the web-browser code that handles line wrapping incorrectly dissociates the period and treats it as a single unit.

You didn't state what brand or version of web-browser you are using, what brand or version of operating system you're running that web-browsers on, not what type of device (desktop/mobile) you are using so I wasn't able to duplicate your environment.

I wasn't able to reproduce your issue with either Chrome or Firefox on Windows 10, but then again the issue may only occur for specific edge-cases and/or for particular combinations of web-browser / operating system / device.

I can only suggest placing the period inside the Custom Styling.

Comments

Hmm, that's pretty useful info.

I took your advice and moved one of the problem ones (this one a comma), to the inside of the id stuff. I dunno what it's called. But I did this: 

In terms of body hair, you have //@@#pcPubes;$pcPubes@@,// your legs @@#pcLegs;$pcLegs,@@ and your underarms @@#pcUnderarms;$pcUnderarms@@.

So, I moved it like so: @@#pcLegs;$pcLegs,@@

But, it does the same thing. Also of note is that @@#pcUnderarms;$pcUnderarms@@. exhibits the same behavior. I was sure to reset and things, but no change.

I've tried with Firefox and Yandex. In' on Win10. If you're curious about the code, I could send you a link to what I uploaded. I just don't wanna paste the link here.

---

The TheMadExile is way more experienced in this subject matter than I am, he will be able to give you better advice.

---

The culprit here is the variable debug view markup, so simply placing the punctuation within the custom styles markup isn't going to work.

I don't recommend attempting workarounds in this situation regardless.  All you're likely to do is to screw up the regular/non-debug version.

Edit: Also.  See my last reply in the other answer above.