I’m trying to publish my Twine/Chapbook creation to itch.io (following the published guide for how to do so) and I’m encountering really spotty results with my font of choice (a Google font) and some additional formatting (namely, the link color.)
Both work great in editor and on my locally published html file. But uploading them to itch, sometimes the font works, sometimes it doesn’t. I’ve tried changing which font I’m using (and not using a Google external font) and it still seems inconsistent. The link text formatting never works. If I restart the story or refresh my browser or do anything, seemingly, the game reverts to the Chapbook default styles.
I’ve moved where I do my formatting (including trying putting it at the top of EVERY page, which seems excessive) but nothing results in consistent behavior.
I’m not sure if you are using dark or light themes (or letting the user choose), but keep in mind that you have to preface certain styles with dark for dark themes, as in config.style.dark.page.color: 'red-4'
Anyway, I was testing your font settings and they seem fine.
I created a simple story (I use a dark theme):
config.style.googleFont: '<link href="https://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet">'
config.style.page.font: 'AudioWide 32'
config.style.dark.page.color: 'yellow-2'
config.style.dark.page.link.color: 'red-4'
--
This text should be yellow!
[[This link should be red!->CLICK ME]]
Upon playing it, I see:
I then click the link, and then I click RESTART and the page looks like:
Then I click RESTART again and it goes back to ketchup and mustard with that totally awesome font (that I will now use in all my emails to coworkers and clients ).
I don’t know if my bug is related to yours, but there seems to be a loading order problem in Chapbook (I believe it existed even before the 2.0 update when I was trying to extend Chapbook with custom inserts and such). One thing you can do is clear all your cache for itch.io and see if that makes things work better.
Note: I was using Chrome on Windows with the online editor and just hit PLAY. I was able to get different instances of the style reverting when refreshing the page as well as hitting RESTART.
@klembot Also, I just noticed that the background went from almost black (#1a1a1a) in the first image to a dark grey (#222222) in the second. It’s like it fell back to a default style that’s on another level. I didn’t even change the background color so it’s something more than just not reading the custom config styles.
Also a thing I’ve encountered - in testing if you “Play from Here” it doesn’t hit your formatting passage and everything will be plain.
When uploading to itch, there’s a cookie that remembers where you were in the game, so sometimes when you start again you’ll have the old formatting and need to restart fresh to see a newly updated CSS stack. That’s a Chapbook thing that tries to put you right where you left off when re-loading.
Appreciate the additional info, friends! I am keeping in mind the “formatting doesn’t exist if you don’t start from the passage with the formatting.”
HAL’s formatting reset and itch cookie holdover sounds a bit like what I’m seeing.
For what it’s worth, I am only using one theme (and have the switching link disabled.) Presumably the default theme is the “light” theme and not the dark.
It’s funny you mentioned that. I noticed Brendan used a passage called “format” that he embeds into one of the header slots for that very reason. Every page has the header so every page gets his style configuration.
Edit: Actually, the header slot is set in the starting passage so maybe that isn’t quite right. I don’t know anymore.
We’ll get an answer soon from Chris I’m sure.
Edit Again: Actually that should work because the configuration must be stored in the local storage that “remembers” all story variables… and it should remember configuration variables as well. The header slot is a variable in the story… and that way, if the game gets updated while someone has a “saved game”, their styles should be updated without requiring them to restart the game. Brendan, you sly dog.
For what it’s worth, I am only using one theme (and have the switching link disabled.) Presumably the default theme is the “light” theme and not the dark.
I get a dark theme by default, like if I don’t have any styling configuration with a fresh story. When I switch the theme it shows the light one. If I hit refresh or restart, I get the dark theme again. It seems to read your OS/browser theme setting as it’s default setting… which is kind of weird if you’re styling your story for a certain look.
Again, I think we’ll have to wait for an official answer.
Actually, the header slot is set in the starting passage so maybe that isn’t quite right. I don’t know anymore.
I’ve tried a couple of different implementations of this. I might go back to having the formatting passage assigned in every other passage just to be safe, but I didn’t want to spend a lot more time on it when it’s clear the “ordinary” implementation isn’t giving me straightforward results!
I was gonna say - I don’t think Chapbook has formal header passages. That’s a Sugarcube feature where a special passage named “PassageHeader” will run before every passage where you can check stats or create a status-line for every page. There’s also “PassageFooter” which runs at the end after every passage renders.
In Chapbook you’d probably need to embed a passage manually on each page by including
{embed passage: 'PageHeader'}
on every passage where you want it.
But yeah, most of the time when I test my game I’m like “Why isn’t the formatting working…oh. I started in the middle, that’s why…”
This is actually kind of useful for certain things. I’ve set up opening screens where if the player wants to switch to dark mode or change to sans-serif I send them to a new passage with the formatting above the dashes and then embed the page they were just looking at. You can also have passages with formatting instructions and embed that somewhere if you want the text to suddenly turn green.
I thought Chapbook headers were for formatting the display, but I suppose you could put some if/thens on them or maybe embed a passage as part of the header? The documentation sounds like you can do some stuff with the header but its primary purpose is display.
config.header.center: "Midday"
The contents of the variable are interpreted the same way that passage text is, so you can use links, inserts, and, technically, modifiers in the variables:
config.header.right: "Money left: ]money}"
config.footer.center: "[[Other stories in this anthology]]"
The header and footer are designed to display a single line of text, though, so modifiers are probably of limited use. The header and footer are updated every time a new passage is shown in the body of the page, so variable inserts like the one shown above will automatically update during play.
I wonder if you could embed a non-displaying passage, say in config.footer.left so it doesn’t show anything, but increments a counter, or checks health, something like that?
Just a quick update: this problem is still extant, but the itch link earlier in the thread is no longer a useful test case, as I’ve redone the story in SugarCube so that I can hit publish and move on to another project.
another formatting issue is that the line separating the header from the main text don’t appear, whatever I put in the vars section (forcing me to rearrange the footer for an indispensable feature and sacrificing another feature or two whose I planned to put in the header, because of the lack of visible distinction between header and main text. (chapbook 2.2.0)
Hi folks, a reminder that if you think there’s a bug with Chapbook, the best thing to do is to open an issue. I do read this forum but not religiously, but the GitHub issue tracker is more or less my to-do list for Chapbook. Questions about how best to do something are definitely appropriate here.
@HAL9000 appreciate the simplified test case. I created an issue accordingly and put a workaround that works for me, at least, in Safari. It would be helpful if other people could test that out and see if it works for them too. It seems to be a timing issue when the page first loads, so it’s a bit tricky to debug.
I’m unsure if I need an account on github (is a trusted site, but not one I use frequently outside DL’d sources…) but on the issues I found during the development of IFComp entry I’m unsure when to post it (dannii know why, I’ll sent him later a draft proposal of a clear-cut RoE, but now I’m in really bad mood (disagreements with my sister, so pls don’t ask about…) so I apologise for the delay.
).
