f



aligning text and image-text

I use a program to make Email addresses harder for spammers to
harvest. It converts them to slightly blurred images using
http://mindprod.com/products1.html#MASKER

When I embed them in text, I have figured out how to get them to align
naturally with the surrounding text, but the browser inserts extra
inter-line spacing above the line containing the image.

You can see the effect at
http://mindprod.com/book/books.html
at the bottom of the page where it says:

"Please email your feedback for publication, letters to the editor,
errors, omissions, typos, formatting errors, ambiguities, unclear
wording, broken/redirected link reports, suggestions to improve this
page or comments to Roedy Green : xxxxx@mindprod.com. If you want your
message kept confidential, not considered for public posting, please
explicitly specify that."

How can I reduce that inter-line spacing?  The styles I am using now
are in http://mindprod.com/mindprod.css div.pleasefeedback and
img.mailto
-- 
Roedy Green Canadian Mind Products
http://mindprod.com
It is almost impossible to keep things in synch manually. Instead: 
-Keep each fact in only one central database (not necessarily SQL),
and access it as needed. Since there is only one copy of each fact, 
there is nothing to get out of synch.
-Use some automated tool so that if you change a fact is one place,
it automatically updates the others.
-Write a sanity checker you run periodically to ensure all is consistent. 
This is the strategy compilers use.
-Document the procedures needed to keep all in synch if you change 
something and rigidly and mechanically follow them.
0
Roedy
3/20/2012 2:09:22 PM
comp.authoring.html 7078 articles. 0 followers. Post Follow

4 Replies
815 Views

Similar Articles

[PageSpeed] 51

On 3/20/12 7:09 AM, Roedy Green wrote:
> I use a program to make Email addresses harder for spammers to
> harvest. It converts them to slightly blurred images using
> http://mindprod.com/products1.html#MASKER
> 
> When I embed them in text, I have figured out how to get them to align
> naturally with the surrounding text, but the browser inserts extra
> inter-line spacing above the line containing the image.
> 
> You can see the effect at
> http://mindprod.com/book/books.html
> at the bottom of the page where it says:
> 
> "Please email your feedback for publication, letters to the editor,
> errors, omissions, typos, formatting errors, ambiguities, unclear
> wording, broken/redirected link reports, suggestions to improve this
> page or comments to Roedy Green : xxxxx@mindprod.com. If you want your
> message kept confidential, not considered for public posting, please
> explicitly specify that."
> 
> How can I reduce that inter-line spacing?  The styles I am using now
> are in http://mindprod.com/mindprod.css div.pleasefeedback and
> img.mailto

I have my E-mail address embedded in the Web page at
<http://www.rossde.com/PGP/index.html#aboutmykeys>, between the section
header and the key IDs.  This is done via an image in a GIF file with a
transparent background.

The GIF file has a width of 124 pixels and a height of 16 pixels.  The
CSS for its <img> element (class=emailaddr) repeats that sizing.  That
sizing works when I view my own page with fonts sized at 12 pixels or
larger; with smaller sizing, it does not work.  The CSS is:
    img.emailaddr { margin: 0px;
		vertical-align: middle;
		height: 16px; width: 124px;
		border-style: none  }

-- 

David E. Ross
<http://www.rossde.com/>

