Using find and replace to add color formatting to existing dialogue

Authoring Twine
,
1

Twine Version: 2.7.1.0
Recently a player told me it was hard for them to parse dialog from text in a game I’m making, since I tend to include them in the same paragraphs. I thought it was fine prior to this because the PC is silent and they’re only ever “conversing” with one character. I figured the easiest way to make it ‘pop’ for them would be to change the color of the dialogue to be different from the text, and since its only ever one character at a time I wouldn’t even need different colors. But the game is over half done and going back to add color formatting to every line of dialogue in every passage by hand would be a bit much for a tiny quality of life change.

I know there must be a way to use Java script to make any “” and anything between them a color, or use find and replace regex to add color formatting to anything between “” without replacing the text, but I’m not trained in Java so I’ve no clue how and no one seems to have had a similar enough problem that I could adjust their solution to work that I could find. Any Java wizard who could spell it out would be greatly appreciated. (Seriously considering ordering a copy of Java for dummies just so I can handle stuff like this myself in the future.)

2

Hi!

I don’t have a JavaScript solution (btw Java =/= JavaScript, two v different languages) but I have two other solutions:

1- Using base HTML and CSS:

:: Your passage

<span class="character">"and this is what they said"</span>
OR
@@.character; "and this is what they said" @@

:: StyleSheet
.character { color: red }

2- Using a widget

:: Widget passage [widget]
<<widget "character" container>>
   <span class="character">_contents</span>
<</widget>>

:: Your Passage
<<character>>"and this is what they said"<</span>>

:: StyleSheet
.character { color: red }

Hopefully this helps :slight_smile:

1 Like
3

BTW, just checked on amazon: there’s also a javascript for dummies…

Best regards from Italy,
dott. Piergiorgio.

4
Obligatory: JavaScript ≠ Java

As has already been pointed out, JavaScript ≠ Java. Aside from an unfortunate name similarity due to industry shenanigans and a minuscule bit of API borrowing, they are not related, nor do they have much in common other than sharing some core C-style syntax.

 

In theory, one could match pairs of quotes within your text and wrap the result within an element so that styling could be applied. SugarCube even has a callback hook precisely suited for that type of operation— Config.passages.onProcess.

Now. Note that I said in theory, because in practice that’s probably harder than you think.

Your post is showing typographic (typographic, curly, curved, book, smart) quotes, are you actually using those or is that a bit of character shenanigans—from copy-pasting, forum adjustment, whatever? If you are using typographic quotes, how sure are you that you’ve gotten them correct most of the time for your use case?

I’m asking because pair matching in text can get ugly fast, and not just with quotes. A single missed or incorrectly placed character can cause chaos. Using typographic quotes, as opposed to straight (neutral, vertical, straight, typewriter, dumb) quotes, helps a tiny bit, since the opening and closing sequence differ, but missing or incorrectly placed characters can still make a hash of things.

Beyond that, usage of quotes, in general, varies pretty wildly across the world, so making assumptions is particularly bad in this case. Could you provide an exact sample of your text? That would help.

5

Uh, I don’t think I use typographic quotes, I just hit the standard input on the keyboard for my quotes, that must be something this site does. An example text would be:

A look of dawning comprehension crosses her face, and she visibly relaxes, saying, "You must be <<PName>>, aren't you?" When you affirm that you are, she claps her hands together and smiles excitedly.

6

You might get something from this…

https://stackoverflow.com/questions/10182618/set-css-of-words-enclosed-in-double-quotes

However, I’d probably try doing some regex search and replace within a selected block of content in a program like Notepad++. You could find all "* and *" and replace them with either of what Manon suggested for CSS styling. It’d be like you manually edited the code, but you didn’t… if you get my meaning. Make a backup first. :wink: