Solved

Font spacing in a column

Posted on 2013-12-13
6
242 Views
Last Modified: 2013-12-14
I need to display various street names in a column.  It could be "Fifth Ave" or "Lexington Ave", etc.

F
i
f
t
h

A
v
e


I want to use a san-serif font and I assume that it can't be proportional.

I tried "letter gothic" but the problem is that the capital "F" in the first row appears to the naked eye that it's further to the left than the rest of the column.  It's really not but because of the letter "F" and the letter "i" below it,  your brain makes that assumption.  I've tried left, center and right justification and they all give the same impression.

Any one know if there's a way to make this look pretty?  The customer doesn't care if it works, just so that it looks pretty!!!!
0
Comment
Question by:breeze351
6 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39718215
The problem you are going to run into is every browser and device may interpret things differently.  If the client wants to worry about precise spacing, I would make it an image.   The other issue is using fonts that most devices will have.
0
 
LVL 14

Expert Comment

by:quizwedge
ID: 39718231
You could try using a web font and set left and right margin for letters. That is, "F" needs 1px of left margin, etc. Using a web font should mean everyone is using the same font, but the browser and operating system could introduce some quirks.

Padas suggestion of an image could work well, but assuming you need the images to be dynamic, you might want to try using a CSS Sprites. They can be a pain, but it'd work. http://css-tricks.com/css-sprites/ does a good introduction.

You could then set up css classes such as
.letter {
background-image:url('/img/image.gif');
}
.a {
background-position:0px 0px;
}
.b {
background-position:0px -72px;
}

Open in new window


You could then call
<span class="letter a">&nbsp;</span>

Open in new window

to generate an a.

One note, you'll probably want to have a separate CSS sprite for retina screens.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39718284
I don't think the image is really the way to go. My point is this is not a print magazine layout where you get everything exactly where it needs to be and everybody reads paper from the same press.   In the web, micro adjustments like you are looking for are going to be hard.

I have had similar clients and wouldn't take no for an answer so I just made it look good for their screen.
0
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
LVL 11

Expert Comment

by:Amar Bardoliwala
ID: 39718653
Hello breeze351,

Please look at following link,

http://net.tutsplus.com/tutorials/html-css-techniques/the-easiest-way-to-create-vertical-text-with-css/

In link above tutor has given 7 methods to achieve vertical text display using css and js.

Hope this will help you.

Thank you

Amar Bardoliwala
0
 
LVL 16

Accepted Solution

by:
DansDadUK earned 500 total points
ID: 39718724
>> ... I want to use a san-serif font and I assume that it can't be proportional ...

It may, perhaps, be the case that, for your issue, the opposite is true.

With fixed-pitch fonts (such as Courier New, Letter Gothic), each glyph (character shape) is the same width, so that text in these fonts will be spaced evenly when text is laid out horizontally.

To achieve this, narrow characters (such as "i") have larger 'blank' areas (the Left Side Bearing and Right Side Bearing values) either side of the shape, compared to wider characters (such as "W").

This means that when the characters are presented vertically, they are not usually perfectly aligned vertically, because of the differences in the LSB values of the different characters.

Conversely, with proportionally-spaced fonts (such as Arial, Times New Roman), the glyphs are not all the same width (so will not be spaced evenly when text is laid out horizontally), but it is likely that the LSB values, although not all the same, will be within a smaller range of possible values, so they may align better when text is laid out vertically.
0
 

Author Closing Comment

by:breeze351
ID: 39719017
I think the best way is padas solution.  Go with the image.   If I save the image in the database, I can just get it and display it.

I've written software for publishers so I am familiar with fonts and kerning but it's always been horizontal.

My partner is having his knee replaced on Tuesday so he'll be out of action for a couple of weeks.  He needs something to do while sitting around the house.  "Hey Chris, while you're sitting there here's what you can do."

Thanks
Glenn
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now