Steffy's Magic Shop

[Al Terego]

I'm evil, that's what we do.

[Jaclyn]

Jaclyn Rosendahl
Entrepreneur
About Jaclyn
 ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾ 

… a silent giggle …

  “No no dear, AI is evil, Al is not. Here, I have some of that magic pixie dust @Catherine left us a while back. Let’s try that.”

… I fumble with the jar and then pull out a pinch … fling that at the evil AI …

  “There, poof and the evil AI begone and only one nice @Al Terego remains.”

[Al Terego]

Muahaha.. *cough* *cough* curse this dust!

[Al Terego]

Gather 'round, boys and girls and none-of-the-aboves, it's magic time!

You should all know about the youtube video embedding feature, but what if you want to put it in a spoiler?

Should be simple, right?

[spoiler=Magic][youtube]0p_1QSUsbsM[/youtube][/spoiler]

Let's try...

Magic

Ouch!  What the blazes happened?

Turns out that the Youtube embedder helpfully adjusts the clip size to fit in the available space -- in this case, the spoilered area created by the [spoiler] tag.

But the [spoiler] tag decides on the available area based on its title and its contents, but it does not include the [youtube] tag in the calculation (which stands to reason, if each tag tried to calculate the area based on the other, we'll get an infinite recursion).

So how do we solve this chicken and egg problem?

Simple!  We put something else inside the spoiler to "stretch" it, and as usual the invisible pixel saves the day:

[spoiler=Magic]
[center][img width=600 height=1]https://elliquiy.com/elluiki/images/4/4d/AlTeregoSeparator.png[/img]
[youtube]0p_1QSUsbsM[/youtube]
[img]https://elliquiy.com/elluiki/images/4/4d/AlTeregoSeparator.png[/img][/center][/spoiler]

The invisible 600x1 pixels image on the top stretches the spoilered area, and the second 1x1 (default) pixel at the bottom makes the padding look nice and symmetrical.  The 600 width was chosen to leave space for the maximum clip size plus margins on the sides.  Smaller sizes will also shrink the side margins.

So now we can relax and enjoy the

magic

Cheers,
-- Al

[Jaclyn]

Jaclyn Rosendahl
Entrepreneur
About Jaclyn
 ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾ 

… mmm hmm …

  “The only character I know who might use this is Blĭnde, the musician. I haven’t heard a peep from her in a long time. Maybe she finally succeeded in joining the 27 Cub. She certainly kept trying. Not that anyone paid attention.”

[Al Terego]

Greetings, magician, adepts and apprentices!

Some of you have noticed that existing spells have became clunky, unreliable, developed unexpected side effects, or have stopped working altogether. These are unfortunate consequences of the magic system overhaul that happened with the forum software upgrade, as well as some residual quirks that were not addressed in the first edition of the spellbook.

It is now time for a spellbook errata to make sure your BBCode does not turn into frogs, so I am slowly going over my previous posts and fixing the breakages. You may also notice added text that looks like this:
Edit: <some text here>

When done, I will post new ways to work around spell breakage, like:
- Disappearing spaces after a spoiler
- Stretching/compressing images and animated GIFs
- Et cetera, et cetera, et cetera...

[Jaclyn]

Jaclyn Rosendahl
Entrepreneur
About Jaclyn
 ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾ 

  “My recent post about changes has been ignored. I no longer care. Blessed be.”

[Al Terego]

“My recent post about changes has been ignored. I no longer care. Blessed be.”

Not ignored, I was not in the right mental state to work on it.

*Hugs*

[Al Terego]

I got image stretching and frames working again!

The secret is to use the magic of external sites for the heavy lifting.

For coloured rectangles of arbitrary size, I used Single Color Image.

Alternative sites are:
- Placehold.ovh with ?no_text
- Dynamic Dummy Image Generator with &text=+

For icons I used Iconify Design.

And for Resizing images I used wsrv.nl.

Read the linked documentation, see the linked examples from the shop (above), or ask your questions here.


Bonus:

In one of the incantations linked at the top, I used an En space for spacing.

Here is a table of Unicode spaces and other blank characters, sorted by their width in the browser's default proportional font:

Proportional	Fixed	Character
|⁠|	|⁠|	U+2060 WORD JOINER
|᠎|	|᠎|	U+200C MONGOLIAN VOWEL SEPARATOR
| |	| |	U+200A HAIR SPACE
| |	| |	U+2009 THIN SPACE
| |	| |	U+2008 PUNCTUATION SPACE
| |	| |	U+205F MEDIUM MATHEMATICAL SPACE
| |	| |	U+2005 FOUR-PER-EM SPACE
| |	| |	U+202F NARROW NO-BREAK SPACE
| |	| |	U+0020 ASCII SPACE (that's the "normal" space
| |	| |	U+2004 THREE-PER-EM SPACE
| |	| |	U+2002 EN SPACE
| |	| |	U+2007 FIGURE SPACE
|⠀|	|⠀|	U+2800 BRAILLE PATTERN BLANK
| |	| |	U+2003 EM SPACE
|　|	|　|	U+3000 IDEOGRAPHIC SPACE

Note that the first three are "zero width", and some can have additional behaviour (line preventing line breaks, or joining the surrounding characters. User discretion is advised.

Take care,
-- Al

[Al Terego]

Fixed anchors.

The anchors to the first post on a page and the bottom of the page are now called #forumposts and #bot respectively.

And there's a shortcut to link to a specific message: https://elliquiy.com/forums?msg=<id>