Web Designer Blog
The latest news and tips from the Google Web Designer team
Working with Dynamic Text in Google Web Designer
Tuesday, December 19, 2017
When working with dynamic text, you might encounter the problem where the text ends up longer than expected. If you have this issue, we have the solution! In this blog post you’ll learn to control your dynamic text while maintaining the integrity of your visual design.
Consider the following example: starting with a new blank file, let’s make the background gray, add 2 white divs, and place text elements on top. You can see that the text content is bound to the product name in the Dynamic panel.
When previewed, it looks like this:
But when adding extensive sample text, you’ll see this issue:
There are actually two issues occurring here: the right item text has become smaller, and it's also overflowing its container.
Truncation & Minimum Font Size
To fix both issues, let's switch to Code view and search for the gwd-text-helper tag following the body tag. Copy the code below and paste it inside the tag before the closing bracket.
gwd-fitting-truncate="true" gwd-min-font-size-px="7"
Now when previewed, it will look like this:
Much better. The text now stays within its bounding box due to truncation—but it might be a little small. That’s easy to adjust by editing the
gwd-min-font-size-px
attribute added above. Currently it's set to 7, but adjusting it to 12 may look better, and there are 2 ways to do that—either in the
gwd-text-helper
tag to specify a global setting for all text in your document, or to control each text element separately (common for headlines or titles), add the tag directly to the paragraph element like this:
You may also prevent text resizing entirely by using a
gwd-min-font-size-px
value equal to your initial size (16px in this case).
These controls should solve most dynamic text issues, but there is one case where you may want a little more control—the case of vertical centering. Let's duplicate the two text boxes and bind their content to products 2 & 3 (I’ve also adjusted the amount of text to demonstrate the issue):
Vertically Centering Dynamic Text
You may also want to vertically center text fields, so let's go ahead and do that for products 2 & 3. First wrap each text field in a new div by right-clicking the paragraph element and selecting “wrap”. We’ll also name the new div with the -ctn suffix, and use -txt for text elements to help keep things organized.
Double-click the new -ctn div to edit the paragraph element and apply these settings in the CSS panel:
left: 0
;
width: 100%
;
top
: should be de-selected
Change
height
to
max-height: 100%
Next open Code View and add the class
v-center
to the paragraph tag.
Repeat the above steps for both new text fields.
Finally, copy the following code and paste it at the end of the CSS styles in the "head" element of your document:
p {
margin: 0px;
}
.v-center {
position: relative;
top: 49%;
transform: translateY(-50%);
}
.v-bottom {
position: relative;
top: 100%;
transform: translateY(-100%);
}
Now when previewed, your text fields should be vertically centered as shown below:
Note the v-bottom class above can be used in cases where the text needs to be aligned at the bottom of its container.
With these three controls in hand (truncation, minimum font size, and vertical positioning), you should be able to solve the most common dynamic text formatting issues. Give these tips a try and let us know how they work for you in the comments!
Posted by Kent M, Google Web Designer
No comments :
Post a Comment
Labels
3D
animation
animations
BYOC
carousel
clips
css
CTA
custom code
Display
DoubleClick Bid Manager
DoubleClick Studio
dynamic
engagement ads
events
exit
fluid layout
gallery
google cultural institute
google web designer
groups
HTML5
javascript
lightbox
looping
masking
new release
new version
pages
publish
responsive
sales animation
swatches
swipeable
text
timeline
UI
Archive
2018
January
2017
December
Working with Dynamic Text in Google Web Designer
Google Web Designer Tips - Part 1
April
March
2016
November
June
May
April
March
February
Feed
Follow @googlewdesigner
No comments :
Post a Comment