4

I keep finding sites talking about CSS-Shapes; where the idea is that instead of rectangular I can use CSS to create texts that take a number of shapes such as circular. But the websites I find, have codes that do not work. And then when I look at their own source code (since they have the examples on their very website), it turns out all the examples they have are images -- as opposed to real code. So I am asking here. Is this CSS-Shape real yet? I want to render a text inside a semi-circle. That's how I discover about CSS-Shapes.

jbutler483
  • 24,074
  • 9
  • 92
  • 145
Katedral Pillon
  • 14,534
  • 25
  • 99
  • 199
  • 3
    Only experimentally. http://caniuse.com/#feat=css-shapes – Jeremy Dec 27 '14 at 21:29
  • Just keep an eye on specs: http://dev.w3.org/csswg/css-shapes/ – Salman A Dec 27 '14 at 21:58
  • 2
    I don't think this question is too broad. It's a specific question about if CSS shapes are supported by browsers yet. Any possible solutions to get the same outcome is not really part of the question. It's nice to have in the answer, but it's not required here. Nominated for reopening – Joeytje50 Dec 27 '14 at 22:03
  • If this is a "how do I flow text in a circle shape" question then there are duplicates such as http://stackoverflow.com/questions/16982545/paragraph-of-text-in-circle-using-css – Salman A Dec 27 '14 at 22:09

2 Answers2

2

Yes and no. 'Real' CSS shapes are not supported by a wide range of browsers yet.

See http://caniuse.com/#feat=css-shapes

But a circle can also be made by adding rounded corners to an element, which is supported by all major browsers, including IE9.

See: http://caniuse.com/#feat=border-radius

So unless you need this to work in IE8 too, you can add text in a circle in pure CSS. And for IE8, the text will show just as well, only in a square or rectangle instead of a circle, so that might be an acceptable fallback for you.

You didn't name a specific website, but quite often, websites about web development will have articles about new features which may not (or not widely) be supported yet, which is also why they can have images to show what it will look like once it becomes available.

As Niet the Dark Absol pointed out in the comments, the border-radius solution doesn't actually wrap the text in a circle. The text will behave as if the element is still rectangular. If you need to make the text follow the circle shape, and need support for the current generation of browsers, you will need the help of JavaScript. The TextMorph library seems to do the trick. I just googled it, so I don't have experience with it, but it looks promesing.

GolezTrol
  • 114,394
  • 18
  • 182
  • 210
  • `border-radius` will not wrap the text to the circle, though. – Niet the Dark Absol Dec 27 '14 at 21:40
  • @NiettheDarkAbsol True, I missed that requirement. I don't think there is a real CSS solution for that that can be used today. So in that case the actual answer to the question will be "No", but I'll keep the current answer for context. ;) – GolezTrol Dec 27 '14 at 21:42
  • Indeed, I am presently using `border-radius` and it does not work. – Katedral Pillon Dec 27 '14 at 21:47
  • 1
    I am looking into TextMorph. But the thing is Chrome does not support it. Does anyone know how I might get it to work with Chrome? – Katedral Pillon Dec 27 '14 at 21:52
  • 1
    @KatedralPillon ~ it seems the reason the TextMorph demos fail in Chrome is because the script is sourced from a server sending it as text/plain -- which is triggering a console error in Chrome (and preventing the scripts from being evaluated). `Resource interpreted as Script but transferred with MIME type text/plain: "https://raw.githubusercontent.com/nicodmf/TextMorph/master/Source/jquery.TextMorph.js".` As far as I understand it this library should otherwise be cross browser, so should work if you download and use it correctly. – Pebbl Dec 27 '14 at 22:48
0

To create a semicircle you can create a <div> element and style it with border radius, something like this:

#semicircle {
    width: 200px;
    height: 100px;
    border-radius: 100px 100px 0 0;
    background: green;
}

Then if you want to put some text in it you can just insert a <span> inside it, so the HTML will look like this:

<div id="semicircle">
     <span>Some text</span>
</div>

and then style the text to position it where you want inside the parent <div>.

Marco Bonelli
  • 63,369
  • 21
  • 118
  • 128