Re: sizing a picture on a webpage

  • From: "Bryan Garaventa" <bgaraventa11@xxxxxxxxxxxxxx>
  • To: <programmingblind@xxxxxxxxxxxxx>
  • Date: Sun, 30 May 2010 12:58:49 -0700

Hi, BX is a utility developed by Doug Lee that is available at
I'm not sure if the publically hosted version supports use in Windows7, but it works in 32 bit OS's with JAWS. One thing I forgot to mention regarding colors, is that it can sometimes be a challenge to pick color schemes that provide enough color contrast. So I wrote the color picker at
to make this easier. For example, if I select a particular named color value, or enter a hex code to be converted to RGB, I check the RGB color fields which change automatically to reflect the new value. The lower the values in each RGB field, the darker the color is, and the higher the values, the lighter it is. So if I have a color that has RGB color values of 128 128 128, the color is exactly mid range between light and dark. In this manner I can choose background and foreground color combinations that are not too close in contrast to be effective.
All the best,

----- Original Message ----- From: "RicksPlace" <ofbgmail@xxxxxxxxx>
To: <programmingblind@xxxxxxxxxxxxx>
Sent: Sunday, May 30, 2010 3:21 AM
Subject: Re: sizing a picture on a webpage

Hi Brian: You mention you use BX to figure out the relative positioning of things on a spage. What is BX? I have used Percentages often to position things on a page but just did it mentally. What is BX?
Rick USA
----- Original Message ----- From: "Bryan Garaventa" <bgaraventa11@xxxxxxxxxxxxxx>
To: <programmingblind@xxxxxxxxxxxxx>
Sent: Saturday, May 29, 2010 6:29 PM
Subject: Re: sizing a picture on a webpage

Yes, it is possible for a fully blind developer to create a visually appealing site design. The way to do this, is to examine the live offset positioning coordinates of each element during the design phase. I used this method to program the new site design for . For instance, though I've never visually seen my site, I know that the left navigation bar is 20% of the body width, and that all body content is approximately 70%; Additionally, the body content has a left margin of 25% to prevent the left navigation bar from overlapping the body content; The Search link is actually within a floating box in the top right corner of the screen, and the Top link is in a floating box in the bottom left corner, both of which are fixed so that they are always visible regardless of scrolling.
These are just a few examples to demonstrate the point.
When designing a visual layout for a site, I use BX to examine the offset positioning of each element within the browser to examine the width and height of the object, the top and left positioning relative to the width and height of its parent element, and so on. In this manner, I construct a grid in my mind that represents the visual viewport. For example, on a typical standard size monitor, the viewport (meaning the portion of the page that is currently visible) is approximately 1200 pixels in width and slightly less than 600 pixels in height. The width values change when a wide screen monitor is used, yet these differences can easily be dealt with by using percentages instead of exact pixel values when configuring container elements. So if the view port is approximately 1200 by 600, I have an accurate representation of the actual screen real estate at any given time for sighted users. I can use this information to position elements at various x y coordinates to ensure that the visual display exactly matches the element positions within my mind. The same technique reflects font sizing, padding, and all of the other visual effects that can be applied using CSS. I won't lie and say that this was easy; It took me several years of studying HTML/XHTML, CSS, JavaScript, and JQuery before I was able to create fully dynamic site designs that are cross-browser compatible and work correctly in mobile devices such as the iPhone and Ipad as well, but it definitely is possible for a blind developer to accomplish.

----- Original Message ----- From: "The Elf" <inthaneelf@xxxxxxxxxxxxxx>
To: <programmingblind@xxxxxxxxxxxxx>
Sent: Saturday, May 29, 2010 12:06 PM
Subject: Re: sizing a picture on a webpage

I didn't keep track of him myself, he was invited to talk to one of the lists after a rather heated discussion between Octavian and a number of other persons on that list over weather or not a blind person can function in the website design industry.

