Remember: The Billboard stacks on this page are here to demonstrate how the stack works and not designed to look nice!
Billboard Auto Scaling
Billboard can be used in two ways depending on how you enter your text. (Every paragraph on this page is a billboard stack)
In fully automatic mode, Billboard will fill each line with text, autoscaling it to achieve the best fit within its parameters.
If however you want a certain word or words to appear on a line on their own, simply enter them that way in edit mode. This is MANAGED MODE and is by far the most useful to create multi-line billboards. it is incredibly simple as shown below
BillBoard
works just like a standard paragraph
stack, except that is can autoscale
and fully justify all of its content.
If you want
SOMETHING ON A SEPARATE LINE
then just enter it like that in edit mode.
With no line breaks Billboard will work in AUTO MODE. When in AUTO MODE, you cannot use the stacks color and text settings to change the colors of individual words. If you want a single line with different coloured text then simply add a line break (press enter) at the end of the line.
How this works
Below are two Billboard stacks containing exactly the same text.
The green billboard below has no line breaks entered in edit mode and so is automatically fitted, keeping the font size as constant as possible.
BILLBOARD – A RapidWeaver Stack FOR PRODUCING BIG, BOLD & RESPONSIVE Text
The blue billboard below has line breaks inserted (simply by pressing enter in edit mode) to specfy which words should appear on their own line.
The font size is automatically varied in order to fill the width of the line.
BILLBOARD
– A RapidWeaver Stack
FOR PRODUCING BIG, BOLD &
RESPONSIVE Text
Now make your browser a little narrower than 900 pixels (and concentrate on the green Billboard)
At about 900 pixels wide you should see something like the image on the right
Because Billboard is in full auto mode, at 900px wide it can no longer fit all of the second line of text on to one line and so the word 'Text' has wrapped on to a new line. This is just as would happen with a normal paragraph.
The word text is then, of course, resized to fill the full width of the line. In order to do this the font size has been increased a lot.
I don't want this, what can I do?
Simple, you just adjust the minimum number of allowed characters per line (Min Chars / Line) in Billboard's Advanced settings.
This value defaults to 2 characters to ensure that everything is autoscaled. (Remember this setting only applied to full Automatic Mode. In Managed mode (where you enter the line breaks) it has no effect and the words will be on the lines that you specify
Below is a copy of the green Billboard above but with the Min Chars / Line set to 5. This (or any larger value) will mean that the word text is not allowed to be on a line on its own
BILLBOARD – A RapidWeaver Stack FOR PRODUCING BIG, BOLD & RESPONSIVE Text
So as you can see, you can adjust the behaviour of Billboards fully Automatic behaviour quite easily. Obviously different circumstances may call for different values. Just simply count the number of letters on a problem line and make the appropriate adjustment.
The red warning message at the top of the page is a billboard stack with a minimum characters per line set to 30 in order to keep it in proportion on 2 or 3 lines only.
Font Ratio
Also in the advanced section you will see the Font Ratio value.
This affects how much smaller the font size is allowed to go on small screens (or narrow browser widths.
As with all the advanced settings, on most occasions you will never need to adjust them
Look at the two Billboard stacks below while resizing your browser. They are identical copies with the exception of the font ratio setting.
The purple Billboard with a font ratio of 0.4 will not allow the fonts to achieve such a high ratio (the difference between the largest and smallest font sizes used on different lines) and so the text will all get larger in order to wrap the content on smaller screens.
In this case 0.4 is a visually preferable setting but this is only one case. The ideal setting is dependent on the text, the font used and the width of the container. (In this case a 2 column stack)
Font Ratio 0.78 (Default)
BILLBOARD – A RapidWeaver Stack FOR PRODUCING BIG, BOLD & RESPONSIVE Text
Font Ratio 0.4
BILLBOARD – A RapidWeaver Stack FOR PRODUCING BIG, BOLD & RESPONSIVE Text
Fade In Time
Simply allows the text to be faded in gracefully rather than appearing abruptly.
You can even set different fade in times for a group of stacked billboards to get a nice effect.
This introduces an important point namely you don't have to make your billboard from just one Billboard stack.
If you are using Managed mode (which is the usual case) and you want different colors, fonts or other styles on each line, then just drop several Billboard stacks one below the next.
By the way Billboard is compatible with Animate Stacks and you can also include links in Billboard, just like the one to the right.
BillBoard
The Stack That Frees Your Paragraphs
To Be Totally
CREATIVE
The Breakpoint may be used in Fully Automatic Mode ONLY (i.e. when you have not entered any line breaks.
At the breakpoint specified the auto scaling is removed.
The Billboard on the right has the breakpoint set to 600px (larger than you would normally set) just to demonstrate the principle. Below 850px it will behave just as a normal paragraph. You would never normally use Billboard on a long paragraph like this. It is merely an example.
You cannot use the breakpoint in Managed Mode (when you have inserted any line breaks). This is primarily because billboard removes the line breaks from the text in order to perform its magic but also it is unnecessary as the scaling will always be as intended.
THIS BILLBOARD HAS A BREAKPOINT SET TO 850px ---Gluten-free paleo gastropub authentic flexitarian fixie tote bag, scenester Cosby sweater irony locavore. Gentrify American Apparel craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard meggings fap Terry Richardson XOXO. Sartorial vinyl cornhole, fap kogi Austin meh Terry Richardson art party hella. Master cleanse Etsy trust fund, forage craft beer biodiesel Wes Anderson hashtag Intelligentsia hoodie. Ethnic DIY 8-bit, leggings ennui narwhal Tumblr Portland Helvetica asymmetrical fap twee viral 90's aesthetic. Blue Bottle kale chips hashtag, jean shorts disrupt semiotics wayfarers pop-up aesthetic retro kogi Tumblr put a bird on it.---
Max Font Size
The maximum font size does exactly what is says.
It limits the maximum allowable font size (in pixels) that the Billboard autoscaling will use.
There is one (advanced) use for this, and one use only. Do not normally change this setting or your text will look a mess - you have been warned! At extreme settings (like on the right) characters may be lost at certain widths.
Assuming you have a few words that you want to stretch out over a line then this setting is for you. Essentially it allows auto scaling of the word spacing. But as the example on the right shows it is not suitable for small font sizes
MAX FONT SIZE 20px
MAX FONT SIZE 30px
MAX FONT SIZE 40px
MAX FONT SIZE 50px
Font Delay
Occasionally, when using custom fonts, served from your own server, the download times may be longer causing the font size calculation to complete before the download is complete.
Rather than delay the display of the whole page and slow your page load down for content which may not even be visible above the fold, you can increase the delay time for just the problem Billboard stack.
Everything will display as normal except the text which will be gracefully faded in as soon as it is ready. (According to the fade in time you set)
0ms Delay - Slight Error
50ms Delay - Fixed
If you enjoy BWD stacks and find them useful it would be great if you could contribute in some small way to the running costs. (I don't actually spend the donations on coffee!)
Thankyou
