Resizes text to make it fit completely inside fixed size (width and height) text boxes.
One of the many approaches to create responsive internet content is to have a full page content (i.e. a page that fits completely in the device screen without scrolling) or even page segmented content like those created using fullpage.js.
The challenge here is not the box layout but making the text fit inside boxes at
all resolutions. Techniques like using vh
, vw
or vmin
for the font size are
somewhat helpful but sometimes the text will still bleed and some other times it will
leave lots of blank spaces besides leaving our CSS crowded with media queries and
complex rules.
This is where Canned Text
comes into play. Just apply canText
to any selector and your
text will be "canned" completely inside the container. You just have to worry about the
box layout.
Just use this simple setup:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.canned-text.js"></script>
<script>
$("#responsive_text").canText();
</script>
This will let text to wrap into the box and will adjust it vertically to can it into the container.
If what you want is to fit text vertically and horizontally without wrapping it use:
$("#nowrap_text").canText({ nowrap: true });
If you are using bower you can install this plugin with:
bower install jquery-canned-text
⚠️ Run canned text before anything that hides the element. A hidden element does not have width or height.⚠️ Make sure your containers have a width and a height other thanauto
.- Use
display: block
ordisplay: inline-block
for the container. - Percentage,
ems
and viewport values are valid for width and height.
- Use
- Do not set fixed
font-size
values for elements inside the container otherwise the canning process will be cancelled. - Set a no-js fallback
font-size
in your CSS. - Containers with only non-text content (e.g. img) will not be canned.
- This plugin uses a brute force algorithm to try to fit the text into the container. If the content doesn´t seem to be resizing then the canning will be cancelled.
- If your application has lots of non-relative styles that affect this plugin you can include the canned text CSS which contains defaults for the most common HTML elements inside canned containers.
<link rel="stylesheet" type="text/css" href="jquery.canned-text.css">
You can then override any style you want by creating a selector for your elements inside the
.canned-text
selector. e.g.
<style>
.canned-text h1 {
/* ... */
}
</style>
- Nowrap canned content can still wrap (via custom CSS) but the container will still
try to can any remaining non-wrapping content. You can also use
<br>
elements.
If you want to run tests simply open test/index.html
in a browser.