Join Paul Trani for an in-depth discussion in this video Adding text that reflows, part of Edge Reflow: Creating a Responsive Design.
Reflow also gives you the ability to use the latest in web standards. And one of those new web standards is CSS Regions, which is perfect for Reflow. And what it will enable me to do, is I can have text in this text box flow to this second text box. So, the first thing I need to do is make room for that second text box right here, just click and drag. And if I select the selection tool, I'm going to take this first line, cut it, command X or control X, to cut it out.
And then,I'm going to paste it right up here. And let me just select all that text and quickly format it. So it's like the text below it. So changing that to Source Sans Pro, and then changing the color to that darker grey. So there's my two text boxes, and I want to link them together. So this text box flows into this one. So I can hold down the Shift key, select both of them. Now, right click, and I can create a region container. This is going to contain both of those text boxes.
As I do that, I get this wonderful line saying, hey, this text is going to flow into this text box. In fact, as I shrink that text box, you can see how it wraps in the next one. And this is great as we start to see our content expand and contract. You can see that content flow very nicely and it doesn't destroy my layout when that happens. Now, keep in mind this is a new CSS feature. In fact if you go under View down to Shiny Web Features you can see CSS regions turned on, and it does mention that it may not work in every browser.
So use it if you want to take advantage of it just be aware that it might not work in every browser. I'd like to also point out at this time you could take advantage of CSS filters in edge reflow, allowing you to make photos black and white, blurry give you that sort of control over photos. Again, a shiny web feature. A new web feature that might not work in every browser, but still you have the ability to us it in edge reflow.
- Understanding websites and mobile devices
- Creating your first layout
- Adding text that reflows automatically
- Building navigation
- Creating and styling HTML forms
- Creating tablet and mobile layouts
- Linking multiple pages
- Previewing your layout