Using CSS Viewport Units in RSD for...

User 2823310 Photo


Registered User
312 posts

Working with text in RSD is a bit of a bear, but I thought I'd run this by our users as an option and get some comments.
This is an option for responsive text using viewport CSS units:
vw, vh, vmax, and vmin.

Viewport units allows you to make your text fit into its container’s width. The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. So when the viewport, (which is the size of the browser window) changes the font size change.

1vw = Equal to 1% of the width of the initial containing block.
1vh = Equal to 1% of the height of the initial containing block.
1vmin = Equal to the smaller of ‘vw’ or ‘vh’
1vmax = Equal to the larger of ‘vw’ or ‘vh’.

Place your text or heading into it's column.
Select it open inspector and copy the class.
For example: span.text-element.text-1
http://i66.tinypic.com/ndjyu9.jpg

Go to Settings and Paste the class into a CSS style in the doc head
http://i63.tinypic.com/16ldwup.jpg
<style>
span.text-element.text-1 { font-size:7vw; }
</style>


You have to use the browser preview from RSD to see it work.
Try it out using the different options like if you want to go with a minimum of the blocks height & width.
Change 7vw to say 14vmin for example.
A maximum may be 6vmax or to the height only you'd use 5vh

You can also go back to a media query if you want a min size by copy pasting from the RSD code below it inside the style tag the same way like this.
http://i67.tinypic.com/2077420.jpg
<style>
span.text-element.text-1 { font-size:7vw; }
@media screen and (max-width: 31.75em) {
span.text-element.text-1 {
font-size: 3.375em;
}
}

</style>

Browser Support with CSS viewport units: http://caniuse.com/#feat=viewport-units
User 122279 Photo


Senior Advisor
13,171 posts
Online Now

As far as I know, those units are not fully supported by all browsers, e.g. not by IE11 and Edge.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2699991 Photo


Registered User
3,035 posts
Online Now

Also
Io has many problems

I'm sticking to the good old fashioned way of responifying text for the moment
https://mawarputih.id
The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Page Ingredients
User 2823310 Photo


Registered User
312 posts

CSS cascades so they will see the text like you do inside RSD

The support link is at the bottom, but with the old IE it is vmin, - vh and vw work in them.
Same old story with IE though right? :rolleyes:

I think it's another option to using jQuery slabText
which is an update basically to fitText.
It's one way to deal with the blank spacing on headlining text so your design balances.
User 2699991 Photo


Registered User
3,035 posts
Online Now

Hi
I will keep watching, but never really had any problems balancing my designs, I tried a couple of tests yesterday and looked terrible in chrome and on iphone & ipad, didn't bother looking in any other browser (maybe I'm still not yet fully understanding the concept)
https://mawarputih.id
The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Page Ingredients
User 2823310 Photo


Registered User
312 posts

Wayanjaya, it's one option to scaling text similar to images over devices when the need arises in responsive.

I don't see the issues you do with my chrome firefox or ios phone, but here is a link to an example & another support list if you want to check out vw css units etc.?
CSS UNITS

I just thought I'd share how I tested it for an issue I was having in a site header layout to cut down on the media queries.
User 2699991 Photo


Registered User
3,035 posts
Online Now

Sure No Problems, Just not yet working good enough for me thats all
https://mawarputih.id
The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Page Ingredients
User 2823310 Photo


Registered User
312 posts

Looks like the CoffeeCup added Viewport units to Foundation Framer.
If they get back to working on RSD sometime in the future it looks like they may be added as well since it's a similar C++ platform. Meantime this method works.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.