homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

accessibility css Code to Highlight Numbers Only for E.g : 1234567890
accessibility css Code

 5:18 pm on Jul 17, 2014 (gmt 0)


can any one Provide accessibility css Code to Highlight Numbers (Digits 0-9)which can be used in accessibility option in Internet option.

it will help me to check Numbers (0-9) in any Html page

Please Help .

Thank you in advance.



 5:58 pm on Jul 17, 2014 (gmt 0)

Can't be done in CSS alone. You might be able to do it in javascript. And if you've got dynamically generated pages you can easily code your php-or-equivalent to wrap all numerals in a supplementary <span>.

But to find the best solution, you'd need to explain where the numbers occur. Are we talking about ordinary body text, or about forms? And are you looking for
-- something for your users viewing your pages
-- something for yourself as editor
-- a third-party plugin that you could use when looking at other people's pages
-- some other option that I haven't thought of


 3:46 am on Jul 19, 2014 (gmt 0)


Thank you for your reply.

My issue is i have many html pages which include text data, in which i need only Numbers to be extracted. so need some code which can highlight only number in Html . please note that i cant edit html page so something like Accessibility CSS code. i am trying.

Please guide me in this.


 4:23 pm on Jul 21, 2014 (gmt 0)

Please guide me in this.

or provide alternate solution.


 4:44 pm on Jul 21, 2014 (gmt 0)

If you can't edit the html page, you would need to look at the source code as a text file to extract only numbers. A good text editor lets you apply regex filters to extract patterns such as numbers. I don't know any way to extract numbers via a browser with css because css is for styling elements and numbers are pretty much the same as text as far as styling goes unless the numbers you need are in a specific element by themselves. You may find accessibility information at specific browsers' developers documents.


 7:02 pm on Jul 21, 2014 (gmt 0)

Thank you for reply.

Please let me know any other way to Highlight or under line only Numbers (I.e digits )in Html page.

please let me know any fonts where Numbers is Underline. so i can identify the numbers in my html page.


 8:42 pm on Jul 21, 2014 (gmt 0)

Please let me know any fonts where Numbers is Underline

There aren't any. There may be fonts where all characters are underlined, or all alphanumerics. Other than that, the only place I know of where underlining is font-optional is in the ordinals ª and º.

i have many html pages which include text data, in which i need only Numbers to be extracted

What exactly do you mean by "I have"? Are they pages on your own site? Is it hand-rolled html, or generated by php-or-similar?

There is no CSS declaration that will apply a given style to a specified character or range of characters. Maybe in CSS4 there will be, but I don't suppose the question can wait that long.

[edited by: engine at 6:44 pm (utc) on Jul 22, 2014]
[edit reason] fixed typo [/edit]


 4:09 pm on Jul 22, 2014 (gmt 0)

Thank you for help.

the Html page i grab from server i want to highlight the numbers(0-9) data from that web page.

and about Font , is it possible to edit the font and make numbers character Underline.

Please guide me if possible.


 4:28 pm on Jul 22, 2014 (gmt 0)

Hi advanoop, you might get more useful help here if you could address some of the questions people have asked you about the pages you want to edit. It help us to know what your options are so that you can get relevant suggestions. Asking the same thing without responding doesn't change any of the information people have -to be able to offer better suggestions.

You could create your own font, but it is not a simple task and requires multiple disciplines that could take years to master. If you have "grabbed" a copy of the html page, look for a text editor that can strip the html and give you regex or grep search capabilities.

For a Windows machine, try PSPad (Free) or maybe Notepad++ (Free) - but I don't recall what kind of search they have in Notepad++, I know that PSPad gives you a regex search.


 7:57 pm on Jul 22, 2014 (gmt 0)

There may be some JavaScript approaches that might be useful. For example, you run some code via your browser console (or from an extension if you use a browser like Chrome or Firefox) that finds all of the elements that contain numbers and wraps the content within another element, applying some styles. I don't know if that might cause problems, though. For example, if there are any event listeners attached to the element, and then you replace the contents... that might blow away the listener as well.


 8:27 pm on Jul 22, 2014 (gmt 0)

When questions like this come up in the Apache subforum, the answer generally goes something like:
Never mind the code, and never mind what parts work or don't work. Start by explaining in English what you want to achieve. Then we can hammer out the code to make that happen.
So far we haven't got to the "what you want to achieve" part.

