Question 205760 in Html Question posted in
Some basic documentation can be found here.

HTML/CSS and JavaScript, I'm printing out list of names and want a different font size for just the first letter

I have a csv file with list of names
ex:

MUSK Elon,LEE Brucen
GATES Bill,TRUMP Donaldn

and I am trying to print out names in different fonts, sizes, and spacings using html.
My goal is to print out something like this:
enter image description here

I tried this code for CSS:

        .font:first-letter {
            font-size: 150%;
        }

but it didn’t give me what I wanted because it only affected the first letter of the whole line, not every entry separated by commas.

var fontSizeInput = document.getElementById("font-size-input"); 
var fontSize = fontSizeInput.value + "pt";
//... other inputs

var lines = text.split('n'); 
var container = document.getElementById('text-container');
container.innerHTML = '';


for (var i = 0; i < lines.length; i++) {
   var line = lines[i];
   var p = document.createElement('p');
            
   // Applying font style    
   p.className = 'font';
   p.style.fontSize = fontSize;

   // Replace comma with a space
   var modifiedLine = line.replace(/,/g, ' ');
   p.innerHTML += modifiedLine;
   container.appendChild(p);

This is not everything but what I have so far regarding the font sizes. I am thinking separating the first letter before I append and applying a different font size but wondering if this is a good way and if there is a better way to do this.

Thank you I appreciate any help!

Tags:

2

Answers


  1. 0

    To do this you should probably make the names spans and do "first letter" of the span. I notice that the last name has a bigger font size than the last, so you could split it into classes. Try this for HTML:

    <span class="last">MUSK </span>
<span class="first">Elon </span>...
<br>
<span class="last">GATES </span>
<span class="first">Bill </span>...

    Because spans are inline, they will stay on the same line (which is why there is a "br" tag.

    For CSS:

    .last:first-letter {
    font-size: 150%
}
.first:first-letter {
    font-size: 140%
}
    Login or Signup to reply.
  2. 0

    Here is another way

    Jquery

    var str = $('p').text().split(" ");
$('p').empty();
str.forEach(function(a) {
  $('p').append('&nbsp;<span>' +      a.slice(0, 1) + '</span>' + a.slice(1))
})

    CSS

    p {
  font-size: 150%;
  color: #000000;
}

span {
  font-size: 200%;
  color: #ff0000;
}

    And the HTML

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hello This Is The Title</p>

    Give it a try or see it working in this codepen I created for you

    https://codepen.io/Familia-Santiaborg/pen/GRwymwm

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search