Meta tags:

Headings (most frequently used words):

to, in, coding, paradise, introducing, stretchtext, js, easily, communicate, different, audiences, single, page, how, use, back, codinginparadise, org,

Text of the page (most frequently used words):
the (42), and (29), #stretchtext (17), can (14), epub (13), span (12), details (11), type (11), you (11), more (10), that (9), warming (8), for (8), reader (8), this (7), stretchsummary (7), stretchdetail (7), global (6), was (6), what (6), into (6), text (6), are (5), summary (5), should (5), which (5), their (5), these (4), new (4), accept (4), evidence (4), want (4), example (4), show (4), will (4), open (4), page (4), ted (4), nelson (4), hypertext (4), note (3), not (3), greater (3), how (3), however (3), tag (3), followed (3), using (3), pointing (3), there (3), girl (3), her (3), name (3), nancy (3), think (3), about (3), namespaces (3), detail (3), 1967 (3), with (3), but (3), different (3), specific (3), areas (3), readers (3), drill (3), down (3), single (3), blog (2), pages (2), follow (2), most (2), scientists (2), aside (2), href (2), evenmore (2), supporting (2), degrees (2), sub (2), trend (2), truth (2), sample (2), code (2), nested (2), things (2), first (2), achieve (2), good (2), inline (2), while (2), data (2), uuid (2), d321241819d2492d9869a11e39937515 (2), once (2), class (2), when (2), consists (2), dashed (2), box (2), both (2), css (2), classes (2), use (2), get (2), would (2), form (2), content (2), all (2), have (2), soup (2), html5 (2), xml (2), they (2), aria (2), simply (2), them (2), support (2), javascript (2), your (2), web (2), always (2), thus (2), continuous (2), narrative (2), may (2), possible (2), static (2), display (2), fixed (2), write (2), than (2), ordinary (2), longer (2), subject (2), area (2), see (2), writing (2), photo (2), around (2), paper (2), digital (2), screens (2), accordion (2), closed (2), change (2), shape (2), depending (2), needs (2), beginners (2), experts (2), writer (2), some (2), easily (2), communicate (2), audiences (2), introducing (2), brad (2), neuberg (2), back, codinginparadise, org, please, personal, views, expressed, mine, alone, those, employer, stay, date, posts, twitter, subscribe, rss, feed, arbitrarily, nest, also, bolded, its, here, creating, sometimes, entirely, block, hyperlink, somewhere, else, above, shown, opened, two, parts, inside, clicked, expanded, specify, mixing, special, several, reasons, feature, folded, reading, systems, perfect, long, exploring, directions, next, generation, ebooks, second, idpf, used, instead, namespace, since, has, thrown, away, html, uses, doesn, parse, starters, addition, like, queryselector, don, very, problematic, why, project, source, under, grab, files, drop, apache, license, hosted, github, editorially, same, unit, unlike, hypertexts, discrete, chunks, breaks, high, performance, dynamic, consoles, preferable, ways, present, moving, cursor, user, device, important, editorial, constraint, then, arrangements, must, remain, relative, order, through, levels, one, respect, appears, easier, rather, deciding, put, leave, out, author, merely, assigns, fineness, topics, determining, great, magnification, seen, altitudes, structure, evident, loses, track, where, shrinks, higher, shorter, level, wants, study, topic, magnifies, remains, oriented, stretched, made, detailed, pulling, throttle, magnify, direction, obtain, becoming, replacement, phrases, additional, clauses, popping, place, stretches, extremely, simple, powerful, probably, easiest, understand, hard, become, confused, invented, inventor, original, kevin, created, implementation, gets, problems, mix, bits, allow, based, interests, background, whenever, click, info, importantly, heart, learn, history, shouldn, mindlessly, mimic, dead, pulp, traditional, forces, either, target, provide, tangents, choose, stuck, gear, shift, often, struggle, whether, tutorial, document, interesting, tangent, might, find, informative, others, ignore, deeply, just, skimming, surface, other, marco, raaphorst, coding, paradise,

