The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Character Conversion
denmarks
post Feb 22 2016, 08:41 PM
Post #1


Advanced Member
****

Group: Members
Posts: 207
Joined: 17-January 08
Member No.: 4,734



I am trying to write a Javascript that will convert letters that are entered into bold Unicode characters.
These are the characters. 𝗔 𝗕 𝗖 𝗗 𝗘 𝗙 𝗚𝗛 𝗜 𝗝 𝗞 𝗟 𝗠 𝗡 𝗢 𝗣 𝗤 𝗥 𝗦 𝗧 𝗨 𝗩 𝗪 𝗫 𝗬 𝗭
They start at Unicode 1D5D4. You can see them on my Unicode page. http://dmmarks.com/UnicodeChars.html

I am using an existing webpage that I have had for years. I made a modification to include bold as the last item.
http://dmmarks.com/upsidedown.html

Type the lowercase alphabet in sequence and watch the bottom output and you will see the problem I am having. It is easier to see than explain. What is the solution?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 23 2016, 08:40 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(denmarks @ Feb 23 2016, 02:41 AM) *

I am trying to write a Javascript that will convert letters that are entered into bold Unicode characters.
These are the characters. 𝗔 𝗕 𝗖 𝗗 𝗘 𝗙 𝗚𝗛 𝗜 𝗝 𝗞 𝗟 𝗠 𝗡 𝗢 𝗣 𝗤 𝗥 𝗦 𝗧 𝗨 𝗩 𝗪 𝗫 𝗬 𝗭
They start at Unicode 1D5D4. You can see them on my Unicode page. http://dmmarks.com/UnicodeChars.html

Firefox can display the above, but not my Chrome-based browser.

QUOTE
I am using an existing webpage that I have had for years. I made a modification to include bold as the last item.
http://dmmarks.com/upsidedown.html

Type the lowercase alphabet in sequence and watch the bottom output and you will see the problem I am having. It is easier to see than explain. What is the solution?

Again Firefox displays them (buggily), but for some reason with a lot of extra vertical space.

Maybe browser support is still too poor. unsure.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
denmarks
post Feb 23 2016, 09:39 AM
Post #3


Advanced Member
****

Group: Members
Posts: 207
Joined: 17-January 08
Member No.: 4,734



Problem solved. The Unicode characters actually occupy 2 positions in the string. I have to concatenate them in the output. Note: The test page is now gone.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 23 2016, 03:27 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



I'm intrigued. Could you explain that a bit more?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
denmarks
post Feb 23 2016, 03:38 PM
Post #5


Advanced Member
****

Group: Members
Posts: 207
Joined: 17-January 08
Member No.: 4,734



QUOTE(Christian J @ Feb 23 2016, 12:27 PM) *

I'm intrigued. Could you explain that a bit more?


You can see my finished program at http://www.dmmarks.com/bold.html

I have the Unicode characters in a string but for some reason I have to assume that each character takes two spaces and I must concatenate them. I have no explanation other than the Javascript sees each character in that code range as taking 2 positions.

𝗧𝗵𝗶𝘀 𝗶𝘀 𝘁𝗵𝗲 𝗿𝗲𝘀𝘂𝗹𝘁 𝗼𝗳 𝗺𝘆 𝗽𝗿𝗼𝗴𝗿𝗮𝗺

It will currently only work with upper and lower case letters, number, and space. It is very basic since I use it in the Firefox sidebar.

This post has been edited by denmarks: Feb 23 2016, 03:44 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 23 2016, 06:10 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



What caused the vertical space then, the whitespace between each character pair?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
denmarks
post Feb 23 2016, 06:23 PM
Post #7


Advanced Member
****

Group: Members
Posts: 207
Joined: 17-January 08
Member No.: 4,734



QUOTE(Christian J @ Feb 23 2016, 03:10 PM) *

What caused the vertical space then, the whitespace between each character pair?


I am not sure what you are referring to. I purposely added a space between characters in my original question for readability. There is no space in the program output.

𝗮𝗯𝗰𝗱𝗲𝗳𝗴𝗵𝗶𝗷𝗸𝗹𝗺𝗻𝗼𝗽𝗾𝗿𝘀𝘁
𝘂𝘃𝘄𝘅𝘆𝘇

If you are referring to the program there is no space there either.

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 23 2016, 07:41 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Seems the problem persists on http://www.dmmarks.com/bold.html --when I try it with Firefox38, the bold text has so much space above that a vertical scrollbar appears in the textarea, scrolling the text down out of view. I must scroll down to actually see it.

Here's a screenshot with the textarea scrolled down and the bold text highlighted:

Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
denmarks
post Feb 23 2016, 08:02 PM
Post #9


Advanced Member
****

Group: Members
Posts: 207
Joined: 17-January 08
Member No.: 4,734



That is strange. I am not an html expert but you must have something set differently than me. It makes the letter space taller. I seem to remember seeing other tall characters years ago and had to change the code to allow for it on my Unicode page.
𝗗𝗼𝗲𝘀 𝗶𝘁 𝗵𝗮𝗽𝗽𝗲𝗻 𝘄𝗵𝗲𝗻 𝘆𝗼𝘂 𝗰𝗼𝗽𝘆 𝗮𝗻𝗱 𝗽𝗮𝘀𝘁𝗲

I am using Firefox 44 with no problem. See attachment. You can drag the indicated corner to make the field larger.
IPB Image

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 05:46 AM