i want to highlight the numbers

Applying styling-- whether it's underlining, bigger size, boldface, different font, what have you-- to numerals would have no effect except to make numerals more visible to human eyeballs. But what purpose does that serve? In general when people ask about differentiating some type of text, it's because they then want to do something with the text.

If it's your own pages, it would be trivial to write code like

.numbers {font-size: 200%; font-family: sans-serif; color: red; text-decoration: underline;}
<p><span class = "numbers">4</span> score and <span class = "numbers">7</span> years ago</p>

et cetera,

:: pause to swear at Forums software which inexplicably thinks there's a [ red ] in there, and no it's got nothing to do with my made-up CSS ::

just by running the html through some process that picks out any occurrence of
(I tried to put in more fractions but Forums software, being resolutely 8859-1 or possibly 1252, didn't like them)
and wraps it in the selected style.

You can do it dynamically in javascript, or beforehand with the php-or-equivalent that generates the page, or simply in a text editor if you only need to tweak a few pages of hand-rolled html.


 1:23 am on Jul 25, 2014 (gmt 0)

Hi lucy24,

Exactly you got my point , i want to apply styling which make numbers more visible to human eyeballs by highlighting/underline only numbers.

for e.g the data i have in Html is follow:

In upholding the Illinois law’s constitutionality, the Seventh Circuit relied on Abood, which, in turn, relied on Railway Employes v. Hanson, 351 U. S. 225 , and Machinists v. Street, 367 U. S. 740 . Unlike Abood, those cases involved private-sector collective-bargaining agreements. The Abood Court treated the First Amendment issue as largely settled by Hanson and Street and understood those cases to have upheld agency fees based on the desirability of “labor peace” and the problem of “ ‘free riders[hip].’ ” 431 U. S., 220–222, 224.

In above data i want to highlight/under line only number part.

please guide me in this.


 4:26 am on Jul 25, 2014 (gmt 0)

Do you now have access to the page source? Then you can do just what I said above. The pattern will be something like
(I added a hyphen in the middle because I didn't think of the "123-345" possibility).

Plug into the Regular Expression engine of your choice, as described above, to replace with
<span class = "numbers">$1</span>

You just have to decide how to treat sequences like your example of
220–222, 224

(whoops! didn't realize that's an en dash, not a hyphen)
Should that be one, two or three blocks? If "220–222" is a single unit, is the – coded as a literal en dash character, or as "&ndash;" ?
220–222, 224
220–222, 224
220222, 224

 6:38 pm on Jul 25, 2014 (gmt 0)

I think advanoop wants a way to read web pages and have the
numbers "pop out". I don't think this is about creating content.
Anyway, that's what a re-read of all the above leads me to believe.


 8:11 pm on Jul 25, 2014 (gmt 0)

I think advanoop wants...

Matter of fact I think so too, but we've already established that what he wants is impossible. So all we can do is suggest things that are possible.


 3:35 am on Jul 26, 2014 (gmt 0)

Hi All,

Thank you All for the Reply.

May i be not good in explaining about what i really need from Experts.

Yes its correct that i want my all HTML pages to read as to make numerals more visible.

I have got website where i can download CSS Style sheet which can make text in Different color with different background for all webpage.

Similar like that Style Sheet can anyone provide me code like where its can highlight/underline only Numbers (Digits).

Thank you for your help.


 4:03 am on Jul 26, 2014 (gmt 0)

If you can download the css file, you should be able to download the html or php (or .asp?) file and edit it to make a css answer possible. If evey number on the page is surrounded by element tags, then you can make the numbers be any color you wish using css. As long as the numbers are in with the text, there isn't an edit in css to do that.

Here is an example:
Employes v. Hanson, <span class="numbers">351</span> U. S. <span class="numbers">225</span>

Then in your css you can add
span.numbers {color: red; }

 2:54 pm on Jul 27, 2014 (gmt 0)


Thank you for your help.

i need something which can make every numbers in color .

the text paste above is just example, the actually text may be different with many numbers.

please note that i can just access the page from server , i cant edit the html file.

i add My CSS file in internet option under option accessibility CSS.


 6:13 pm on Jul 27, 2014 (gmt 0)

:: throws in towel ::

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved