Adobe Community: Text Rendition

Currently Being Moderated

Text Rendition

Jun 14, 2012 6:12 AM

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?

1003 Views 14 Replies Latest reply: Nancy O., Jun 17, 2012 9:53 AM

Replies

Currently Being Moderated

1. osgood_,

Jun 14, 2012 6:54 AM in reply to wittonend

Report

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?

|
Mark as:
Currently Being Moderated

2. wittonend,

Jun 14, 2012 7:06 AM in reply to osgood_

Report

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.

|
Mark as:
Currently Being Moderated

3. wittonend,

Jun 14, 2012 7:23 AM in reply to osgood_

Report

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.

|
Mark as:
Currently Being Moderated

4. osgood_,

Jun 14, 2012 7:44 AM in reply to wittonend

Report

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 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.

|
Mark as:
Currently Being Moderated

5. Nancy O.,

Jun 14, 2012 2:20 PM in reply to wittonend

Report

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 tags.

Use CSS to style your paragraphs.

 p {
 font-size: 18px; /**adjust font-size as required**/
 line-height: 1.5;
 }

Nancy O.

|
Mark as:
Currently Being Moderated

6. wittonend,

Jun 15, 2012 2:36 AM in reply to osgood_

Report

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

|
Mark as:
Currently Being Moderated

7. osgood_,

Jun 15, 2012 4:10 AM in reply to wittonend

Report

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.

|
Mark as:
Currently Being Moderated

8. wittonend,

Jun 15, 2012 5:38 AM in reply to osgood_

Report

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.

|
Mark as:
Currently Being Moderated

9. osgood_,

Jun 15, 2012 5:42 AM in reply to wittonend

Report

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

|
Mark as:
Currently Being Moderated

10. wittonend,

Jun 15, 2012 6:01 AM in reply to osgood_

Report

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
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
</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. 
 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 quick brown fox jumps over those lazy dogs. 
 
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.

|
Mark as:
Currently Being Moderated

11. osgood_,

Jun 15, 2012 6:25 AM in reply to wittonend

Report

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

|
Mark as:
Currently Being Moderated

12. osgood_,

Jun 15, 2012 6:26 AM in reply to osgood_

Report

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;

}

|
Mark as:
Currently Being Moderated

13. wittonend,

Jun 17, 2012 1:16 AM in reply to osgood_

Report

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.

|
Mark as:
Currently Being Moderated

14. Nancy O.,

Jun 17, 2012 9:53 AM in reply to wittonend

Report

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.

|
Mark as:

Forum guidelines

Answers + Points = Status

10 points awarded for Correct Answers
5 points awarded for Helpful Answers
10,000+ points
1,001-10,000 points
501-1,000 points
5-500 points

Dreamweaver

Text Rendition

Jun 14, 2012 6:12 AM

More Like This

Bookmarked By (0)

Answers + Points = Status