{"id":38030,"date":"2018-05-10T03:01:44","date_gmt":"2018-05-09T17:01:44","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=38030"},"modified":"2018-05-09T19:58:23","modified_gmt":"2018-05-09T09:58:23","slug":"word-wrap-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/word-wrap-primer-tutorial\/","title":{"rendered":"Word Wrap Primer Tutorial"},"content":{"rendered":"
\"Word<\/a>

Word Wrap Primer Tutorial<\/p><\/div>\n

On the recent series of Google Chart theme blog postings such as Google Line Area Bar Column Chart Multimedia Background Tutorial<\/a>, recent and looking back, we’ve had quite a time of it with word wrapping issues. So today we’re going to hone in on three categories of where word wrapping is an issue …<\/p>\n

    \n
  1. within the contents of a td<\/i> cell within an HTML table<\/i> element
    \n
    \nwe got great advice from     this useful link<\/a> to know that the ...
    \ntable<\/i> style=\"width:100%; table-layout:fixed;<\/b>\" was a good idea and that ...
    \ntd<\/i> style=\"word-wrap:break-word;<\/b>\" was a good idea
    \n<\/code>\n<\/li>\n
  2. to do with an a<\/i> link
    \n
    \na<\/i> style=\"word-wrap:break-word;<\/b>\" is a good idea
    \n<\/code>\n<\/li>\n
  3. to do with the contents of an HTML iframe element
    \n
    \niframe<\/i> contents style can not readily be controlled at the parent but at the body<\/i> element of what produces the iframe content ...
    \nbody<\/i> style=\"width:100%; word-wrap:break-word;<\/b>\" is a good idea ... looks better than before because     prediff.php<\/a> changed in this way<\/a>.
    \n<\/code>\n<\/li>\n<\/ol>\n

    Try a new window word_wrap.html<\/a>‘s live run<\/a> or see it below …<\/p>\n

    We take that multimedia data from the Pie Chart case and use the wonderful data from the Australian Bureau of Meteorology (with webpages like Sydney in winter 2016: A warm, wet winter for Sydney<\/a>) to show in today’s Area Chart tutorial picture<\/a> using the user prompt window entries …<\/p>\n

    \nOld Bad Word Wrapping in Table has no table style=”table-layout:fixed;” nor td style=”word-wrap:break-word;”<\/summary>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    https:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/qrtr.aifc;https:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/IMG_0631.JPG;https:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/IMG_0018.MOV;The Seasons Explained Area Chart&onclick=y&emailto=rmetcalfe15@gmail.com&emailsubject=The Seasons Explained via Area Chart<\/td>\n<\/tr>\n
    Sydney Season by Year Hottest Days in C<\/td>\n<\/tr>\n
    Summer,Autumn,Winter,Spring<\/td>\n<\/tr>\n
    2013<\/td>\n<\/tr>\n
    46.5,34.9,29.3,39.3<\/td>\n<\/tr>\n
    2014<\/td>\n<\/tr>\n
    41.9,31.6,25.8,45.3<\/td>\n<\/tr>\n
    2015<\/td>\n<\/tr>\n
    37.7,37.9,28.9,42.8<\/td>\n<\/tr>\n
    2016<\/td>\n<\/tr>\n
    42.2,36.6,27.0,37.4<\/td>\n<\/tr>\n
    2017<\/td>\n<\/tr>\n
    47.0,35.2,29.3,37.3<\/td>\n<\/tr>\n
    <\/td>\n<\/tr>\n<\/table>\n<\/details>\n

    … vs …<\/p>\n

    \nNew Good Word Wrapping in Table has table style=”table-layout:fixed;” and has td style=”word-wrap:break-word;”<\/summary>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    https:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/qrtr.aifc;https:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/IMG_0631.JPG;https:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/IMG_0018.MOV;The Seasons Explained Area Chart&onclick=y&emailto=rmetcalfe15@gmail.com&emailsubject=The Seasons Explained via Area Chart<\/td>\n<\/tr>\n
    Sydney Season by Year Hottest Days in C<\/td>\n<\/tr>\n
    Summer,Autumn,Winter,Spring<\/td>\n<\/tr>\n
    2013<\/td>\n<\/tr>\n
    46.5,34.9,29.3,39.3<\/td>\n<\/tr>\n
    2014<\/td>\n<\/tr>\n
    41.9,31.6,25.8,45.3<\/td>\n<\/tr>\n
    2015<\/td>\n<\/tr>\n
    37.7,37.9,28.9,42.8<\/td>\n<\/tr>\n
    2016<\/td>\n<\/tr>\n
    42.2,36.6,27.0,37.4<\/td>\n<\/tr>\n
    2017<\/td>\n<\/tr>\n
    47.0,35.2,29.3,37.3<\/td>\n<\/tr>\n
    <\/td>\n<\/tr>\n<\/table>\n

    … has the changed<\/b> HTML …<\/p>\n

    \n<table style=”width:100%;table-layout:fixed;<\/b>” border=1>
    \n<tr><td style=”word-wrap:break-word;”<\/b>>https:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/qrtr.aifc;https:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/IMG_0631.JPG;https:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/IMG_0018.MOV;The Seasons Explained Area Chart&onclick=y&emailto=rmetcalfe15@gmail.com&emailsubject=The Seasons Explained via Area Chart<\/td><\/tr>
    \n<tr><td>Sydney Season by Year Hottest Days in C<\/td><\/tr>
    \n<tr><td>Summer,Autumn,Winter,Spring<\/td><\/tr>
    \n<tr><td>2013<\/td><\/tr>
    \n<tr><td>46.5,34.9,29.3,39.3<\/td><\/tr>
    \n<tr><td>2014<\/td><\/tr>
    \n<tr><td>41.9,31.6,25.8,45.3<\/td><\/tr>
    \n<tr><td>2015<\/td><\/tr>
    \n<tr><td>37.7,37.9,28.9,42.8<\/td><\/tr>
    \n<tr><td>2016<\/td><\/tr>
    \n<tr><td>42.2,36.6,27.0,37.4<\/td><\/tr>
    \n<tr><td>2017<\/td><\/tr>
    \n<tr><td>47.0,35.2,29.3,37.3<\/td><\/tr>
    \n<tr><td><\/td><\/tr>
    \n<\/table>\n<\/div>\n<\/details>\n

    … to create a Google Chart Area Chart “Sydney Season by Year Hottest Days in C” for the years from 2013 to 2017.<\/p>\n

    \nOld bad Word Wrapping in a link has no a style=”word-wrap:break-word;”<\/summary>\n

    You can see changes, today, via the report HTTP:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/prediff.php?dpath=HTTP:\/\/www.rjmprogramming.com.au\/&dfilespec=PHP\/*\/*.*GETME&dmdates=2018-05-08&dmdateb=2018-05-09’>HTTP:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/prediff.php?dpath=HTTP:\/\/www.rjmprogramming.com.au\/&dfilespec=PHP\/*\/*.*GETME&dmdates=2018-05-08&dmdateb=2018-05-09<\/a> below …<\/p>\n<\/details>\n

    … vs …<\/p>\n

    \nNew good Word Wrapping in a link has a style=”word-wrap:break-word;”<\/summary>\n

    You can see changes, today, via the report HTTP:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/prediff.php?dpath=HTTP:\/\/www.rjmprogramming.com.au\/&dfilespec=PHP\/*\/*.*GETME&dmdates=2018-05-08&dmdateb=2018-05-09’>HTTP:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/prediff.php?dpath=HTTP:\/\/www.rjmprogramming.com.au\/&dfilespec=PHP\/*\/*.*GETME&dmdates=2018-05-08&dmdateb=2018-05-09<\/a> below …<\/p>\n

    … has the changed<\/b> HTML …<\/p>\n

    \n<p>You can see changes, today, via the report <a style=”word-wrap:break-word;”<\/b> target=_blank href=’HTTP:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/prediff.php?dpath=HTTP:\/\/www.rjmprogramming.com.au\/&dfilespec=PHP\/*\/*.*GETME&dmdates=2018-05-08&dmdateb=2018-05-09′>HTTP:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/prediff.php?dpath=HTTP:\/\/www.rjmprogramming.com.au\/&dfilespec=PHP\/*\/*.*GETME&dmdates=2018-05-08&dmdateb=2018-05-09′>HTTP:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/prediff.php?dpath=HTTP:\/\/www.rjmprogramming.com.au\/&dfilespec=PHP\/*\/*.*GETME&dmdates=2018-05-08&dmdateb=2018-05-09<\/a> below …<\/p>\n<\/div>\n<\/details>\n

    … and the report below …<\/p>\n