0

We love circles! I need help to put text inside a circle and have the text lines wrap at the edges of the circle.

I have two different, insufficient attempts here: http://chrislaursen.com/papertwin/band/

The first one utilizes the jquery plugin TextMorph: http://nicodmf.github.com/TextMorph/en.html. This wraps the text nicely within the circle, but I don't know how to vertically center it.

The second circle on my page simply uses padding to keep the text within the circle. This is a simple css solution that does not put the text in the desired circle shape.

I reckon the solution involves modifying the plugin used in the first circle to vertically center the text, but I don't know how to do that. Any help would be greatly appreciated!

Improve this question
1
  • 1
    Welcome! Please post the specific code where you think the issue is happening, and any errors in the console/etc that might be occuring. Commented Nov 15, 2012 at 21:42

3 Answers 3

Reset to default
1

The other solutions aren't generalized, so I thought I'd take a crack at making a more algorithmic solution. If you look at the code for TextMorph, you'll see that the .content element (which contains the text) is having its margin-top property set to be the negative of total-height - lineheight (these are both things you set when you initialize the TextMorph object). The <div> would that has your text would normally appear below your circle (or other shape), so it's being "backed up" into position. All we need to do to get the text to be wonderfully centered is to "back it up" so that it's centered.

The following code starts by setting .content's margin-top to 1/2 the height of the circle. This makes the text appear in the bottom half of the circle. It then incrementally adjusts the margin-top of .content until it is nearly centered (see comment in code). It takes into account that the height (in pixels) of your text might change, depending on font-face, font size, browser rendering, etc.

Snippet:

$('.content').css('text-align', 'justify'); topMargin = 0 - $('#circle').height() / 2; $('.content').css('margin-top', topMargin + 'px'); make_vertical_center = function() { var heightAbove, offset; topMargin -= lineHeight / 4; // more precision, but also more increments as this approaches 1 $('.content').css('margin-top', topMargin + 'px'); heightAbove = Math.abs(($('#circle').height() - $('.content').height()) / 2); offset = Math.abs($('#circle').offset().top - $('.content').offset().top); if (offset - heightAbove > 0) { make_vertical_center(); } }; make_vertical_center();

Take a look at a Fiddle of all this.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

This is far from the best solution, it's more of a quick fix, but it works (see here).

$(function() { var pad = new Array(75).join("&nbsp;"); $('#circle').prepend(pad); var circle = new TextMorph(document.getElementById('circle'), { width: 500, height: 500, lineHeight: 15 }); });

​ The idea is filling up the text with a prefix of blank spaces so that it gets "pushed" down.

Improve this answer

Comments

0

What I have did was to wrap around the text in your "div" with "p" tag. Then I have try some these 6 methods of how to vertical align text in div when it is in block element (like the "p" tag).

I have try some of them - you can choose the one that is best for your needs. You may need some CSS adjustments (change the styles a little bit) but the important here is the idea of how to make the things to work.

This is what I have done:

<div style="margin-top: -499px;" class="content"><p style=" position: absolute; top: 100px; left: 0; right: 0; bottom: 0; width: 60%; height: 30%; margin: auto; margin-top: 20%; ">Bro­ok­lyn’s syn­th gro­up Pa­per­twin (Max Dec­ker, Fran­cis Car­di­nale, Nic­k Sho­pa, Jus­tin Mic­he­al Mil­ler) was fo­un­ded in 2009. It­s de­but EP “Por­ce­la­in,” re­le­a­sed in 2011, of­fer­s a dar­k, re­veren­t vi­si­on of new wa­ve, em­bra­cin­g it­s hig­h e­ner­gy whi­le drif­tin­g in­to a ter­ri­tory of dre­am­s an­d hal­f-lig­ht. The qu­ar­tet is set to re­le­a­se it­s se­con­d EP, “Pe­ru,” this sprin­g.</p></div>

Pay attention to the css applied to the "p" element.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.