Pure-Essence.Net » css

Custom font

pureessence — Tue, 28 Oct 2008 14:35:07 +0000

I saw another custom font solution today: typeface

Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

A while ago, I blogged about the SIFR 3. And there are many other solutions to render text in fonts that your client’s machine does not have. For example, generating the text as an image. BTW wasn’t there a wordpress plugin that does this? I wasn’t able to find it in my quick search. Can someone enlighten me?

One thing I hate about all these solutions is that you may no longer highlight the text in order to copy its content in all the browsers I know. It just bugs me to no end when expected browser behaviors get changed because you want some fancy fonts for your site.

I wish more browsers would implement the @font-face css rule so maybe then we can get around this issue?

CSS Frameworks

pureessence — Sun, 21 Sep 2008 16:05:30 +0000

I write my CSS from scratch and I know enough tricks/hacks to pull out most of all what I want to accomplish. Although I’ve always heard the yahoo YUI project and understand what its reset css achieves, I never knew there are so many other CSS frameworks out there. Hidden pixels has listed a great number of them. I don’t know if I will consider using them. I can’t see I will gain a lot of benefits from what I’ve done by using a framework but I might look into it since I have some time off work coming up

How to STYLE a table using CSS (JSF examples)

pureessence — Thu, 18 Oct 2007 17:54:17 +0000

Tables are very important parts of the web interface. They are (hopefully) used for tabular data. It is one of the oldest and most basic HTML presentation tag but in order for it to smoothly fit into the new CSS age, we need to look at the most practical way in correctly setting up the markup and the CSS.

Nowadays, we no longer wish to make separate instances of a similar application for different clients. We want to thrive on making a single application that will fit the needs of as many clients as possible. This task is very challenging. In my opinion the ideal situation is to have the clients and developers both understand the benefits of the end goal and compromise to reach it. As developers we can always dream to have a single application reach the level of customization we can accomplish with many separate applications and yet don’t confuse the heck out of the end users. While I am unsure if that’s ever a possibility, I know ways that might help get us closer.

One of the biggest challenges is to give each client who uses the same application their own unique UI presentation. This is no small task and I only plan to address a small issue you might encounter in accomplishing this task. That’s how to mark up a table with the most amount of UI flexibility.

A traditional table might look something like this:



	
		Name
	
	
		Phone number
	
	
		Date of birth
	


	
		Mike White
	
	
		123-456-789
	
	
		10/11/1976
	


	
		Nancy Green
	
	
		987-644-311
	
	
		02/24/1950

Name	Phone number	Date of birth
Mike White	123-456-789	10/11/1976
Nancy Green	987-644-311	02/24/1950

With no CSS classes specified in any elements, it will be hard to style this table with much customization. You can add styling to the table, tr, th and td tags but they will have to be uniformly defined. You will have a lot more flexibility if add more classes to each element like below:



	
		Name
	
	
		Phone number
	
	
		Date of birth
	


	
		Mike White
	
	
		123-456-789
	
	
		10/11/1976
	


	
		Nancy Green
	
	
		987-644-311
	
	
		02/24/1950

Name	Phone number	Date of birth
Mike White	123-456-789	10/11/1976
Nancy Green	987-644-311	02/24/1950

Notice I applied classes to the table, each of the alternating rows and each of the columns. And also notice I added

cellpadding="0" cellspacing="0" border="0"

to the table tag. This is very important since CSS does not have direct cellpadding and cellspacing controls, you cannot take away the natural cellpadding & cellspacing each browser applies to all tables. It’s the best to set them to 0 and control everything via CSS.
Since I’ve been working with JSF, I will give an example in JSF. The t:dataTable tag can very easily generate the table markup above.


	
		Name
		
	
	
		Phone number
		
	
	
		Date of birth

Now we have the markup, let’s go thru a simple table styling.

The first things I’d start with are these:

table.people {
	width: 100%;
	border-collapse: collapse; /* so we can control cellspacing in a practical way */
}

table.people th,
table.people td {
	padding: 5px;
	text-align: left;
	font-family: Arial, Verdana, sans-serif;
}

Let’s see how it looks:

