Tips for showcasing boxed numerical characters on a website

Currently, I am tackling a project that involves converting a PDF into HTML. The original .ai file shows some numeric characters inside a box:

https://i.sstatic.net/dAMU2.png

Even though I am aware that the font used in the file is GothicMB101Pro DeBold-83pv-RKSJ-H, unfortunately, I do not have access to the font file on my computer (and naturally, the original designer is no longer available). In Adobe Illustrator, it is displayed like this:

https://i.sstatic.net/9B18s.png

The character in part 1) is actually one single character - not "1" and ")", so I can rule out any issues with kerning but rather suspect it is a unicode character. However, after conducting multiple searches, I could not find an exact match. The enclosed numeric characters ① are also different.

Due to my uncertainty about which character it is, as well as my limited knowledge of Japanese (which appears to be a common theme in this particular case), I am unable to meet the requirements of my client.

Does anyone know what these characters are and how I can display them correctly on screen?

cssfontswebfontsadobe-illustrator

Answer №1

My assumption is that the text you are currently viewing, without the original font present, is made up of two characters. The first character is likely a standard one (such as the number 1), while the second character appears to be a combining character. Specifically, there exists a combining enclosing square character that resembles a closing parenthesis ")" in the final output. In my own experience, using the number 1 along with the enclosing square character within the StackOverflow answer editor produced the desired outcome:

1⃞

If your current font fails to display the enclosing square character correctly, it is possible that the issue lies with the font being used as a substitute. Without knowledge of the specific font being utilized as a replacement, resolving this problem may prove challenging.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to target the following element with CSS that has a specified class name

Would it be possible to achieve this using CSS alone, or would I need to resort to jQuery? This is how my code currently looks: <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr class="some-class">...</tr> // My g ...

jquerycssselector

Tips for including space at the beginning and end of a dynamically created table cell

My table is dynamically generated with contents drawn from a database, creating rows based on the data. Each cell has a rounded border and 2px padding for consistency. I want all cells to appear evenly spaced and padded vertically, but I'm facing an ...

csshtml-tablecellpadding

Implementing CSS styling within a JavaScript file

I have a vague memory of an easy way to incorporate CSS code within a JS file, but I can't recall the specific details. Simply inserting CSS code into a JS file doesn't seem to work, so there may be a need for comments or some other method. *No ...

javascripthtmlcss

unable to apply custom css to primefaces components

In my Java EE application, I am using a ready-made template with CSS and jQuery. All the PrimeFaces components are rendering properly except for the panelGrid control of PrimeFaces 3.2. It is being displayed with a border, but I want it without a border. I ...

javacssjsfprimefaces

relocating the input field underneath the button

I need help figuring out how to arrange this. Here's an example link: http://jsfiddle.net/VBS4E/25/ Is there a way to position the input field directly below the button? Like this: ________ __________ __________ | Btn#1 | | Btn#2 | | Btn# ...

htmlcss

CSS styles are not being displayed on elements that have been dynamically added using jQuery

I have searched through similar questions, but none of them addressed my issue. (they all seemed to be related to typos) This is just for fun. I am trying to create a table using jQuery based on JSON data. The problem is that the appended table rows do no ...

jqueryhtmlcss

What is the best way to eliminate the gap between inline-block elements?

I'm trying to make two inline-block divs with width: 50% each fit on one line. <div class="inline">Left one</div> <div class="inline">Right one</div> I know a practical solution, but I also want my code to look nice. <div ...

htmlcss

increasing sticky header, refreshes the scroll location of the website

My website has a fixed header that expands to reveal more content when a button is clicked. However, I noticed that if the page has been scrolled down before clicking the button, the scroll position resets to the top of the page. To see this issue in acti ...

jquerycss

Troubleshooting problem with Angular Materials' md-datepicker not displaying correctly in wide browser windows

While using the md-datepicker component in my application, I noticed that it does not display properly on larger browser widths. It only seems to work as expected on small and x-small viewports. Please refer to the attached screenshot for reference. This ...

javascriptcssangularjsdatepickerangular-material

How to conditionally set the active class in a React component

I am new to using React and I am encountering some issues. My goal is to add an active class when any of these components are opened. I have attempted a solution but it isn't working as expected. I need assistance in adding a background color to the d ...

javascriptcssreactjs

Arrange the child divs on top of the parent div

<div id="1"> <div id="2"> </div> </div> It is proving challenging to position div2 above div1 in the vertical dimension. Applying a negative top position does not have the desired effect, as it appears that the top border of the ...

htmlcsscss-position

Tips for positioning a Div element in the center of a page with a full-page background

I am trying to center align my div containing login information on the webpage. The static values seem to work fine, but I am looking for a way to position it dynamically. Additionally, the background is only covering a strip with the height of the div... ...

htmlcss

Is it necessary to define all presentational images in CSS?

Lately, I've been diving into the world of (X)HTML & CSS and have come to understand that HTML is meant for structure while CSS is used for presentation. It makes me wonder if a significant portion of images on websites are more about enhancing p ...

htmlcss

Target the last element of a specified type in CSS without selecting any of its sub

I have a main element with nested children, some of which share a common CSS class. My goal is to select the last child of the main element without selecting the last sub-child as well. I have attempted two methods so far: Using :last-child .some-cl ...

htmlcss

What is the best way to utilize nav and main-nav in CSS?

Working with HTML and CSS <nav class="nav main-nav"> </nav> Styling with CSS main-nav li{ Padding:0 5% } I am a beginner in HTML and CSS and facing an issue. I noticed that when using main-nav in CSS, I'm not getting the de ...

htmlcssclass

Is it possible for me to utilize a type of CSS variables?

Looking to organize all the CSS code on my website in a specific manner. I want to define the type with details such as size, weight, and color. For example: <h1 bold blue>Hello world</h1 blue bold> So essentially, the CSS file will include: ...

htmlcss

What fate befalls CSS rules left untouched?

Within my style.css file, I have applied rules to almost every component on the website. However, there are exceptions such as the main template and sections displaying requested pages which may contain unique parts not found in other pages, utilizing the ...

htmlcssoptimization

How to effectively combine css() and delay() in jQuery?

fid: https://jsfiddle.net/k13sazuz/ Is there a way to create a delay chain for CSS rules using jQuery? $('.two').css('background','blue').delay(11800).css('background','red'); ...

javascriptjqueryhtmlcss

Activate Input by Clicking on Label in Internet Explorer version 8

I am trying to implement a widget in JQuery colorbox that allows users to load files. My approach involves using an input tag with type='file' and styling it with visibility:hidden. Additionally, I have created two labels that are styled like but ...

javascriptjqueryhtmlcssinternet-explorer-8