and since he does, and does it professionally as in his only source of income, then the answer is yes!

proprietor, The Grab Bag,
for blind computer users and programmers
Owner: Alacorn Computer Enterprises
Specialists in customized computers and peripherals
- own the might and majesty of a Alacorn!

----- Original Message ----- From: "black ares" <matematicianu2003@xxxxxxxxxxx>
To: <programmingblind@xxxxxxxxxxxxx>
Sent: Saturday, May 29, 2010 11:24 AM
Subject: Re: sizing a picture on a webpage

where is that blind who does webdesign professionaly,
to explain what and how!
Always you must have a sighted help to be sure that all things are ok.

----- Original Message ----- From: "D!J!X!" <megamansuperior@xxxxxxxxxxx>
To: <programmingblind@xxxxxxxxxxxxx>
Sent: Saturday, May 29, 2010 9:08 PM
Subject: RE: sizing a picture on a webpage

There's a hack, use em measurements, and the picutre will always resize to fit it's context, even when people resize the text which is something that for us developers is a big deal, getting the site to look the same and work
the same if and when somebody resizes the page or zooms in or out.
Percentages do work for this as well, because you are letting the browser do the calculating, you just have to do it right; like I explained last night, there are many things that could prevent this from working flawlessly, so
you have to know how to do it...


-----Original Message-----
From: programmingblind-bounce@xxxxxxxxxxxxx
[mailto:programmingblind-bounce@xxxxxxxxxxxxx] On Behalf Of Humberto
Sent: Saturday, May 29, 2010 7:59 AM
To: programmingblind@xxxxxxxxxxxxx
Subject: Re: sizing a picture on a webpage

I believe it refers to the picture's original size. Pictures are sized in pixels and screens could have different resolutions,, therefore you would have to know the resolution of the screen of the visitor in order to resize the image in relationship to the screen, which may be possible only using a
browser-side script, such as Java Script.

I am not sure that if you put the image inside a div that is a certain
percentage of the screen, the image will adjust proportionally -without
distortion- to it.

Images sizes are something hard for us blind people to do. What I normally do to display images is to get their size with PHP and then adjust both height and width to the percentage required to make them a certain size, normally with a width of 640 and a proportionate heighth. In your case, you could make it have a width of 160 and a proportionate height and that way it would fit more or less correctly in the most common screen size of 640x480.

I'd be interested in learning more about resizing images, for this is always
a difficult matter.


----- Original Message -----
From: "qubit" <lauraeaves@xxxxxxxxx>
To: "bprogramming" <programmingblind@xxxxxxxxxxxxx>
Cc: "bwebbers" <blindwebbers@xxxxxxxxxxxxxxx>
Sent: Friday, May 28, 2010 11:41 PM
Subject: sizing a picture on a webpage

| Hi all --
| I asked this on blindwebbers but no one who knows the answer seems to be | online there tonight. I am putting up my personal webpage and want to put
| picture on it so that it is sized to fit in a space that occupies 24% ov
| width of the screen. I read about the css and xhtml for images and still | can't find anywhere that says what the % means when used in the context of
| the height or width of a picture. If I say
| <img src="whatever.jpg" height="90" width="110">
| I assume the numbers refer to pixels, as according to the spec, it can be | either pixels or percent. But if I say width="20%" -- what am I saying?
| that mean 20% of the whole screen? or the immediately enclosing div? or
| the picture's normal size?
| The docs tell you to experiment, which is fine if you can see the outcome.
| I'm trying to do this without sighted help.
| So does anyone have an answer?
| And how do I determine the normal size of this picture?
| TIA and happy holidays.
| --le
| __________
| View the list's information and change your settings at

View the list's information and change your settings at

View the list's information and change your settings at

View the list's information and change your settings at

View the list's information and change your settings at

View the list's information and change your settings at

View the list's information and change your settings at

View the list's information and change your settings at

Other related posts: