CSS Regions - Multiple Threads Demo

Tip: resize the browser window to see how text from multiple threads flows through regions.

This is a some­what con­trived ex­am­ple that shows how mul­ti­ple ar­bi­trary col­umns al­low for paged con­tent styl­ing. Con­tent can be in­ter­rupt­ed and re­sume lat­er with some nav­i­ga­tion aid to point the read­er where to go. In this case the in­ter­rup­tion is a sep­a­rate ar­ti­cle of text, but in a more com­plex ex­am­ple there may be a paged dis­play where mul­ti­ple ar­ti­cles be­gin on the first page and are each con­tin­ued on dif­fer­ent pag­es.

Each col­umn could have its own adorn­ments. Here there are stat­ic “con­tin­ued on” mark­ers but with a bit of javas­cript there could be foot­notes for mark­ers that fall in­side the col­umn or oth­er such call­outs.

This par­a­graph prob­a­bly falls in the third col­umn, sand­wiched be­tween the fill­er ar­ti­cle col­umns, but in the HTML it’s con­tig­u­ous with the rest of the blue back­ground text.

This ar­ti­cle is fill­er to show that the dis­play of text can be in­ter­rupt­ed by oth­er con­tent and re­sume else­where as your de­sign re­quires. This par­tic­u­lar de­sign is not that use­ful, but it does show the in­ter­rup­tion and re­sump­tion of text with­in a sin­gle screen, which may make for a demo that can be quick­ly com­pre­hend­ed.

This ar­ti­cle is fill­er to show that the dis­play of text can be in­ter­rupt­ed by oth­er con­tent and re­sume else­where as your de­sign re­quires. This par­tic­u­lar de­sign is not that use­ful, but it does show the in­ter­rup­tion and re­sump­tion of text with­in a sin­gle screen, which may make for a demo that can be quick­ly com­pre­hend­ed.

This ar­ti­cle is fill­er to show that the dis­play of text can be in­ter­rupt­ed by oth­er con­tent and re­sume else­where as your de­sign re­quires. This par­tic­u­lar de­sign is not that use­ful, but it does show the in­ter­rup­tion and re­sump­tion of text with­in a sin­gle screen, which may make for a demo that can be quick­ly com­pre­hend­ed.