I usually apply border-collapse: collapse on the table so you can control the border width with td tags and without seeing double borders between cells. The padding on td & th tags really work just like cellpadding inside of the table tag. Except you have more flexibility now as if you really want, you can have different paddings for every cell.

Now let’s add some border.

Change the previous th,td styling definition to below:

table.people th,
table.people td {
	padding: 5px;
	text-align: left;
	font-family: Arial, Verdana, sans-serif;
	border: 1px solid #000; /* let's apply borders */
}

Let’s see how it looks:

Now this is the look you usu. want. If you take away the border-collapse: collapse; and then your table will look like this:

TIP: do not apply border on the tr tag since it does not understand it. To get borders on tables, always add border defintion on td and th tags.

Now let’s give the table header a different background color, add the alternating colors and border colors.

table.people {
	width: 100%;
	border-collapse: collapse; /* so we can control cellspacing in a practical way */
	border-bottom: 1px solid #000;
}

table.people th,
table.people td {
	padding: 5px;
	text-align: left;
	font-family: Arial, Verdana, sans-serif;
	border: 1px solid #000; /* let's apply borders */
	border-bottom:0;
}


table.people th {
	background-color: #ddd;
	color: #BB0000;
	border-bottom: 2px solid #000;
}

table.people tr.odd {
	background-color: #DDFFFF;
}

table.people tr.odd td {
	border-top: 1px solid #ccc;
}

table.people tr.even {
	background-color: #FBFBFB;
}

table.people tr.even td {
	border-top: 1px solid #BBEEEE;
}

Let’s see how it looks:

TIP: table bottom border does not override td bottom border (I’m not sure if it’s a bug) therefore it’s important to NOT define a td bottom border and define a table bottom border if you want them in DIFFERENT colors and/or styles.

Let’s talk about cellspacing. Personally I’ve never found a real need for cellspacing in styling tables. It is something CSS cannot truly accomplish with limited support of border-spacing in browsers (mainly it’s not supported by IE 6). However, you may be able to *fake the look* by using a border color that’s the same as the solid background color. Please take a look at the example below.

body {
	background-color: #000;
}

table.people {
	width: 100%;
	border-collapse: collapse; /* so we can control cellspacing in a practical way */
	border-bottom:0; /* you may not want the bottom of your table have spacing */
}

table.people th,
table.people td {
	padding: 5px;
	text-align: left;
	font-family: Arial, Verdana, sans-serif;
	border: 4px solid #000; /* this can be seen as cellspacing... */
	border-bottom:0;
}

/* you may not want the top of your table have spacing */
table.people th {
	border-top: 0;
}

/* you may not want the left most and right most side of your table have spacing */
table.people th.first,
table.people td.name {
	border-left: 0;
}

table.people th.last,
table.people td.dateOfBirth {
	border-right: 0;
}

table.people th {
	background-color: #ddd;
	color: #BB0000;
}

table.people tr.odd {
	background-color: #DDFFFF;
}

table.people tr.even {
	background-color: #FBFBFB;
}

View the example

Clear left workaround

pureessence — Tue, 25 Sep 2007 19:02:11 +0000

You may have run into this problem, you may have not. But I found an acceptable workaround to this particular problem.

Here’s the scenario.

So I have a two column layout where my navigation list (red) is floated to the left and my main content is on the right. In my main content I have another navigation list (gray) that floats to the left. And the text in my main content now wraps around. I really want my main content text below the gray navigation to still to the right of red navigation.

If I use a simply use a clear:left on the container around my content text, I will have it all the way below the red navigation list. This is expected behavior as clear:left means make sure there is no elements that are floated to the left of me. It however is not the ideal behavior I wanted.

In IE & Firefox (possibly other browsers) there is a *bug* that if you wrap the floating element in a fieldset, the fieldset acts as a container that stretches as far as the float elements.

This however really isn’t a good workaround because it uses a *bug* in both browsers and it DOES NOT work in browsers like safari. So I came up with a better solution today.

Float the ul element to the right with its width set to 100%, and then clear the container around the text to the right. This obviously only works if you don’t have anything above the text that’s also floated to the right.

Here’s the final result.