I'm trying to layout the text like http://simpleasmilk.co.uk/. I have tried playing around with the markup & CSS but still can't get it to do what I want. Do you have any suggestions?
Hi Josh, I can't get it to work, I don't even see what the problem could be? I have set the width to 620px in Big Text, copied the source, pasted and nothing ... :(
You could always try giving each line that you want justified a class such as
<
h1 class="top">, then do a middle and bottom class and adjust the letter spacing and the word spacing until it looks how you want. Here's a very simple example http://codepen.io/anon/full/fnCkL. Hope this kind of helps.
Without playing around with letter spacing etc … And just focusing on 1 line of text. Is there a method which will 'span/stretch/justify' a headline to a specific width. So I want 1 headline to span 620px for instance?
Hi.
I'm having problems justifying h1 text in a 940px div for a site I'm working on.
The Best Studio Awesome Artists Black Bird Tattoo
I applied text-align justify but it had no effect. I want all three lines completely justified. Would appreciate any advice here.
Thanks.
:)
So you actually have three separate lines of text inside an H1?
What are you expecting 'justify' to do...it can't stretch text after all?
I'm trying to layout the text like http://simpleasmilk.co.uk/. I have tried playing around with the markup & CSS but still can't get it to do what I want. Do you have any suggestions?
If you look at their markup they put each letter in a span...very heavy codewise.
My advice would be to put three separate headings inside an 'hgroup'. Give each of the headings a class and style them all independently.
They're using lettering.js which puts each character into a span. This is your best option.
This should do what you are after: http://www.zachleat.com/bigtext/demo/
It's very similar to lettering.js, but won't require you to manually adjust each glyph.
Thanks for the responses ... Much appreciated. Is there no way to do this using CSS alone and avoiding JS?
I'm not sure if you looked at the link I posted, but the output code is just CSS.
Hi Josh, I can't get it to work, I don't even see what the problem could be? I have set the width to 620px in Big Text, copied the source, pasted and nothing ... :(
You could always try giving each line that you want justified a class such as
<
h1 class="top">, then do a middle and bottom class and adjust the letter spacing and the word spacing until it looks how you want. Here's a very simple example http://codepen.io/anon/full/fnCkL. Hope this kind of helps.
Thanks J,
Without playing around with letter spacing etc … And just focusing on 1 line of text. Is there a method which will 'span/stretch/justify' a headline to a specific width. So I want 1 headline to span 620px for instance?
Not to my knowledge....sorry.
If that's the case, you are best using a jQuery plugin like http://fittextjs.com/ and applying it to each line.
@joshuanhibbert that BigText Wizard thing is pretty cool. If you don't have dynamic text, it's perfect!