Concerned about someone (e.g., the government)
snooping into your E-mail?  Use PGP.
See my <http://www.rossde.com/PGP/>
0
David
3/20/2012 9:57:49 PM
On 3/20/12 2:57 PM, David E. Ross wrote:
> On 3/20/12 7:09 AM, Roedy Green wrote:
>> I use a program to make Email addresses harder for spammers to
>> harvest. It converts them to slightly blurred images using
>> http://mindprod.com/products1.html#MASKER
>>
>> When I embed them in text, I have figured out how to get them to align
>> naturally with the surrounding text, but the browser inserts extra
>> inter-line spacing above the line containing the image.
>>
>> You can see the effect at
>> http://mindprod.com/book/books.html
>> at the bottom of the page where it says:
>>
>> "Please email your feedback for publication, letters to the editor,
>> errors, omissions, typos, formatting errors, ambiguities, unclear
>> wording, broken/redirected link reports, suggestions to improve this
>> page or comments to Roedy Green : xxxxx@mindprod.com. If you want your
>> message kept confidential, not considered for public posting, please
>> explicitly specify that."
>>
>> How can I reduce that inter-line spacing?  The styles I am using now
>> are in http://mindprod.com/mindprod.css div.pleasefeedback and
>> img.mailto
> 
> I have my E-mail address embedded in the Web page at
> <http://www.rossde.com/PGP/index.html#aboutmykeys>, between the section
> header and the key IDs.  This is done via an image in a GIF file with a
> transparent background.
> 
> The GIF file has a width of 124 pixels and a height of 16 pixels.  The
> CSS for its <img> element (class=emailaddr) repeats that sizing.  That
> sizing works when I view my own page with fonts sized at 12 pixels or
> larger; with smaller sizing, it does not work.  The CSS is:
>     img.emailaddr { margin: 0px;
> 		vertical-align: middle;
> 		height: 16px; width: 124px;
> 		border-style: none  }
> 

This made me experiment a little with my CSS and Web page.  Given the
16px height of the GIF file and the very good way it fit in the line of
text when the text had a 14px height, I was able to change my CSS to be
adaptable to varying font sizes.  It is now
    img.emailaddr { margin: 0px;
		vertical-align: middle;
		height: 1.14em; width: auto;
		border-style: none  }

The 1.14em was derived by taking the 16px height of the GIF and dividing
by the 14px height of the font.  The image fit the text line well with
9px fonts and 20px fonts.  You might want to try different ratios on
your own image file.

-- 

David E. Ross
<http://www.rossde.com/>

Concerned about someone (e.g., the government)
snooping into your E-mail?  Use PGP.
See my <http://www.rossde.com/PGP/>
0
David
3/20/2012 10:23:38 PM
In article <rr2hm7pd5d6cj5ros5tc85u00591jeufdf@4ax.com>,
 Roedy Green <see_website@mindprod.com.invalid> wrote:

> I use a program to make Email addresses harder for spammers to
> harvest. It converts them to slightly blurred images using
> http://mindprod.com/products1.html#MASKER
> 
> When I embed them in text, I have figured out how to get them to align
> naturally with the surrounding text, but the browser inserts extra
> inter-line spacing above the line containing the image.
> 

At

<http://netweaver.com.au/centring/page5.html>

I said various things about aligning text and images. I notice now I 
never went on, at /page6.html to look at using absolute position to 
align images and text (only centring of single elements was discussed).

you might look at:

<http://dorayme.netweaver.com.au/aligningTextAndImage.html>

for some ideas about sizing and centring images and text. 

You can work out what em size to use to keep a reasonable aspect ratio 
to pictures of text so the text remains readable. It involves a little 
experimentation and a browser that does not make like a mule. <g>

-- 
dorayme
0
dorayme
3/22/2012 6:24:27 AM
On Tue, 20 Mar 2012 15:23:38 -0700, "David E. Ross"
<nobody@nowhere.invalid> wrote, quoted or indirectly quoted someone
who said :

>    img.emailaddr { margin: 0px;
>		vertical-align: middle;
>		height: 1.14em; width: auto;
>		border-style: none  }

Empirically I got it to work with:

div.pleasefeedback img.mailto/* munged email with small type for
footer pleasefeedback */{
	border-style: none;
	height: 1.3em;
	margin: 0px;
	vertical-align: text-top;
	width: auto;
}

line-height :1.5em.
font-size: .85em;
the image is 209x22
-- 
Roedy Green Canadian Mind Products
http://mindprod.com
When you were a child, if you did your own experiment
to see if it was better to put to cocoa into your cup first
or the hot milk first, then you likely have the programmer gene..
0
Roedy
3/23/2012 10:12:34 PM
Reply: