CODEWITHSUNDEEP
htmlcss
Jurian Sluiman
Jurian Sluiman

Reputation: 13558

Justify single word in html/css

I have a header which I constructed like this:

<header class="top">
  <a href="">
    <span class="right">Stichting Delftsche Opera Compagnie presenteert</span>
    <h1 class="right">Carmen</h1>
    <h2 class="right">Een opera door Krashna Musika en de TU Delft</h2>
  </a>
</header>

This should look like this, as someone made this in Adobe Illustrator

Original

Then I applied some css and got to this (in the original there is a Dutch spelling mistake, this one is corrected, the scale is not completely equal either):

HTML version

The rules:

.top {
    display: block;
    width: 800px;
    float: right;
}

.top a {
    background-image: url('../img/logo.jpg');
    background-size: 150px 150px;
    background-repeat: no-repeat;

    padding-left: 150px;
    height: 175px;

    display: block;
    overflow: hidden;
}

.top .right {
    text-align: justify;
    width: 650px;
}

.top span, .top h2 {
    color: #E02C33;
    font-size: 1.8em;
}
.top h1 {
    color: #B02025;
    font-size: 4.7em;
    text-transform: uppercase;
}

I have two issues here:

  1. How can I justify both the <span> and <h2> to their equal lengths (my justify is not working as expected)
  2. How can I constraint "CARMEN" such the width and height are pre defined, the spacing between characters is rendered by the browser

Upvotes: 5

Views: 4555

Answers (2)

w3uiguru
w3uiguru

Reputation: 5895

One important thing is that while creating graphics initially in adobe photo shop or illustrator etc. is different and when we implement in actual webpage the output may vary little bit in some cases. So we have to write css like that so we can accomplish the desired design. Thanks.

see fiddle for code and demo

Fiddle: http://jsfiddle.net/ybf25/3/

Demo: http://jsfiddle.net/ybf25/3/embedded/result/

Note: As i don't have the Rose image so i was not able to create Demo as your given image in question.

See screen shot for output: Please open the screen shot in new window to see clear image.

enter image description here

Upvotes: 0

Daniel Rotter
Daniel Rotter

Reputation: 2056

The problem with justify is that the last line is usually no justified, because the letter spacing would be too long.

If you can use CSS3, there are new attributes, which make this possible: http://www.css3.com/css-text-justify/

If the header always stays the same, you can also adjust the font-size and letter-spacing attributes, until it fits.

Upvotes: 3

Related Questions