How to circle around text in a HTML document?

Question

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:

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.

Answer 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/