Text of the page (random words):
brad neuberg introducing stretchtext js easily communicate to different audiences in a single page coding in paradise about brad neuberg introducing stretchtext js easily communicate to different audiences in a single page photo by marco raaphorst as a writer i often struggle with whether to write a tutorial or document to beginners or experts what if there s some interesting tangent that some readers might find informative but others want to ignore what if you want to drill down deeply into a subject while just skimming the surface in other areas digital screens can accordion open and closed and change their shape depending on the needs of the reader traditional paper forces writing to be static and fixed either you target beginners or experts you can t provide tangents that readers can choose to follow or not the reader and writer are both stuck in a single gear shift web pages are not paper and shouldn t mindlessly mimic dead pulp digital screens can accordion open and closed and change their shape depending on the needs of the reader i ve created an implementation of stretchtext in javascript which gets around these problems you can mix in bits of stretchtext into your page to allow readers to drill down into specific areas based on their interests and background whenever you see a dashed box around text a reader can click it to open that area up and get more info more importantly these can be nested so a reader can drill down to their heart s content for example learn more about the history of stretchtext ted nelson photo by kevin stretchtext was invented by ted nelson the co inventor of hypertext in 1967 see ted nelson s original stretchtext writing in 1967 stretchtext is an extremely simple but powerful form of hypertext it is probably the easiest possible hypertext to understand it would be hard for a reader of stretchtext to become confused stretchtext consists of ordinary continuous text which can be stretched or made longer and more detailed by pointing at specific areas and pulling the throttle in the magnify direction the reader may obtain a greater detail on a specific subject or area of the text the text stretches becoming longer with replacement phrases new details and additional clauses popping into place the good of this structure should be evident the reader remains oriented if he loses track of where he is he shrinks the text to a higher shorter level if he wants to study a topic in more detail he magnifies it more an important editorial constraint on stretchtext then is that details and narrative arrangements must remain fixed in their relative order through different levels of stretchtext however in one respect it appears to be easier to write than ordinary text rather than deciding what details to put in and leave out the author merely assigns altitudes or fineness to topics and details thus determining at how great a magnification they will be seen high performance dynamic consoles may be preferable for stretchtext but ways are possible to present it on a static display if the display can support a moving cursor and a user pointing device editorially the stretchtext is 1 always the same unit and 2 always a continuous narrative thus it is unlike hypertexts with discrete chunks and breaks ted nelson hypertext note 8 1967 how to use the project is hosted on github and is open source under the apache 2 license simply grab the javascript and css files and drop them into your web page stretchtext consists of two parts the summary which is what will show inside the dashed box and the detail which is what will show when the summary is clicked and expanded you specify both by mixing in epub type why epub type several reasons first i think this feature should get folded into epub so that it can show up in reading systems i think it would be perfect for long form content and this blog is all about exploring new directions for next generation ebooks second i think the idpf should have used epub type instead of using the epub namespace since tag soup html5 has thrown away xml namespaces and xml namespaces are very problematic tag soup html5 simply doesn t parse them for starters in addition things like queryselector don t support namespaces at all in html they should have followed aria s example which uses aria or using special css classes what classes you can use stretchsummary and stretchdetail example p data uuid d321241819d2492d9869a11e39937515 there once was a span epub type stretchsummary girl span span epub type stretchdetail her name was nancy span p in the sample above the stretchsummary girl is followed by the stretchdetail that will be shown when it is opened up her name was nancy p data uuid d321241819d2492d9869a11e39937515 there once was a span class stretchsummary girl span span class stretchdetail her name was nancy span p this is good for creating inline stretchtext however sometimes you want the summary to be inline while the details should show an entirely new block you can achieve this by using a hyperlink for the summary pointing to a details that is somewhere else here s an example first followed by the code to achieve this most scientists accept global warming more details on global warming more supporting evidence greater degrees of co 2 evidence of warming trend it s the truth accept it note how in the sample code that stretchtext is arbitrarily nested you can nest these things however you want i ve also bolded the a tag summary and its details p most scientists accept a href global warming details epub type stretchsummary global warming a p aside id global warming details epub type stretchdetail p more details on global warming a epub type stretchsummary href evenmore more supporting evidence a p ol id evenmore epub type stretchdetail li greater degrees of co sub 2 sub li li evidence of warming span epub type stretchsummary trend span span epub type stretchdetail it s the truth accept it span li ol aside subscribe to my rss feed and follow me on twitter to stay up to date on new posts please note that this is my personal blog the views expressed on these pages are mine alone and not those of my employer back to codinginparadise org