Hello there reader, this is a page that exists for documentation for the secret parameter bar of the embiggener that I made for my use in class as a teacher. Personally, I think I did a bang-up job on my website using the tool itself, but I would really like the Responsive Web Design certification from FreeCodeCamp.org. So, away we go!

What parameter bar?

The parameter bar can be found under the controls. When it is blank, it contains the placeholder text Secret parameters go here.... This box is used to control all of the features of the embiggener that haven't been given HTML-based controls. It allows me to test out new features without having to implement the GUI for controlling them. I do however want others to know how this works so I am writing this out explicitly.

Here is an example of a string that is itself used on the documentation page of the secret parameters:

title=documentation%20for%20embiggener&autofit=& imagewidth=20%&glow=4px+lime&fg=#00ff00&bg=#030& italic=&image=assets/squidward.gif&sway=40s&

(This is broken up onto multiple lines, there aren't actually linebreaks.) There are a few things worth noticing here:

  • Parameters are all either followed by an equals sign and a value or no value. There is always a =.
  • All parameters are followed by a & character.
  • Testing it will show you that the order of the parameters doesn't matter
  • Hex values like #00ff00 and #030 both work.
  • Some values require units like sway.
  • You can see that some spaces are percent encoded (e.g. %20). This happens automatically when a character is used that would require it in a URL.

The results of these parameters: the title is set to documentation for embiggener, the text automatically fits to the screen, the image is shown at 20% width, the text has a green glow, it is lime green text with a dark green background, it is italic, there's a gif of squidward hosted on the website linked as the background, and it sways back and forth with a timing of 40s. If any of these values are changed, you must hit the save button to have them apply.

Parameters that take values

For any parameter that takes a value, here is the syntax:

[...&]parametername=value[...&]

There's a list of these parameters below. Most of them take units or may require other characters (like # or +) to work properly. See the notes below for more information. The values are not very far away from the values used in the actual CSS, but with special characters like space often swapped out for +.

Boolean Parameters

For any parameter that takes no value, here is the syntax:

[...&]parametername=[...&]

There's a list of these parameters below. These were configured to not take a value and will ignore it if it is supplied. Multiple boolean parameters can be active at the same time if they do not point to the same CSS property in their implementation.

List of parameters for styling text
  • fg=color is foreground color. This color can be hex or any other accepted HTML color.
  • bold= for bold (boolean)
  • italic= for italic (boolean)
  • underline= for underline (boolean)
  • smallcaps= for small caps (boolean)
  • weight=900 is font weight 900, it will use whatever your font has available on your device that's closest.
  • for the next three: you can only use one at a time
    • shadow=1px+2px+yellow for shadow
    • border=1px+purple for border
    • glow=5px+red for glow
  • autofit= will fit text on load to the size of the screen (boolean)
  • rfc1345=; will enable rfc1345 decoding mode with the value of ; as the prefix that goes before any mnemonic. This can be left blank but that will have unintended consequences like the over-activation of mnemonics in plain English text.

RFC 1345 mode is particularly useful for typing letters with accents and other mathematical glyphs from Unicode. You may want to look into it if you are displaying large math or typing in multiple languages using an American keyoard. For more information about RFC mode, go here. A table of character codes can be found there. To demonstrate briefly, if rfc1345=/ is set, the following will produce distance=√(x₂-x₁)²+(y₂-y₁)²

distance=/RT(x/2s-x/1s)/2S+(y/2s-y/1s)/2S
List of parameters for styling background
  • bg=color is background color. This can be hex or any other accepted HTML color.
  • the following fancy backgrounds can only be used if there's no image
    • bgl=180deg+red+orange makes a red to orange gradient from top to bottom
    • bgr=red+orange+red makes a red to orange to red radial gradient from middle to outside
    • bgc=#F00+#F60+#FF0+#6F0 +#0F0+#0F6+#0FF+#06F +#00F+#60F+#F0F+#F06+#F00 makes a color wheel
  • image=url for image at url to be displayed at 25% width top right norepeat
  • the following are only relevant if an image is set
    • imagesize=width+height to change bg image size in px, em, or %
    • imagewidth=width to leave height auto
    • imageposition=center+bottom or other words indicating left-right or top-bottom positioning
    • imagerepeat= for bg image repeat (boolean)
    • imagestretch= for fullscreen (boolean)
  • title=pagetitle sets the title element of the document to change how it is displayed in a tab.
  • sway=10s will make a gradient or an image sway from top left to bottom right with that time period
  • As a matter of convenience, there are some images specified in the assets folder of the website. One can also paste a url to where the image is located. Be careful, many CDN's and big companies change where their images are hosted. Something that works one day may not work the next.

    Switching images is not yet possible on the fly but it is possible to apply the following setting:

    image=https://url.com/image.gif& imge=https://url.com/other.gif&

    The benefit of doing this: you can change it like this by changing two characters to change the image. Any parameters that do not correspond to named parameters will be ignored without any consequence:

    imaxge=https://url.com/image.gif& image=https://url.com/other.gif&

    Now, the other image will be displayed.