automatically shrinking text
Hello,
New to RSD.
I am not sure if I am missing a basic function, or RSD simply does not do it. I thought somehow Flexbox could shrink text to fit its element container.
Now I have to constantly manually lower the font and line size when I shrink the display size with the slider. Is there a way to not have the text increase the element height and wrap, and instead automatically shrink(maybe font size, line height) to fit the width and height of the element?
I know some responsive email templates I have used let you add a title to an image as an element. You can choose the position of the text, top, bottom, left, right. And when you shrink the screen width the picture and the title text automatically shrink and adjust properly together. That is what I am trying to do.
Thanks for informing this new RSD learner.
Bob
New to RSD.
I am not sure if I am missing a basic function, or RSD simply does not do it. I thought somehow Flexbox could shrink text to fit its element container.
Now I have to constantly manually lower the font and line size when I shrink the display size with the slider. Is there a way to not have the text increase the element height and wrap, and instead automatically shrink(maybe font size, line height) to fit the width and height of the element?
I know some responsive email templates I have used let you add a title to an image as an element. You can choose the position of the text, top, bottom, left, right. And when you shrink the screen width the picture and the title text automatically shrink and adjust properly together. That is what I am trying to do.
Thanks for informing this new RSD learner.
Bob
Hi Bob, not sure why you would want your text to auto shrink. RSD gives you great control over your layout. I actually increase my font size (slightly) when my viewport gets smaller. Think about your clients who are trying to use your website when they are on their iPhone. You don't want them pinching and expanding when on your site, that kind of defeats the purpose of having a responsive website.
Personally I change my font sizes on my titles and text for various breakpoints.
Personally I change my font sizes on my titles and text for various breakpoints.
Taking over the world one website at a time!
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Seems you want this to just apply to some parts of a webpage? But I don't know how you apply this to part of the page, and not the rest, without a lot of special coding. For example. As a page gets smaller, you want leeway before the grid reflows? So the text and image gets a little smaller, before reflowing? I can see some advantages to this, but I think it will not work well once mobile view ports are reached because one would need to start with unnecessarily larger fonts to have room to scale down with. On might need that even for desktop views. Heck, many people scale up the size of windows on large screens just to make things more readable on a desktop (especially the elderly). The whole page would have to scale, because that picture and text are still within containers, in columns within the grid and row layout. If you could make the image and text auto-change, the layout is still the same.
I believe you should look at your page differently. The breakpoints are just fixed places for a layout. A user will not purposefully scale down the size of his browser, unless he wants more real estate to see other things. And after doing so, will probably still want to see the site, reflowed, so he can still read it easier. Users whose viewports show up between your specified breakpoints, are resizing their windows, or have any number of the monitors that are available with different personally set scaling factors. If a screen shows up in the middle of breakpoints, they just display the smaller one. And the user is probably already used to seeing similarly sized web pages.
I believe you should look at your page differently. The breakpoints are just fixed places for a layout. A user will not purposefully scale down the size of his browser, unless he wants more real estate to see other things. And after doing so, will probably still want to see the site, reflowed, so he can still read it easier. Users whose viewports show up between your specified breakpoints, are resizing their windows, or have any number of the monitors that are available with different personally set scaling factors. If a screen shows up in the middle of breakpoints, they just display the smaller one. And the user is probably already used to seeing similarly sized web pages.
BIll G wrote:
Seems you want this to just apply to some parts of a webpage? But I don't know how you apply this to part of the page, and not the rest, without a lot of special coding. For example. As a page gets smaller, you want leeway before the grid reflows? So the text and image gets a little smaller, before reflowing? I can see some advantages to this, but I think it will not work well once mobile view ports are reached because one would need to start with unnecessarily larger fonts to have room to scale down with. On might need that even for desktop views. Heck, many people scale up the size of windows on large screens just to make things more readable on a desktop (especially the elderly). The whole page would have to scale, because that picture and text are still within containers, in columns within the grid and row layout. If you could make the image and text auto-change, the layout is still the same.
I believe you should look at your page differently. The breakpoints are just fixed places for a layout. A user will not purposefully scale down the size of his browser, unless he wants more real estate to see other things. And after doing so, will probably still want to see the site, reflowed, so he can still read it easier. Users whose viewports show up between your specified breakpoints, are resizing their windows, or have any number of the monitors that are available with different personally set scaling factors. If a screen shows up in the middle of breakpoints, they just display the smaller one. And the user is probably already used to seeing similarly sized web pages.
Seems you want this to just apply to some parts of a webpage? But I don't know how you apply this to part of the page, and not the rest, without a lot of special coding. For example. As a page gets smaller, you want leeway before the grid reflows? So the text and image gets a little smaller, before reflowing? I can see some advantages to this, but I think it will not work well once mobile view ports are reached because one would need to start with unnecessarily larger fonts to have room to scale down with. On might need that even for desktop views. Heck, many people scale up the size of windows on large screens just to make things more readable on a desktop (especially the elderly). The whole page would have to scale, because that picture and text are still within containers, in columns within the grid and row layout. If you could make the image and text auto-change, the layout is still the same.
I believe you should look at your page differently. The breakpoints are just fixed places for a layout. A user will not purposefully scale down the size of his browser, unless he wants more real estate to see other things. And after doing so, will probably still want to see the site, reflowed, so he can still read it easier. Users whose viewports show up between your specified breakpoints, are resizing their windows, or have any number of the monitors that are available with different personally set scaling factors. If a screen shows up in the middle of breakpoints, they just display the smaller one. And the user is probably already used to seeing similarly sized web pages.
Soon we will be able to use a font size that is relative to the viewport size, rather then a px or em. The new units are vw, vh, vmin, vmax.
While this is possible with CSS3, it is not fully supported yet, and has some issues on different browsers. You can see the support for them here http://caniuse.com/#feat=viewport-units
Once the support for them is a bit better, we might just consider adding them to RSD.
OK, that's why I thought this was a bad idea. I have seen layouts like this before, and trashed them. My franchise HQ sent me some webpages to use, but they were useless on 75% of the mobile phones I could borrow to test a bunch of years ago. And then, they were just bad on the ones that worked. The franchise guy worked in a bubble of Adobe products....
Thanks Adam. I did not realize the relative font sizes were still experimental. I had played briefly with some software that were using them. I am trying to learn RSD to cut my time on making mobile responsive layouts. I tried Wordpress previously and it was too restrictive and counter intuitive. Besides being a bloated monster for code size. RSD has potential if it gets the quirks worked out and gets some of the features CC says they are working on added. So far it does not seem to save me much time, and time is money.
Clients want elegant solutions and looks but don't want to pay for the time to make them elegant. I find I am not saving much effort over using a skeleton grid system and coding the old way I did it. I guess it will take a few years for code generators like RSD to catch up to the rapid advancement in mobile hardware.
Of course if RSD finally adds the library functions for elements that can be reused plug and play between projects and would make things like the form and menu maker as fully integrated add in modules, that might occur. Of course all the little quirks of RSD I keep finding and having to create workarounds for is not helping. Please keep plugging away at the quirks, adding in the top requested enhancements, and working on much better documentation. There is a lot of potential in RSD.
Clients want elegant solutions and looks but don't want to pay for the time to make them elegant. I find I am not saving much effort over using a skeleton grid system and coding the old way I did it. I guess it will take a few years for code generators like RSD to catch up to the rapid advancement in mobile hardware.
Of course if RSD finally adds the library functions for elements that can be reused plug and play between projects and would make things like the form and menu maker as fully integrated add in modules, that might occur. Of course all the little quirks of RSD I keep finding and having to create workarounds for is not helping. Please keep plugging away at the quirks, adding in the top requested enhancements, and working on much better documentation. There is a lot of potential in RSD.
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.