4/29/2023 0 Comments Hexels wrapping horizontallyWe are using a bunch of tags here which are exclusively for presentation and have nothing to do with content. Yuck, right? It never feels good to use markup like that, not just because it’s a table, but also because of how non-semantic it is. We would need to use a page structure like this: Let’s assume we are trying to lay out a series of blog posts one after another horizontally. Table cells will expand to fit whatever content is inside them by their nature, and the will never wrap until a new row is started. A row of table cells fit the bill perfectly here. What we need is a page element which can expand horizontally as needed and never “wrap”. I agree with this in general, but I do believe you can use JavaScript in this way as long you do so unobtrusively and take care to ensure the page will fall back to a usable layout with JavaScript disabled. However, it considered bad mo-jo to handle page layout with JavaScript. We could use this to create an environment which behaves extensibility. JavaScript clearly has the ability to manipulate page elements and do calculations on-the-fly. There is also a white-space: nowrap property in CSS which I thought might be able to be exploited to fight the auto-wrapping, but it only works for text elements, not blocks or just any old thing you set to inline. I thought perhaps if I put a bunch of float elements inside of that, it might just keep expanding beyond the width of the browser window. ![]() ![]() Page elements which are floated but do not have a width exhibit a property where they expand to the width of the content inside them. I spent some time playing with the float property and the white-space property to see if I could find a way to fight browser auto-wrapping, but I didn’t have much luck. You don’t go around setting static heights on your pages do you? ![]() Think about regular vertical scrolling sites. Web pages are dynamic places and we should be prepared for expandability, not limiting ourselves with static widths. Go ahead and try it, you’ll surely get a horizontal scrollbar. Perhaps the “quick and dirtiest” way to get a horizontal layout started is just to set a really wide static width on the body element itself. You could achieve that today with display: flex on a parent much easier, although the UX of this is pretty questionable.īefore I explain why, let’s look at a couple of other possible techniques: The core of this was just that with a table you can set things on a row that keeps going and going without line breaking. I’m going to go out on a limb here and say that I think a table is the best layout technique for a horizontally scrolling site. Perhaps a slight blow to “usability”, but it sure can be a cool creative touch! The best way to do it But web pages are equipped with both vertical AND horizontal scrollbars, right? If we are responsible with our web layout, we can go “against the grain” and create web pages that use primarily horizontal scrolling and can even expand horizontally as we add more content. Notice how many computer mice (mouses?) have a special scroller exclusively for vertical scrolling. This natural flow has lead to conventions in web page layout and even into hardware itself. Obviously, we don’t have to, the browser does this wrapping for us. We sure as heck don’t want to hard-code line breaks into the markup ourselves. Paragraphs need to have line breaks in them to be readable (hence the term “blocks” of text). Our eyes are used to reading fairly short lines of text, so if we were to see a paragraph of text in one long straight line, it would be painful to read. Why is this? Because it just makes sense. The more content on the page, the taller it gets, not the wider. When page elements reach the right edge of the browser window and go over, the flow defaults to “wrapping” that element down onto the next line. Vertical is the natural flow of web layout. ![]() If web pages were made out of wood, the grain would be running up and down.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |