How to create a new web character symbol recognizable by html/javascript?

Question

How to create a new web character symbol recognizable by html/javascript?

4.1k views Asked by john206 At 23 November 2024 at 09:37

I have checked many questions here but none has my answer. I appreciate if you direct me to the right path.

I like to make a new symbol (not a font or related to any alphabet) like creating a new language alphabets that could be recognized or translated in a browser in form of html or javascript code.

In other words, assigning single custom character for multiple characters.(e.x 1 ch translates into 5 ch)

I assume I need to make the font first and then assign that character. What programs do you suggest or what is the best approach?

Edit: A better example: Make a new character like ¢ (cent) that has entity name --> & c e n t; and entity number --> & # 1 6 2;

Edit 2: Thank you all for your replies. I'm trying to check your links and suggestions.As I understand, there might be an issue of browser compatibility. So how about make new symbols in a text file saved on server and when the user views the file, javascript converts those symbols into a word or other standard characters?

Edit3: Sorry for any confusion guys, you are all awesome. This example might clear things.

make a new symbol that assigns to "AB". So one character that translates into two characters?

Edit4: This is based on Jared answer. This does work for Z and P. Now how should I add my custom font to this file (replace Z and P with my own)? Assuming Z and P are my custom made symbols

 <!DOCTYPE html
 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
 [
  <!ENTITY Z "AB">
 <!ENTITY P "DE">
   ...

  ]>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<title>Extending XHTML - Example 1</title>
 </head>
  <body>
   <p>My symbols are &Z; and &P;</p>
  </body>
</html>

Original Q&A

There are 3 answers

DACrosby On 16 June 2012 at 03:57

If you're using standard characters (a-Z, A-Z, 0-9, !, @, #, $, etc), ,you could make a PHP variable that has the translation as the page is being rendered (JavaScript is after the page is rendered/downloaded).

<?php
  $from = "A";
  $into = "ABCD";
  $content = "This is A whole lot of page content";

  echo preg_replace("$from, $into, $content);
 // will output "This is ABCD whole lot of page content"
?>

Could work with special fonts too, i'd imagine, or even swapping $from into <img src=pic/of/chars.png" />.

austincheney On 16 June 2012 at 01:24

You have to use the SGML Entity declaration to create a new character entity. This should work in all languages that inherit from SGML including HTML and XML, but I would be sure to test this in all supported user agents just to be sure.

http://en.wikipedia.org/wiki/XML_entity

**Jared Farrish** · Accepted Answer · 2012-06-16 01:28:11

This may be an option for you, I'm not quite sure. Pretty much, if you use XHTML and/or XLST, you could possibly achieve what you're looking for in custom-defined characters. For example:

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
  <!ENTITY mailto "mailto:">
  <!ENTITY username "gabriel">
  <!ENTITY arobase "@">
  <!ENTITY hostname "gabsoftware">
  <!ENTITY tld ".com">
  <!ENTITY email "&username;&arobase;&hostname;&tld;">
]>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Extending XHTML - Example 1</title>
  </head>
  <body>
    <p>My email is &email;</p>
  </body>
</html>

http://jfcoder.com/test/entities.xhtml

You'll see the SGML ENTITY element, which by the way I believe HTML5 is no longer going to belong to anymore. Whether or not you can embed an image in those entities or through an XLST transformation to achieve your goal I haven't figured out yet.

For many more examples and options, see this page:

Extending XHTML with XML, XSLT, entities, CDATA sections and JavaScript

TechQA.

How to create a new web character symbol recognizable by html/javascript?

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CHARACTER

Related Questions in SYMBOLS

Popular Questions

Popular Tags

Trending Questions