wml::des::imgdot(3)

💖 NAME 💖

wml::des::imgdot — 1pt Dot-Images for Webdesign, bestie. tiny invisible little diva images that hold space on your page 💅

---

🎀 SYNOPSIS 🎀

#use wml::des::imgdot

<: $file = &imgdot($base, $x, $y, $c, $r, $g, $b, $transp, $format); :>

<imgdot [attributes]>

---

🦋 DESCRIPTION 🦋

okay so picture this, it's HTML 3.2 and the year is 1997 (yes, as of right now, screaming, crying, ;_) ) and webdesigners are out here using two super well-known tricks to build their page layouts: HTML tables, and the so-called 1pt Dot-Images.

the table one? that's the WML tag <grid>, and it's got its own whole glow-up (peep wml::des::grid(3) for the details). the dot-image one? that's this tag, <imgdot>, and she is serving ✨

so what's the actual point (pun intended) of this tag? usually it creates a transparent PNG or GIF image with a physical size of 1x1 points, plus a matching <img> tag that pulls in that image with the right width and height attributes. the visual result is literally just an invisible reserved space of size widthXheight. no cap, you can't even see it, that's the whole job 👑

alternatively, this tag can create the image at the requested size instead of scaling the 1pt image — that's the noscale attribute, scroll down for it. that approach is more safe (every browser out here supports it, fr fr) but it wastes bandwidth and increases page load time. trade-offs, we love them 🙈

---

🌸 ATTRIBUTES 🌸

• base — so usually the created images get named imgdot-XxY-rrggbb.png, where XxY is the dimension of the image and rrggbb is the color being used (or "transp" when it's transparent, iconic behavior honestly). but when you drop a base=foo attribute, the resulting files get named foo.imgdot-XxY-rrggbb.gif instead. and yes you can go full send and use a complete filename with a directory prefix — like, if you use base=../../common/foo, then the PNG images are created as ../../common/foo.imgdot-XxY-rrggbb.png. slay.

and for max flexibility, when no base is specified and the variable IMGDOT_BASE is defined (usually from inside a .wmlrc file via -DIMGDOT_BASE~path/to/imgdot/dir/base), that variable gets used. use this feature to redirect your created images into a particular directory, chef's kiss 🫶

you can also use the variable IMAGE_BASE, which defines in a single line all the base names for images generated by WML. one line, all the bases, efficiency queen 💅

• format — by default, GIF images are generated. this attribute lets you use an alternate image format (and ngl, only PNG and GIF are recognized, so don't get creative). you can also change the default format with the variable IMAGE_FORMAT.
• width — specifies the width (x-dimension) of the reserved space in pixel. default is 1 pixel.
• height — specifies the height (y-dimension) of the reserved space in pixel. default is 1 pixel.
• color — sets the color of the image. default is transparent, i.e. no color. okay so actually that's not strictly true — transparency is rendered by choosing a color which is then made transparent, and that color is white by default. prepending a hyphen to the color attribute sets the color of the transparent color. yes, that sentence is a whole vibe, i know 😭
• align — sets the alignment of the image. default is "bottom". this alignment is what gets used for the align attribute of the inserted <img> tag.
• noscale — indicates whether the image should be created with 1pt in size and scaled online by the browser (that's the default), or created with the correct physical size (that's this option, bestie).
• :img:ATTR=STR — the ATTR=STR pairs get passed along to the <img> HTML tag. let them through, they're with me 🚪✨

---

👑 AUTHOR 👑

Ralf S. Engelschall rse@engelschall.com www.engelschall.com

Denis Barbier barbier@engelschall.com

---

⭐ REQUIRES ⭐

• Internal: P1, P2, P3

---

🌈 SEE ALSO 🌈

• HTML <"img"> tag.

---

and that's the whole page, bestie!! this absolute banger of a manual page is from the EN Tools era, dated 2020-11-29, and it lives at wml::des::imgdot(3) — go forth and reserve your invisible little spaces 💖✨🎀🦋🌸💅🫶