?
Solved

Displayin Unicode chars in html

Posted on 2012-08-22
14
Medium Priority
?
370 Views
Last Modified: 2012-08-28
I'm trying to display a "Windings 2" char on a web page.  From everything that I've read this has to be done in Unicode; however, I'm not sure of the syntax.

What I have right now is (it's a one in a circle):
<p style="margin-bottom: 0px;">
          <font face="Windings 2">i</font>
</p>

I understand this is incorrect.  What's the correct syntax?
0
Comment
Question by:breeze351
  • 8
  • 3
  • 2
  • +1
14 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 38322392
Unicode looks like this
&#x00A9;

and thats all you need to use.
What character are you wanting?
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38322432
There are multiple ways to do this.  First I think you re talking about @fontface.
<style>
@font-face { font-family: somefont; src: url('somefont.otf'); } 
@font-face { font-family: otherfont; src: url('otherfont.ttf'); } 

.somefont { font-family: somefont, sans-serif; }


</style>
<P class="somefont">i</p>
I am using a special font and you can see the circle <span class="somefont">i</span>

Open in new window


The problem with the above is you need to load the font to the server and also have the rights to do so.  If it is open source or you paid for it you are good.

I think a better option would be to use html entities or ascii characters.

http://www.unicode.org/charts/ and you can use your php code to call the entity.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38322436
<span style="font-family:wingdings 2">i</span>

Won't work if they don't have the font though....
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38322498
Using @fontface you just need to look at compatibility http://webfonts.info/browser-support-overview and load multiple versions.  

The wingding thing is pc and mac have dingbats.  

The real issue is you could be loading another 150k file just for one small item.  That's why I think using the ascii character might be bet best.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38322525
Or even easier just use a sprite and move it as needed since that image/s is not in ASCII
0
 
LVL 58

Expert Comment

by:Gary
ID: 38322538
Just checked and wingdings are copyright Microsoft so you cannot use them if it involves uploading them to the server which even as image would be included.
0
 

Author Comment

by:breeze351
ID: 38323067
The first reply. You stated that this is the code for Unicode:

&#x00A9;

I assume that "00A9" is the decimal value?

Then all I would have to do is change this:

<p style="margin-bottom: 0px;">
          <font face="Windings 2">i</font>
</p>

To this:

<p style="margin-bottom: 0px;">
          &#x9312;
</p>
0
 
LVL 58

Expert Comment

by:Gary
ID: 38325473
Just try my second solution, but be aware this will only work for Windows pc's as they are the only ones to have wingdings has padas has pointed out.
0
 

Author Comment

by:breeze351
ID: 38326001
Okay.  All i want to do is display a number with a circle around it.  I don't want to be bothered with what operating system it's going to.

What's the easiest way to do this?
0
 
LVL 58

Expert Comment

by:Gary
ID: 38326259
Use the attached image and just adjust the position for each number
e.g.

<style>
.num {
width:20px;
height:20px;
}
.num0 {
background:url('numbers.jpg') 0 0;
}
.num1 {
background:url('numbers.jpg') 0 -21px;
}
.num2 {
background:url('numbers.jpg') 0 -41px;
}
.num3 {
background:url('numbers.jpg') 0 -62px;
}
.num4 {
background:url('numbers.jpg') 0 -82px;
}
.num5 {
background:url('numbers.jpg') 0 -103px;
}
.num6 {
background:url('numbers.jpg') 0 -123px;
}
.num7 {
background:url('numbers.jpg') 0 -144px;
}
.num8 {
background:url('numbers.jpg') 0 -164px;
}
.num9 {
background:url('numbers.jpg') 0 -185px;
}
</style>
<p class="num num0"></p>
<p class="num num1"></p>
<p class="num num2"></p>
<p class="num num3"></p>
<p class="num num4"></p>
<p class="num num5"></p>
<p class="num num6"></p>
<p class="num num7"></p>
<p class="num num8"></p>
<p class="num num9"></p>
numbers.jpg
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38326261
Very easy.... here is a list of ascii characters.  http://nwmtwd.com/misc_character_sets.html

You could use &#9461; for 1 and &#9462; for 2 etc..

Here it is live action...
0
 
LVL 58

Expert Comment

by:Gary
ID: 38326289
They look really bad in IE and Chrome, Firefox look fine tho
0
 
LVL 58

Expert Comment

by:Gary
ID: 38326328
Or even simpler with attached image
<style>
.num {
width:20px;
height:21px;
text-align:center;
font-weight:bold;

font-size:15px
}
.num {
background:url('number.jpg');
}

</style>
<p class="num">0</p>
<p class="num">1</p>
<p class="num">2</p>
<p class="num">3</p>
<p class="num">4</p>
<p class="num">5</p>
<p class="num">6</p>
<p class="num">7</p>
<p class="num">8</p>
<p class="num">9</p>
number.jpg
0
 
LVL 111

Accepted Solution

by:
Ray Paseur earned 2000 total points
ID: 38330921
Please see: http://www.alanwood.net/demos/wingdings.html

Lower case "i" is decimal 105, hex 69.  No unicode is needed.  If you have the font you can render it directly.  It is the symbol for Pisces.  It looks like parentheses back-to-back with a line drawn horizontally through the middle.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses
Course of the Month14 days, 17 hours left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question