Look Like A Magazince, How Do You Code It?

**Chris77** · Aug 4, 2012 17:33

Sitepoint Members,
I don't know why I don't see this on websites. In magazines you'll see a sentence or two in very large letters the author wants you to not miss out on. I think it's effective. I have variable width on my site so it'll have to adjust for all text widths. You would put the sentence in the code, the font size wanted is in the code, and the other regular size text will form around this larger text. Have any idea on how to code it. I don't know what this highlight by using larger text is called so I can't find anything online about it. Maybe it's css, maybe it's javascript.

Thanks,

Chris

**Rayzur** · Aug 4, 2012 19:22

You would put the sentence in the code, the font size wanted is in the code, and the other regular size text will form around this larger text. Have any idea on how to code it.

A simple <span> will allow you to style the stand-out text differently.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
p {
    width:60%;
    margin:0 auto;
    font-size:1em;
    background:#eef;
}
p span {
    font-size:2em;
    color:red;
}
</style>

</head>
<body>

<p>
    Lorem ipsum dolor sit amet consectetuer Vivamus lacinia elit nec eu. Nunc tincidunt Quisque 
    Suspendisse semper tincidunt tempor semper libero sagittis quis. Maecenas enim iaculis In 
    Curabitur Vestibulum Suspendisse Quisque condimentum nunc amet. 
        <span>
            Nest the text you are wanting to stand out in a span. 
            Then style that span with the font styles you desire.
        </span>
    Auctor Phasellus ipsum netus condimentum Aenean dictum et wisi quis nec. Massa Nullam et 
    Nullam consequat rutrum magnis amet nibh felis magna. Vitae penatibus montes elit lorem elit ipsum.
</p>

</body>
</html>

**Chris77** · Aug 4, 2012 20:19

Close, but not what I was thinking. The stand out text would be a block that would hold its "shape". It would not be fluid with the regular text. I guess it would behave a lot like an advertisement, but there's no border around it like an advertisement usually has.

Thanks

**Rayzur** · Aug 4, 2012 20:36

You could float that span (left or right) and set a width on it to retain the shape. Then the other text would flow around it. In fact, a float is the only element that text will flow around.

**Chris77** · Aug 4, 2012 23:59

I used
p span {font-size:2em; color:red;width:300px;float:left;text-align:none}

The align:none function "none", of course, doesn't exist but I can't get it to stop justifying the text left and right like I have the rest of the text. I'm not sure what they use in magazines. I guess they centr it. text-align:center and change the wording or width so you don't have one word at the bottom.

**ralph.m** · Aug 5, 2012 00:06

Originally Posted by Chris77

I can't get it to stop justifying the text left and right like I have the rest of the text.

Try text-align: left;

I'm not sure what they use in magazines.

Well, your options on the web are more limited at this stage.

change the wording or width so you don't have one word at the bottom.

Programs like InDesign cater for this, but it's not something CSS2 can do, and I'm not sure CSS3 really has a solution for this either (yet, anyhow). But you could use JavaScript:

http://css-tricks.com/preventing-widows-in-post-titles/

**Chris77** · Aug 5, 2012 00:35

I used
p span {font-size:1.5em;width:300px;float:left;text-align:center;padding:10px;line-height:1.1}

Without line-height:1.1 the leading seemd to be zero - vertically the lines of text were touching, eventhough earlier in the css I had line-height of 1.25. Why would I have to reduce line height to increase leading?

Other than this concern, it looks pretty good.

Thanks!

Chris

**Chris77** · Sep 5, 2012 23:22

I'm using
span.sto{font-size:150%;width:35%;float:right;text-align:center;padding:15px;line-height:1.1}

Generally it looks fine but it's not center aligning the text - the text is off center. It seems to be counting spaces beteween words when the next word is on the next line.

The padding left and risgh looks a whole lot bigger than the paddig top and bottom.

Thanks,

Chris

**Chris77** · Sep 6, 2012 08:11

I just realized that I really don't want the text of the stand-out adjusting. I want it permanent so when the visitor widens or narrows his/her browser the text of the stand out doesn't adjust. That would likely prevent the problem I'm havig now.

**ralph.m** · Sep 6, 2012 17:18

Could you post a link or working example code? It's not really clear where you are up to with this.

**Chris77** · Sep 6, 2012 17:42

It was that I didn't have text-indent:0 in the class for span to stop the indenting I had defined for <p>.

User Tag List

Thread: Look Like A Magazince, How Do You Code It?

Thread Tools

Display

Look Like A Magazince, How Do You Code It?

Bookmarks

Bookmarks

Posting Permissions