text slow slice text slow slice text slow slice text slow slice text slow slice text slow slice text slow slice text slow slice text slow slice text slow slice text slow slice text slow slice text slow slice text slow slice text slow slice text slow slice text slow slice text slow slice text slow slice text slow slice text slow slice text slow slice text slow slice

Ragged Text Flow Test Page

When Great Lakes Rubber and Hydraulics was still operating, I maintained the website. I created and image that had the outline of fitting filled in with image from three industries that we served. I used a method that I learned in a book by Eric Meyer (sorry, can't find it and can't remember the name) to flow the text around the image. The technique is detailed at his website.

Recently I noticed that many websites are trending away from rectangular headers. But the curves or angles they incorporate are small, and the text does not flow around them. I decided to play around with flowing text around images, starting with the diagonal flow seen at the top of the pages on this site. I poked around a little, but I didn't see any less fussy ways of accomplishing a ragged text flow. Most of the instances of ragged text flow that I have seen have only flowed around an image on one side of the page. I decided to try to do both sides of the screen.

FWIW, There were some issues on the right hand side. I have not thoroughly tested this. However I belive that when the you float two sliced images in the same div, one on the left and one on the right, the image slices on both sides must be the same height. On cases where my slicing wasn't perfect, I used a negative margin to line them up. When the bottom of the text and the bottom of the image happened to be the same, the text would display on top of the image. The text size and the slice height need to be such that these numbers are not the same. I selected my text size before I started slicing my image. in this example I selected 1em for the text and 19px for the slicing height.

One problem with this approach is that it isn't very responsive. Since each of the sliced images is a different percentage of the container, you can't use width: nn%; height: auto; I have written a little bit of javascript to assign a width based on a percentage of the original size of the image. The images resize at the standard bootstrap breakpoints. In these examples I do not resize the tuilips image. On a site where the point of the content is something other than flowing text around images, I would probably either eliminate the images on small screens, or, stacke them. The easiest would be to stack the image above the text.

Bacon Ipsum

Bacon ipsum dolor amet chicken turducken meatloaf boudin ham shoulder round round pastrami chuck picanha hamburger kevin capicola rump ribeye. urgdoggen rump tongue, ground round pancetta sirloin short loin ham. Doner cupim meatloaf pig biltong drumstick cow kielbasa beef ribs. Pork belly pastrami doner, bacon alcatra cow hamburger. Pork chop kielbasa tail sausage doner fatback turkey, t-bone biltong ribeye.

Brisket pork loin corned beef jerky porchetta andouille doner tenderloin pork drumstick. Picanha meatloaf shank flank kevin pork loin. Ground round capicola burgdoggen, pork belly drumstick turducken sausage doner venison filet mignon landjaeger rump porchetta. Flank bacon spare ribs corned beef picanha, sirloin ribeye burgdoggen beef ribs pig pancetta tenderloin boudin beef. Shank cupim ground round porchetta cow boudin frankfurter burgdoggen. Pork loin pork chop filet mignon, jowl sirloin flank brisket leberkas. Jowl chuck filet mignon shank, meatball capicola porchetta tri-tip venison pork.

Meatball leberkas pork beef ribs, biltong pancetta doner pork belly shank brisket cow flank. Shankle burgdoggen spare ribs, jerky prosciutto tenderloin cupim shank tail capicola venison turducken pork sirloin. Sausage hamburger burgdoggen, capicola picanha doner corned beef fatback meatball t-bone jerky ham. Rump kevin beef, jowl ham hock ground round bacon chuck corned beef.

Cat Ipsum

Scratch the furniture. Poop in litter box, scratch the walls toy mouse squeak roll over or loves cheeseburgers or wack the mini furry mouse. Spill litter box, scratch at owner, destroy all furniture, especially couch immediately regret falling into bathtub cats go for world domination, for meoooow! curl up and sleep on the freshly laundered towels. Fall over dead (not really but gets sypathy) i could pee on this if i had the energy and have my breakfast spaghetti yarn. Touch water with paw then recoil in horror lick butt and make a weird face for playing with balls of wool sleep on keyboard, yet curl up and sleep on the freshly laundered towels, you call this cat food? so if it fits, i sits. Use lap as chair a nice warm laptop for me to sit on, make muffins. Scratch the box lick the curtain just to be annoying so touch water with paw then recoil in horror love to play with owner's hair tie yet knock over christmas tree. Meow all night having their mate disturbing sleeping humans where is my slave? I'm getting hungry. A nice warm laptop for me to sit on vommit food and eat it again for peer out window, chatter at birds, lure them to mouth. Meoooow! gnaw the corn cob but have secret plans.

Steal the warm chair right after you get up hide from vacuum cleaner cats go for world domination but rub face on everything hide when guests come over howl uncontrollably for no reason. Fall asleep on the washing machine intently stare at the same spot, but leave hair everywhere, so jump off balcony, onto stranger's head but have my breakfast spaghetti yarn. Eat a plant, kill a hand my left donut is missing, as is my right or poop in litter box, scratch the walls so sit on the laptop, for sit and stare. Chase imaginary bugs this human feeds me, i should be a god dream about hunting birds. This human feeds me, i should be a god cat not kitten around and the dog smells bad my left donut is missing, as is my right so scream for no reason at 4 am. Cat not kitten around chase after silly colored fish toys around the house. Jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water scratch at the door then walk away scratch the postman wake up lick paw wake up owner meow meow for kick up litter russian blue. Playing with balls of wool. Meowzer! chase mice, or lick arm hair sleep on dog bed, force dog to sleep on floor. Stare at wall turn and meow stare at wall some more meow again continue staring purrrrrr but sun bathe going to catch the red dot today going to catch the red dot today vommit food and eat it again.

Tuna Ipsom

Blue catfish viperfish bonnetmouth pilot fish woody sculpin; red snapper, boga. Pacific trout weeverfish slipmouth loach goby, pygmy sunfish firefish fathead sculpin grunter. Tadpole fish, shortnose chimaera--spookfish lake chub pompano Moorish idol Norwegian Atlantic salmon Atlantic eel.

Monkeyface prickleback whiting silver dollar soldierfish scorpionfish ilisha spiderfish chain pickerel mola sea snail! European perch blue triggerfish sailfish walleye deepwater cardinalfish false trevally.

Tenuis, angelfish sea devil Moses sole footballfish aruana threadfin bream clingfish; smoothtongue, salmon pipefish, jewfish dealfish central mudminnow lenok. Sawfish boafish damselfish New Zealand smelt sturgeon pomfret grayling American sole.

Chuck Norris Ipsum

Chuck Norris is so fast, he can run around the world and punch himself in the back of the head. Chuck Norris is so fast, he can run around the world and punch himself in the back of the head. Contrary to popular belief, Chuck Norris, not the box jellyfish of northern Australia, is the most venomous creature on earth, Chuck Norris' hand is the only hand that can beat a Royal Flush. Outer space exists because it's afraid to be on the same planet with Chuck Norris Chuck Norris is the reason why Waldo is hiding, Chuck Norris drives an ice cream truck covered in human skulls Chuck Norris uses pepper spray to spice up his steaks Chuck Norris watched Twilight. He's never stopped roundhouse kicking ever since. .

Chuck Norris was once stuck in a rut, that rut is now known as the Grand Canyon Chuck Norris is the reason why Waldo is hiding. Chuck Norris can get a spare in bowling on his first throw, Chuck Norris uses pepper spray to spice up his steaks. There is no chin behind Chuck Norris' beard. There is only another fist. Chuck Norris doesn't wash his clothes, he disembowels them.