Yeah, this came up with a blank page when I tried it. I checked the encoding option, too.
It’s starting to look like I might have a new coding project on my hands…
For getting nicely formatted second-column annotations in HTML, this might be a good resource: https://www.gwern.net/Sidenotes
2 Likes
Yeah, I’ve done this when testing TADS games too, I don’t think there are any material differences there. You’re definitely right that it does make correcting typos a bit more annoying since you need to write out the place where the typo is and then correct it, but I personally find it easier than going back and re-annotating.
1 Like
My friend, will you please look upon the dripping amounts of style on this webpage? Oh my god.
Just look at that.
I am in awe. Do you think that was automated, or do they have ultra-fancy jpgs of capital letters just hanging around their resource folder, just for opportunities like these?
What if I started using this while typing on the forum? Just have big ol’ 64x64, ultra-stylish, capital letters to open every post. Absolutely incredible. I need to write an email to whoever made this webpage. They need to know that their work has not gone unappreciated.
2 Likes
xcellent! Might even do an convention were >*SP werre > were would be for spellcheck, just to make CTRL+F work better later.
EDIT: See? Whipped up this fancy capital “E” in like 1.5 minutes. Look at how majestic that is! Gah!
(I’m sorry, I will not actually do this as a persistent thing.)
4 Likes
From looking with the Inspect Tool, it might be an actual font. nevermind, it’s prob an image. Maybe some sort of fancy JavaScrip coding transforming the first letter into an image?
1 Like
I suspect it’s an ornamental font with all the letters and the page has rules to make it wrap like that.
1 Like
Gah, welcome to the future, everyone! What a time to be alive! Imagine showing this to people who used to hand-paint such things into books! It’d blow their minds, for multiple reasons!
For example…
“Why is a stranger with a beard and black kilt excitedly showing me a glowing picture on a handheld rectangle?? Are you Scottish…? Aren’t kilts usually plaid? Who are you?? Get out of my house, fiend!!”
— Some rando from the before-times, probably
Okay, for real, I appreciate you posting this. I know I suddenly lost myself while beholding the MIGHTY “S”, but once I pull myself through its blinding brilliance, I’m gonna figure out how to implement some of this into an HTML-ized transcript. I feel bad for not taking the time to actually thank you, before I went off on a silly bit.
3 Likes
Maybe a <span> wrapped around the first letter where you defined the font family as the fancy calligraphy font of your choice?
2 Likes
sigh I tried not to be nerd-sniped into this conversation, but I can’t resist adding that the ::first-letter CSS pseudo-selector exists.
5 Likes
Ooooh 
Thank you!
2 Likes
Brad, please promise me that you will not resist being nerd-sniped into any conversation. I’m absolutely here for this web-dev stuff, lol.
Also, I need you all to know that the coffee kicked in maybe 45 min ago, and I have been laughing so hard at both the MIGHTY “S”, and at how ridiculously out-of-place my AMATEUR “E” looks in that other post. I am typing this through teary eyes.
This forum is amazing.
EDIT: I have now read the attached XKCD comic. Please do not get nerd-sniped, if it puts you in danger of an oncoming vehicle. I feel like that should be obvious, but y’know!
3 Likes
Okay, I’m reporting back in.
I might wind up using this library, alongside a custom-built transcript annotator to create HTML files that contain everything necessary, without needing other external files of any kind.
I’ll let y’all know if I come up with anything.
1 Like
Yeah, looks like that font is Cheshire and it’s using the ::first-letter selector on the paragraph, plus a bunch of fiddling to get the spacing right. Here’s some of their description and code…
CSS, long-ish
/*************/
/* DROP CAPS */
/*************/
/* "drop caps"/"initials" (https://en.wikipedia.org/wiki/Initial
https://wiki.obormot.net/Reference/DropCapsDemo) are large fancy
block letters used to start a page/section.
The 5 drop-caps right now are Cheshire ('drop-caps-cheshire') (https://www.dafont.com/cheshire-initials.font), Goudy Initialen (https://www.1001fonts.com/goudy-initialen-font.html)
('drop-caps-goudy'), yinit (https://www.tug.org/TUGboat/tb12-1/tb31hara.pdf#page=8) ('drop-caps-yinit'), Kanzlei Initialen ('drop-caps-kanzlei') (https://wiki.obormot.net/Main/BonusFontsDemo?demo_font_one=Kanzlei+Initialen), and
De-Zs/Deutsche Zierschrift (https://www.typografie.info/3/Schriften/fonts.html/deutsche-zierschrift-r250/) ('drop-caps-de-zs').
Drop-caps are used to subtly 'theme' pages: Cheshire is for literary pages, Goudy is for
historical/humanities pages, Kanzlei is for light technical/scientific pages, while yinit is for hardcore technical/scientific
pages (if it has a lot of equations, it's yinit), and De-Zs is for everything else (such as newsletters).
We use them on desktop & skip them on mobile because
they use up 8-12KB each (even after @font-face subset optimization to load
only 1 letter at a time), and take up a lot of screen space.
(Mobile users can't have nice things.)
To implement them, each Markdown
page has a custom metadata field like "css: drop-caps-goudy" which is
substituted into the compiled HTML like
'<body class="pagename drop-caps-goudy">', allowing defining of multiple
drop-caps and customized per page. The body class then is read by JS
(currently: `rewrite.js` l841, the `dropCapBlocksSelector` variable) which
actually sets it on relevant paragraphs. It would be difficult to define 'first paragraph'
at the start of the page correctly without many special-case pure-CSS selectors.
(Drop-caps in arbitrary manually-specified places, like appendices or split-out articles,
are supported by a separate 'drop-cap' singular class which can wrap either the abstract
or a specific <p>.)
*/
@media all and (min-width: 650px) {
*[class*='drop-cap-'] {
min-height: 6em;
}
*[class*='drop-cap-']::first-letter,
*[class*='drop-cap-'] > p:first-child::first-letter {
font-style: normal;
font-weight: normal;
float: left;
}
/* All of these numbers are magic.
*/
.drop-cap-cheshire::first-letter,
.drop-cap-cheshire > p:first-child::first-letter {
font-family: "Cheshire Initials";
font-size: 6.75em;
line-height: 1;
margin: 0.045em 0.05em -0.25em 0;
color: var(--GW-drop-caps-cheshire-color);
}
2 Likes
Alrighty!
Good news: I have something that works.
Bad news: Right now, it only works from command line with Node.js, which is uh…not ideal for the average user. I gotta get this to a release stage, somehow.
Neutral news: This uses markup, so you aren’t able to just highlight text and push a button. Also, just because I’ve seen some really weird room names, you have to manually mark something as a room name for it to be formatted as such in the final result, but you can just copy and paste the “room tag” everywhere necessary, with relatively-little time and effort.
I need to create a proper set of documentation, and give this a real front-end, but it does create annotated, self-contained HTML files from a transcript!
The marked-up transcript (which I used for an input) is here:
Dreamhold.txt (3.0 KB)
And the final HTML output is here:
Dreamhold.html.txt (10.7 KB)
(Just cut the final “.txt” from the end of it, and crack it open in your browser of choice.)
(Shout out to @zarf for a fantastic game. I was too self-conscious to use my own works as target practice. If he prefers, I will swap out the Dreamhold stuff for my own work, and re-upload this.)
Supported features:
- Bold room names!
- Clickable text, which contains notes!
- Spelling correction!
- Comments from either “during gameplay” or “after gameplay”.
The differentiation for comments was important to me, because editor notes would be very different from showing the author a glimpse of your experience/reactions during gameplay.
This process is not automatic. You need to manually go over notes you made in-game, and format things accordingly. The idea here is that formatting takes very little time, and the overall result keeps things very organized, saving headaches for both parties involved.
Also, as I’ve said before, I’m very skeptical of anything which claims to automatically parse a transcript. Line breaks are not consistent, and some room names are very strange sometimes, so there’s a little too much context required for a computer to tell the different between “Taken.” and “Room That Ends Uncertainly?”, if you see what I mean.
Future plans:
- Working front-end so people can actually use this!
- Mayyyyybe a highlight-and-button based editor? (I’m really burnt out on UI code)
- Mayyyyyyyyyyyyyyyyybe WYSIWYG support…? (I would need to do some stuff in a fundamentally-different way to make this work.)
- Light mode (?) Idk, do we have any non-night owls here? I program every with dark mode by default, because I have light hypersensitivity.
- Would screen-reader users be interested in something like this? I might need to figure out how to get this to behave with screen readers, and how the notes should be read out, particularly with spelling corrections and such…
4 Likes
In theory an interpreter could save a transcript with formatting included, in which case you can tell when something is a room name because it’s on its own in Subheader style. Something like RemGlk should be able to make a nice HTML-ified transcript (since converting RemGlk output to HTML is basically what web interpreters already do).
I wonder how hard it would be to mod Quixe or Parchment to output either RemGlk or HTML for a nice pretty transcript. This would be something done on the interpreter side, not the game side, because the transcripting features built into the virtual machine assume plain text and this is very difficult for a game to override.
1 Like
I’ve thought about this. RemGlk output would seem better because then you could have a variety of tools to process it into anything you wanted.
(Previously mentioned: Recording z-code game transcripts without the game's support? - #4 by zarf )
2 Likes
Added a Lectrote item: Feature: enhanced transcript mode · Issue #151 · erkyrath/lectrote · GitHub
1 Like
Unfortunately it probably wouldn’t work with other Glk implementations, which would mean I have to stop playing everything in Gargoyle to get the nice transcripts—running two separate Glk libraries side-by-side in the same interpreter is more of a headache than I’m willing to deal with.
But for an interpreter that’s already using RemGlk and GlkOte under the hood, it should be pretty easy to also dump every new RemGlk update into a text file (or the localstorage equivalent to a text file), right?
1 Like
I haven’t sorted out exactly how it would work, but I think Lectrote would set up GlkOte to do the dumping (with a callback to Lectrote to update a text file).
This would work across all of Lectrote’s built-in interpreters, but doesn’t help Gargoyle at all.
You could update GarGlk to do the same thing, but it would be a separate implementation. (Well, it would have to be, since GarGlk is C code.)
2 Likes