Ignore twine formatting, for ASCII art

agrilledfish

(cross-post from Tweecode / Twine google group)

Hello, I'm wondering if there's anyway to designate a section in a passage that should not be twine formatted, something like the <pre> tag in HTML. I'm making a story with a lot of ASCII art, and things like == and __ are triggering the formatting where I don't want them to. Is there a way to designate a section that should not be formatted?

Erik Temple

<nowiki></nowiki> or three single quotes: http://tiddlywiki.tiddlyspace.com/TiddlyWiki Markup

TheMadExile

Erik wrote:

<nowiki></nowiki> or three single quotes: http://tiddlywiki.tiddlyspace.com/TiddlyWiki Markup

That's three double-quotes, actually.  And I don't think that the vanilla headers include the raw text formatter.  The vanilla headers are based on an older version of the TiddlyWiki syntax, which I don't think has ever been updated.  I'm pretty sure that SugarCube supports most of the current TiddlyWiki syntax though.

@agrilledfish:
If you're using one of the vanilla headers, you should be able to add it fairly easily though.  I believe this will work, just add it to a script tagged passage:


(function(){
var charFormatter = Wikifier.formatters.pop();
Wikifier.formatters.push({
name: "rawText",
match: "\"{3}|<nowiki>",
lookaheadRegExp: /(?:\"{3}|<nowiki>)((?:.|\n)*?)(?:\"{3}|<\/nowiki>)/gm,
handler: function(w) {
this.lookaheadRegExp.lastIndex = w.matchStart;
var lookaheadMatch = this.lookaheadRegExp.exec(w.source);
if (lookaheadMatch &amp;&amp; lookaheadMatch.index === w.matchStart) {
insertElement(w.output, "span", null, null, lookaheadMatch[1]);
w.nextMatch = this.lookaheadRegExp.lastIndex;
}
}
}, charFormatter);
}());


L

You don't need any scripts. You just need triple curly braces:


{{{__**Some text**__}}}


But, I didn't mention on the wiki until just now that the monospace code does this, though - so thanks.

If you want to style the resultant element, I believe the CSS selector " .passage code " will work.

TheMadExile

Ah, this is true.  agrilledfish doesn't simply want non-wikified text, which would require the raw text formatter.  Since he's doing ASCII art, he would want to use the monospaced text formatter.  Good catch.

Neyowolf

This is my problem exactly!

Neyowolf

None of these solutions worked for me

Neyowolf

Just got ASCII working. Use Pre tags outside of a triple curly bracket and you're good to go.

L

Neyowolf wrote:

None of these solutions worked for me

I'd like to see how exactly the triple curly braces failed, if you wouldn't mind.

Neyowolf

It just doesn't work, haha

L

If I may dissent:

As you can see, it works for this example (barring some possible CSS adjustments like line-height). So, can I ask why it didn't work for you?

Neyowolf

I just tried again to confirm, and it doesn't work with just brackets. You need brackets and pre tags or else your ASCII could still come out smashed.
Perhaps it has something to do with the level of detail.

L

I would like to see the exact ASCII art picture you're using for these tests, if I may.

Neyowolf

They can't be published right now, L

agrilledfish

Thanks for all the replies. I tried the triple braces, but the monospaced font was what was messing up the art, which requires a Japanese font. I was able to fix it with some custom CSS. People trying to use ascii art that relies on non-fixed-width fonts can probably use a similar solution.

Passage


<div class="aa">
{{{
(Ascii art goes here)
}}}
</div>


Stylesheet


div.aa pre{
font-family: Mona,'MS PGothic' !important;
line-height: 100% !important;
}


Result:


Thanks again for helping me figure it out!
Edit: It seems that a {{{one-liner}}} turns into a code tag instead of pre. Make sure to adjust your CSS accordingly.

mth

agrilledfish wrote:

Thanks for all the replies. I tried the triple braces, but the monospaced font was what was messing up the art, which requires a Japanese font.

With Japanese characters, it's not exactly ASCII art, at least not in the literal meaning of ASCII. 

Dazakiwi38

Reading through this thread I sort of succeeded in displaying the ascii text, but looks like nothing from what i copied the title text from on a Ascii Art Generator =>http://patorjk.com/software/taag/#p=display&f=Graffiti&t=Type%20Something%20 A cool resource for other Twine users, if this can work.

Here is what I am after;

[URL=http://s157.photobucket.com/user/Daza_07/media/Ascii_art_bad02.jpg.html][IMG]http://i157.photobucket.com/albums/t60/Daza_07/Ascii_art_bad02.jpg[/img][/URL]

This is how it's displayed in Twine as per instructions in this thread;

[URL=http://s157.photobucket.com/user/Daza_07/media/Ascii_art_bad01.jpg.html][IMG]http://i157.photobucket.com/albums/t60/Daza_07/Ascii_art_bad01.jpg[/img][/URL]

I am using Sugarcube btw, don't know if that makes much difference.

I didn't change the font in the stylesheet for this as I don't know what to change it too. The text was generated on the website I linked above, but as far as i can tell the fonts in the selection menu pertain to style of ascii text you want to display as a title.

Any ideas?

Sharpe

Until someone with actual knowledge comes along to give you a better answer, you'll most likely want any sort of monospace font. The yen symbol () should all be backslashes. I'm guessing whatever font you're using doesn't recognize the copied font's backslashes. That appears to be the only problem to me.

You might try some flavor of Courier. You might have to hand-replace the backslashes after the copy and paste. You might also have to work with the spacing a tad.

All this is said without reading the post, so take it with a grain of salt.

TheMadExile

If you're using the example by agrilledfish, it's because of the font they chose.  Neither Mona nor MS PGothic is ASCII compatible, they're both Shift JIS fonts.  Technically speaking, he was doing Shift JIS art, not ASCII art.

Try this (and only this):


<html><pre style="line-height:1">
_____ ___ _ _
/ ___| / _ \ | | | |
\ `--. _ __ __ _ ___ ___/ /_\ \ __| |_ _____ _ __ | |_ _ _ _ __ ___
`--. \ '_ \ / _` |/ __/ _ \ _ |/ _` \ \ / / _ \ '_ \| __| | | | '__/ _ \
/\__/ / |_) | (_| | (_| __/ | | | (_| |\ V / __/ | | | |_| |_| | | | __/
\____/| .__/ \__,_|\___\___\_| |_/\__,_| \_/ \___|_| |_|\__|\__,_|_| \___|
| |
|_|</pre></html>


Dazakiwi38

Thanks for your replies.

@Sharpe your suggestion i tried first and it works, i change the font to Courier as your suggested and it displays it perfectly. 

TheMadExile's example works fine too, probably easier to implement since you do not need a stylesheet. 

This is neat. Cheers