Photoshop Question posted in
The official user guide can be found here.

HTML CSS How to drop caps words instead of just first letter? – Photoshop

I asked a similar question for iOS NSAttributedString but since it’s not possible with that, I am looking for a way to achieve this via HTML, CSS and javascript if needed.

I know CSS has “drop cap” using first-letter. Example: https://codepen.io/tutsplus/pen/GZxjEM

However, I need to do it for entire words and not just first-letter.
In the following picture, notice how “Strength” is the biggest and then “is not something” and “you have, rather” share the same line as “Strength”.

NOTE: My problem isn’t how to format the first word – it’s how to have 2 lines share the first line. Notice how “Strength” is the biggest and then “is not something” and “you have, rather” share the same line as “Strength”. How to make them share the same line? Similar to how drop-caps lets you have multiple lines be shared with the first letter.

I need to achieve a similar look with HTML, CSS and JS. If drop cap is not possible for this, is there any other way I can achieve this?

NOTE: Since my text will be variable, I can’t use an image/photoshop etc.

enter image description here

EDIT: From suggestions, CSS Flexbox might be able to achieve this. I need to figure out how to place my words in the boxes:

enter image description here

    <div>
    <div style="float: left; font-size: 4em; background-color:grey;">
        STRENGTH
    </div>
    <div style="float: left; padding-left: 10px; background-color:yellow;">
        <div>
            <span style="font-size: 2em;">is not</span><span style="font-size: 1em;"> something</span>
        </div>
        <div>
            you have, rather
        </div>
    </div>
</div>
<div style="clear: both; font-size: 2em;">
    something that reveals itself
</div>
<div style="font-size: 4em;">
    when you need it.
</div>
<div style="font-size: 1em;">
    #myHASHTAG
</div>
Tags:

3

Answers


  1. 0

    Try this:

    <div>
    <div style="float: left; width: 20%;">
        Big Text
    </div>
    <div style="float: left; width: 70%;">
        <div>
            small text first line
        </div>
        <div>
            small tex second line
        </div>
    </div>
</div>
<div style="clear: both;">
    the rest of the text
</div>
    Login or Signup to reply.
  2. 0

    I write an example for you and try to make it like the photo u share, hope it can be usefull for you :

    HTML : 

    <span class="bigText">Strength </span>
<span class="mediumText">is not 
   <span class="smallText">something </span>
</span>
<span class="subLine">you have, rather</span>

    css :

    .bigText{
   font-size:80px;
   text-transform: uppercase;// use capitalize for make first word uppercase
 }  
.mediumText{
   font-size:30px;
   text-transform: uppercase;
   position: absolute;
   top:35px
 }
 .smallText{
    font-size:20px;    
 }

 .subLine{
      font-size:20px;
 }

    https://jsfiddle.net/emilvr/6o2fpf9t/1/

    Login or Signup to reply.
  3. 0

    Here is a structure you can use, with Flexbox

    .inner {
  display: flex;
  align-items: flex-end;
}
.inner > div:nth-child(1) {
  font-size: 60px;
  text-transform: uppercase;
}
.inner2 {
  padding: 0 0 15px 10px;
}
.inner2 div:nth-child(-n+2) {
  display: inline-block;
}
.inner2 > div:nth-child(1) {
  font-size: 20px;
  text-transform: uppercase;
}
.wrapper > div:nth-child(2) {
  font-size: 28px;
  text-transform: uppercase;
}
.wrapper > div:nth-child(3) {
  font-size: 50px;
  text-transform: uppercase;
}
    <div class="wrapper">
  <div class="inner">
    <div>Strength</div>
    <div class="inner2">
      <div>is not</div>
      <div>something</div>
      <div>you have, rather</div>
    </div>
  </div>
  <div>something that reveals itself</div>
  <div>when you need it</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search