Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Font visible regardless of background

Status
Not open for further replies.
Beard36

Beard36

Programmer
Sep 4, 2003
69
GB
I'm trying to find a way to make a text visible regardless of the background image that it is written upon.

The first thing that springs to mind would be, like is possible in MS Publisher, to have a font that has a black outline, filled in with white - so there is always contrast to the background.

Is this possible - I've had a look through Google and can't seem to find what I want. I've come across some sites that look like they could provide two fonts - one for outline, one for fill, which would be fine, but these are all on commercial sites that charge quite a lot to download their fonts. If there was a free alternative that would be great.

On the other hand, am I missing an obvious solution here?

Any guidance would be much appreciated,

Dan.
 
Sort by date Sort by votes
There is no HTML solution to this. And I don't think there is a CSS solution, either. Whatever font you chose, it will have to reside on every user's computer in order for it to be rendered on the page. I understand that there is a way to embed a font in a page but I don't think that's the solution you really want. You'll be better off by using a font, and font color, that is easy to read. Font specifications line san serif and sans will always be available on everyone's PC.

There's always a better way. The fun is trying to find it!
 
Upvote 0 Downvote

Why not have 2 DIVs that overlap each other, one with a black font, one with a white font, but both with the same text. The font size for one would be made slightly bigger, which would give a "shadow" or "outline" effect, depending on its placement. This should work in all browsers, I would have thought.

You could also investigate the filters availble in IE - they have some neat ones for doing things like shadows, etc, that you could use if you know that your users will be using IE.

Hope this helps,
Dan
 
Upvote 0 Downvote
One solution is to use layers to produce a dark shadow under light colored text. It's not perfect, but will help make the text readable on most backgrounds.

For an example:
Code: 
<body bgcolor="white">
<div style='position: absolute; left: 11px; top: 11px;'><font color='333333' face='arial'><b>text</b></font></div><br>
<div style='position: absolute; left: 10px; top: 10px;'><font color='FFCCCC' face='arial'><b>text</b></font></div><br>
</body>

This is just a quick example. Adjust the positions to move the text where you want it and have the shadow (first div so that it is underneath) a pixel or two different.

 
Upvote 0 Downvote
I'm not so sure about the idea of the two font sizes - I did think about this but didn't try it out. My concern would be that the longer the text the more the size difference would cause spacing problems (the "shadow" wouldn't always align with the text).

However, the div filter idea has worked out great for me. I'm actually using this in the context of an active desktop (so I know that it will only be running on IE) which has its own set of icons against whatever background image the user selected, so I couldn't really just pick a colour and hope that it would be visible.

Using the glow filter has worked a charm (white text, black "glow").

Thanks for the input, both of you!

:)
 
Upvote 0 Downvote
Oop - someone posted a reply between me reading the top two and posting my own! I think for now I'll stick with the filter effect (the IE limitation not being a problem in this case, otherwise I would have to look into further solutions).

But anyway, thanks for your input all THREE or you ;)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
826
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
791
3esolar
3
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
155
CoolBreeze007
CoolBreeze007
kurio71
  • Locked
  • Question
Centre a DIV Regardless of Screen Size 2
Replies
7
Views
243
ChrisHirst
ChrisHirst
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
258
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top