14 Replies Latest reply: Jun 17, 2012 9:53 AM by Nancy O. RSS

    Text Rendition

    wittonend Community Member

      I am building a rather text heavy site. When viewed live or in the four most popular browsers the text appears far shorter in height than in design view (I'm the Arial family in CS6. I can enter a full page of text (900px) but when seen in a browser it appears to be only 75% of the page depth. How can I get the text to appear exactly the same as I have inputted into Dreamweaver?

        • 1. Re: Text Rendition
          osgood_ CommunityMVP

          So what you are saying is the browser is NOT showing all of your text height wise? Maybe that's because you have attached a height to something in your code?

          • 2. Re: Text Rendition
            wittonend Community Member

            All the text is showing but finishes short of the end of the page, so there's gap between the last line and the bottom of the page. By experimenting I've found that when typing in the text if I don't press return to insert paragraphs, i.e. just have a solid block of text, everything is ok live and the text fills the page. Once I insert paragraphs the problem returns and the page of text appears to shrink in depth.

            • 3. Re: Text Rendition
              wittonend Community Member

              Thanks for the reply, I've solved the problem by inserting line breaks rather than paragraphs. My inexperience showing through but if you know why inserting paragraphs had this effect it might be useful to share.

              • 4. Re: Text Rendition
                osgood_ CommunityMVP

                wittonend wrote:

                 

                Thanks for the reply, I've solved the problem by inserting line breaks rather than paragraphs. My inexperience showing through but if you know why inserting paragraphs had this effect it might be useful to share.

                 

                Something is wrong with your code as <p></p> paragraph tags would not cause the problem you are describing. Without seeing the page and the code its difficult to give you a definitive answer.

                • 5. Re: Text Rendition
                  Nancy O. CommunityMVP

                  wittonend wrote:

                   

                  All the text is showing but finishes short of the end of the page, so there's gap between the last line and the

                  bottom of the page.

                   

                  Hit Ctrl+++ in browsers to increase text size. 

                   

                  Line breaks are not a good choice and should never be used in place of <h1, h2, h3> and <p> tags.

                   

                  Use CSS to style your paragraphs.

                   

                      p {

                       font-size: 18px; /**adjust font-size as required**/

                       line-height: 1.5;

                       }

                   

                   

                   

                   

                  Nancy O.

                  • 6. Re: Text Rendition
                    wittonend Community Member

                    Hi Nancy / Osgood

                    Thanks for your interest in this problem that I have. I can't attach the Word docs or pdfs to the forum so I hope you don't mind me replying directly.

                    The attached images might illustrate the situation more clearly. I have set up two test HTML pages, one using paragraph spacing and the other using line breaks.

                    You will see that the text in the one using paragraphs shrinks in length when viewed Live. The other one using line breaks renders perfectly.

                    The code I used for the paragraphed version is below:


                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                    The quick brown fox jumps over those lazy dogs

                     

                    The only difference is that I used line breaks in the other version.

                    ThanksWittonend

                    • 7. Re: Text Rendition
                      osgood_ CommunityMVP

                      Are you just copying from Word and pasting into Dreamweaver because that could be the issue. Word never really transfers correctly over to Dreamweaver if you do that. Even if the code looks ok I have experienced strange things happening.

                       

                      I usually dump the text in simple-text(Mac) or notepad (PC) to get rid of the formating and then start from that point.

                      • 8. Re: Text Rendition
                        wittonend Community Member

                        I manually typed the first line of the exmples. I then copied and pasted the subsequent lines using paragraphs or line breaks. I didn't paste from Word.

                        • 9. Re: Text Rendition
                          osgood_ CommunityMVP

                          This just doesn't make any sense. Can you post the complete page code here and any css you might be using?

                          • 10. Re: Text Rendition
                            wittonend Community Member

                            This is the code for the paragraphed version that shrinks:

                             

                            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                            <html xmlns="http://www.w3.org/1999/xhtml">

                            <head>

                            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                            <title>Paragraphs</title>

                            <style type="text/css">

                            body,td,th {

                                      font-family: Arial, Helvetica, sans-serif;

                                      color: #000;

                            }

                            body {

                                      background-color: #FFF;

                                      text-align: center;

                                      font-size: 12px;

                            }

                            h1 {

                                      font-size: 36px;

                                      color: #390;

                            }

                            h2 {

                                      font-size: 24px;

                                      color: #390;

                            }

                            h3 {

                                      font-size: 18px;

                                      color: #390;

                            }

                            p {

                             

                             

                                font-size: 12px;

                             

                             

                                line-height: 1;

                             

                             

                            }

                            #container {

                            }

                            #container {

                                      background-color: #FF6;

                                      height: 800px;

                                      width: 800px;

                                      margin-right: auto;

                                      margin-left: auto;

                                      position: relative;

                                      text-align: left;

                            }

                            </style>

                            </head>

                             

                             

                            <body>

                            <div id="container">

                            The quick  brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                              <p>The quick brown fox jumps over those lazy dogs</p>

                            </div>

                            </body>

                            </html>

                             

                            and this is for the line break version that doesn't:

                             

                            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                            <html xmlns="http://www.w3.org/1999/xhtml">

                            <head>

                            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                            <title>Paragraphs</title>

                            <style type="text/css">

                            body,td,th {

                                      font-family: Arial, Helvetica, sans-serif;

                                      color: #000;

                            }

                            body {

                                      background-color: #FFF;

                                      text-align: center;

                                      font-size: 12px;

                            }

                            h1 {

                                      font-size: 36px;

                                      color: #390;

                            }

                            h2 {

                                      font-size: 24px;

                                      color: #390;

                            }

                            h3 {

                                      font-size: 18px;

                                      color: #390;

                            }

                            p {

                             

                             

                                font-size: 12px;

                             

                             

                                line-height: 1;

                             

                             

                            }

                            #container {

                            }

                            #container {

                                      background-color: #FF6;

                                      height: 800px;

                                      width: 800px;

                                      margin-right: auto;

                                      margin-left: auto;

                                      position: relative;

                                      text-align: left;

                            }

                            </style>

                            </head>

                             

                             

                            <body>

                            <div id="container">The quick brown fox jumps over those lazy dogs.<br />

                              <br />The quick brown fox jumps over those lazy dogs.

                             

                             

                              <br />

                              <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.<br />

                            <br />

                            The quick brown fox jumps over those lazy dogs.</div>

                            </body>

                            </html>

                             

                            Both sets of code are the same except for the paragraph / line break issue.

                            • 11. Re: Text Rendition
                              osgood_ CommunityMVP

                              It shrinks because you have line-height set at 1. Delete the line height.

                               

                               

                              p {

                              font-size: 12px;

                              line-height: 1;

                              }

                               

                               

                              or set the line-height at something greater that the font-size like 20px

                              • 12. Re: Text Rendition
                                osgood_ CommunityMVP

                                Also don't set the height of the container, let the content set the height. This is not desk-top-publishing.

                                 

                                 

                                #container {

                                 

                                          background-color: #FF6;

                                 

                                          height: 800px;

                                 

                                          width: 800px;

                                 

                                          margin-right: auto;

                                 

                                          margin-left: auto;

                                 

                                          position: relative;

                                 

                                          text-align: left;

                                 

                                }

                                • 13. Re: Text Rendition
                                  wittonend Community Member

                                  I've tried the line height suggestion and experimented with a couple of others with no success, line breaks render exactly, paragraphs always shrink in Live view and previewed in browsers.

                                  • 14. Re: Text Rendition
                                    Nancy O. CommunityMVP

                                    Try using a bigger font.  12px fonts are rarely used anymore because they are too small to be viewed comfortably on average displays.

                                     

                                    p {

                                    font-size: 18px;

                                    line-height: 28px;

                                    }

                                     

                                     

                                     

                                     

                                    Nancy O.