2

I'd like to put

  1. a circle or
  2. a broken circle (like if I were to draw a circle freehand without completely closing it) or
  3. a square, or
  4. brackets

i.e.

 non-bracketed text. non-bracketed text. non-bracketed text. non- +- bracketed text. Bracketed text -+ | that can span several lines and | +- more. non-bracketed text. non- -+ bracketed text. non-bracketed text.

I saw this: Easier way to create circle div than using an image? but text is in the top left hand corner if I were to draw a circle around it, which isn't what I want.

I saw this: css: how to draw circle with text in middle? but text is centred and I want the circle to go around the text, not move the text to be within the circle.

CLARIFICATION

The text is already aligned and I do not want it to be realigned so that the circle will go around it. The circle must move to compensate for the text, NOT the other way around.

Also, I need to be able to switch between the 4 different circles fairly easily. Preferable by just changing the class of the tag.

Here is a sample as to what I'm looking for:

sample

Question:

Can I please get people to vote this open so it can get this post off hold? This is quite specific and I would challenge anyone to say why it is not.

Answer:

With the help of dcclassics, asking of more questions and doing more searching, I've got a solution.

http://jsfiddle.net/adrianh/4SVHH/7/

function getCanvas(i, left, top, width, height) { var canvas; var circles = document.getElementById("circles"); if (typeof circles.childNodes[i] != 'undefined') { canvas = circles.childNodes[i]; canvas.width=width; canvas.height=height; canvas.style.left=left+"px"; canvas.style.top=top+"px"; } else { canvas = "<canvas "+ "width='"+width+"' "+ "height='"+height+"' "+ "style='"+ "position:absolute;"+ "z-index:0;"+ "left:"+left+"px;"+ "top:"+top+"px;"+ "pointer-events:none;"+ //"border:1px solid;"+ "' />"; circles.insertAdjacentHTML('beforeend', canvas); } return circles.childNodes[i]; } function circleRect(i, rect) { var diameter = Math.sqrt(rect.width*rect.width+rect.height*rect.height); var cx = (rect.right + rect.left)/2; var cy = (rect.top + rect.bottom)/2; var left = Math.floor(cx - diameter/2); var top = Math.floor(cy - diameter/2); diameter = Math.floor(diameter); var canvas = getCanvas(i, left-1, top-1, diameter+2, diameter+2); var ctx=canvas.getContext("2d"); ctx.beginPath(); ctx.arc(diameter/2+1,diameter/2+1,diameter/2,0,2*Math.PI); ctx.lineWidth=2; ctx.strokeStyle = "red"; ctx.stroke(); } function rectRect(i, rect) { var canvas = getCanvas(i, rect.left-1, rect.top-1, rect.width+2, rect.height+2); var ctx=canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(1, 1); ctx.lineTo(rect.width+1, 1); ctx.lineTo(rect.width+1, rect.height+1); ctx.lineTo(1, rect.height+1); ctx.lineTo(1, 1); ctx.strokeStyle = "red"; ctx.lineWidth=2; ctx.stroke(); } function drawCircles() { $(".circled").each(function(i, obj) { var rect = obj.getBoundingClientRect(); if (/\brect\b/.test(obj.className)) { rectRect(i, rect); } else { circleRect(i, rect); } }); } document.body.insertAdjacentHTML('afterbegin', '<div id="circles"></div>'); drawCircles(); window.onresize=drawCircles;

The solution presented shows only a circle and a rectangle, but this can be modified to be used for any type of circling method that I asked for. This doesn't use a svg file, but uses a canvas instead. This may limit it to more recent browsers, but that isn't a problem for me.

Improve this question
15
  • 2
    Is there a question here? Commented May 16, 2014 at 20:01
  • 1
    Use an image. Scale it if necessary. Commented May 16, 2014 at 20:03
  • @j08691 Yes, how would I circle around text in an HTML document. Commented May 16, 2014 at 20:03
  • @Ruud, using CSS or an image (which I guess you mean by using it as a background?) this wouldn't work if this were a circle/oval. I don't see how I would get it to work if the text is to remain within the circle. Could you expand please? Commented May 16, 2014 at 20:06
  • 3
    The question is too broad because you want someone to code up the entire solution for you. Do some work, get stuck (or not!) and then we can help you work out the kinks. But, at first glance, keypaul's svg suggestion is probably the most flexible. Ruud's image suggestion is the easiest. A css solution is likely to be limited, I don't know how you'd do a broken circle that way at all, and brackets would be kind of hacky. Commented May 16, 2014 at 21:43

1 Answer 1

Reset to default
1

Here is a jsFiddle of a circle around text. 

<div class="circle">Circle</div> .circle { border-radius: 50%; width: 100px; height: 100px; border: 1px solid black; text-align: center; display: table-cell; vertical-align: middle; }

http://jsfiddle.net/V9Gn5/ shows an elipse, not a circle, around some text, but without moving the text.

Edit: Here's as close as I could get right now, if someone else would like to play around with it. http://jsfiddle.net/V9Gn5/19/

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

13 Comments

Now change text-align to left and vertical-align to top and see what you get. That is what I don't want, which is what I said in the 3rd paragraph.
@Adrian, so let's say the text is at the exact upper left corner of your document. How would you expect the circle to look?
@andi With the text bounding box inscribed within the circle.
but then the circle wouldn't even fit on the page - you would expect the circle to be chopped off at the top left?
Svg i think works for you, cause you can use it as image, also scaling, stretching without loose quality. You can use it as background of your text ( like the fiddle in my previous comment)
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.