Word Wrap Primer Tutorial
On the recent series of Google Chart theme blog postings such as Google Line Area Bar Column Chart Multimedia Background Tutorial, 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 …
- within the contents of a td cell within an HTML table element
we got great advice from this useful link to know that the ...
table style="width:100%; table-layout:fixed;" was a good idea and that ...
td style="word-wrap:break-word;" was a good idea
- to do with an a link
a style="word-wrap:break-word;" is a good idea
- to do with the contents of an HTML iframe element
iframe contents style can not readily be controlled at the parent but at the body element of what produces the iframe content ...
body style="width:100%; word-wrap:break-word;" is a good idea ... looks better than before because prediff.php changed in this way.
Try a new window word_wrap.html‘s live run or see it below …
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) to show in today’s Area Chart tutorial picture using the user prompt window entries …
Old Bad Word Wrapping in Table has no table style=”table-layout:fixed;” nor td style=”word-wrap:break-word;”
| 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 |
| Sydney Season by Year Hottest Days in C |
| Summer,Autumn,Winter,Spring |
| 2013 |
| 46.5,34.9,29.3,39.3 |
| 2014 |
| 41.9,31.6,25.8,45.3 |
| 2015 |
| 37.7,37.9,28.9,42.8 |
| 2016 |
| 42.2,36.6,27.0,37.4 |
| 2017 |
| 47.0,35.2,29.3,37.3 |
… vs …
New Good Word Wrapping in Table has table style=”table-layout:fixed;” and has td style=”word-wrap:break-word;”
| 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 |
| Sydney Season by Year Hottest Days in C |
| Summer,Autumn,Winter,Spring |
| 2013 |
| 46.5,34.9,29.3,39.3 |
| 2014 |
| 41.9,31.6,25.8,45.3 |
| 2015 |
| 37.7,37.9,28.9,42.8 |
| 2016 |
| 42.2,36.6,27.0,37.4 |
| 2017 |
| 47.0,35.2,29.3,37.3 |
… has the changed HTML …
<tr><td style=”word-wrap:break-word;”>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>
<tr><td>Sydney Season by Year Hottest Days in C</td></tr>
<tr><td>Summer,Autumn,Winter,Spring</td></tr>
<tr><td>2013</td></tr>
<tr><td>46.5,34.9,29.3,39.3</td></tr>
<tr><td>2014</td></tr>
<tr><td>41.9,31.6,25.8,45.3</td></tr>
<tr><td>2015</td></tr>
<tr><td>37.7,37.9,28.9,42.8</td></tr>
<tr><td>2016</td></tr>
<tr><td>42.2,36.6,27.0,37.4</td></tr>
<tr><td>2017</td></tr>
<tr><td>47.0,35.2,29.3,37.3</td></tr>
<tr><td></td></tr>
</table>
… to create a Google Chart Area Chart “Sydney Season by Year Hottest Days in C” for the years from 2013 to 2017.
Old bad Word Wrapping in a link has no a style=”word-wrap:break-word;”
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 below …
… vs …
New good Word Wrapping in a link has a style=”word-wrap:break-word;”
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 below …
… has the changed HTML …
… and the report below …
… looks better than before because prediff.php changed in this way.
If this was interesting you may be interested in this too.
