/    Sign up×
Community /Pin to ProfileBookmark

changing font of certain letters

Copy linkTweet thisAlerts:
Sep 30.2008

Is there anyway to change the font of a particular letter in a web page with a lot of text without tagging each of the letters?

For example, if I have a web page displaying a lot of text that has over 5000 character ‘e’ and I want every letter ‘e’ to be blue. Is there a way to do that without resorting to putting every ‘e’ in a <.p font=”….> tag or whatever css tag.

I’ve tried putting them all in a tag, but it ends up crashing the browser when you have that many elements (>10,000) in a page.

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@rnd_meSep 30.2008 — the best you could do is tag only the ones you want to change.

then again, 10,000 chars on the screen at once makes for some tiny text! (hint hint)

5000 < 10,000
Copy linkTweet thisAlerts:
@FourCourtJesterSep 30.2008 — Encapsulate your page in a container (div for example), and when the body loads, call a function that will getElementbyId("container") and then loop over that container.text, finding the letter 'e' and inject <font color="whatever">e</font>.

its a costly procedure, but should do what you want it to.
Copy linkTweet thisAlerts:
@rnd_meSep 30.2008 — you could create a stationary div with fixed, known sizes, opaque background, almost fullscreen.

you split the text into an array.

you design custom page up / page down buttons, or use a slider.

when page down is clicked (or whatever), 20-40 rows are sliced from the array;

r.slice(pageNum * rows, (pageNum * rows) + rows);

the 3-10kb (depending on font size) of plucked lines are joined and colorized before they replace the .innerHTML of said div.

you never need to tagify anything off screen. you kill the old tags this way as well so performance should be quite good.
Copy linkTweet thisAlerts:
@daemonkauthorOct 01.2008 — you could create a stationary div with fixed, known sizes, opaque background, almost fullscreen.

you split the text into an array.

you design custom page up / page down buttons, or use a slider.

when page down is clicked (or whatever), 20-40 rows are sliced from the array;

r.slice(pageNum * rows, (pageNum * rows) + rows);

the 3-10kb (depending on font size) of plucked lines are joined and colorized before they replace the .innerHTML of said div.

you never need to tagify anything off screen. you kill the old tags this way as well so performance should be quite good.[/QUOTE]

ahh...I see. I guess I can also just use the .scrollTop property to get the scroll offset and height/width of the div to calculate how much of the text is being shown. I only need this to work with firefox anyways.

The only problem would be if it will create the divs fast enough for a smooth scroll. Thanks, I'll try that out.
Copy linkTweet thisAlerts:
@rnd_meOct 01.2008 — ahh...I see. I guess I can also just use the .scrollTop property to get the scroll offset and height/width of the div to calculate how much of the text is being shown. I only need this to work with firefox anyways.

The only problem would be if it will create the divs fast enough for a smooth scroll. Thanks, I'll try that out.[/QUOTE]


don't worry as much about calculating visable text. find the browser dimensions in pixels. use that * 0.8 to calculate the desired area.

absolutely position the div at pixel coordinates, and set overflow to "hidden";

if it doesn't fit, it gets clipped the same amount all the time, so the user wouldn't know if you were a little off vertically.

you don't wan't a browser scrollbar on the div, no offsets, etc. you need buttons to "scroll" the text by sliding the array slice up and down a few lines or a whole page, and re-writing the .innerHTML.




perhaps you could improve the performance by using whole paging, or a few lines at a time.

if you created a secondary array, you could decode each line in background using a setTimeout to buffer a couple pages worth of lines.

the second array would have the same text as the first, but styled with the html.

in your styling script, you can set your actual line of text to be drawn from the secondary array if available. if it's not, the loop/function continues, styling the text, placing it in the secondary array for next time, and displaying it.

this would let your background renderer work completely independent of the user interface code.

also this way you never have to repeat any intensive operations.

javascript can use lots of ram in variables without much issue.

it's the dom tree that kills you.
×

Success!

Help @daemonk spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...