A HyperMedia Stack Using Snap!

Inspired by Roger Wagner's popular educational software product, HyperStudio, and going back even farther to Apple's HyperCard, I though I'd take a shot at writing a "stack" with Snap!

You can search the Berkeley server for "quiltStack", or use this link: https://snap.berkeley.edu/snap/snap.html#present:Username=codegeezer&ProjectName=quiltStack.

One thing I need to work on is the font selection for the text boxes. I made them as vector images using Inkscape. It's a little surprising to see a little derangement of the letters in these vector images when the stage enlarges to presentation size.

The font here is named "Georgia", and I did set Inkscape to spread the letters apart a little. Maybe I should dial that setting back to the font's default spacing?

Thanks in advance for any constructive thoughts!
CG

The letters look fine to me, but yes, they're way too far apart! All else being equal, you should trust the font designer on spacing, except in specific cases where a particular pair of glyphs don't work right together, such as Snap!'s italic exclamation point not working with a roman apostrophe. I would either make the apostrophe italic also (Snap!'s) or typeset a thin space between them (Snap! 's). (I used "hair space," U+200A.)

You know, HyperStudio includes a Logo interpreter as its extension language... :~) Although I guess the ability to write a Snap! script under when-I-am-clicked of a button counts.

Very nice :slight_smile:

Thank you. Here is an interesting observation about the fonts: inconsistent rendering across browsers.

  • Safari version 14.1.2 (Mac, Big Sur, all up to date): the inter-glyph spacing is irregular, with some letters crammed together and extra-large separations between other, different characters. I haven't identified a pattern in it, yet.

  • Chrome version 92.0.4515.159 (same Mac): the space between letters renders correctly, meaning that it looks the same way it did in Inkscape where the .svg file was prepared.

Will follow the suggestion of @bh to use the font's default spacing in Inkscape then compare the renderings in these two browsers again. Watch this space.

The thinner spaces seem to look the same in the font this forum uses. (Except for zero-width spaces.)

Interesting. Where is the rotation center of your character costumes? I had a bug like that in this thread because the rotation center was at the right edge of the character and I was expecting it on the left. Although if it works in Chrome it's probably not your bug!

This is what I see, too.

The Safari spacing aligns with what default macOS seems to do (e.g. Quicklook). Chrome's spacing aligns pretty closely with what illustrator is doing.
However, if I delete the dx definition from the saved svg file, then I get a much more natural looking text rendering. It's regular in Safari, and seems to look slightly better in Chrome too. It'd be interesting to see a screenshot of what you're seeing in Inkscape. It's a little hard for me to tell what's correct. The letter-spacing: 1px property does seem to have the intended effect still, though I'd agree with bh, I don't think it is necessary.

I don't know where the rotation center is for the font characters in the text box costumes. As for the costumes themselves, I use the Snap! editor to place the center of rotation at top-left corner; an old habit. Putting it there consistently helps me to calculate x:y coordinates for moving the underlying sprites. At least until I run out of fingers and toes for the abacus.

Thanks for pointing out the dx definition. I will study it. Meanwhile...

Gratitude to @bh , @cycomachead and everyone else who helped to shoot the trouble. I think the discrepancy has been resolved, thanks to all your thoughts.

I observed that the font displayed as expected in both browsers for the "quilt block" scenes. What was the difference compared to the introductory text blocks? That added pixel of spacing. It was not added in the quilt block text. Diagnosis pretty much confirmed at that point.

The three introductory text blocks have been re-prepared in Inkscape to use the font's default spacing between letters and words. Now they look satisfactory in both browsers. What did I learn? @bh gives good advice:

All else being equal, you should trust the font designer on spacing, except in specific cases where a particular pair of glyphs don't work right together,