Monday 23 June 2014

Embed Font: Embed custom fonts on your website with the @font-face property

Embed custom fonts on your website with the @font-face property

By  in Web Designer, July 12, 2012, 1:24 AM PST
Ryan Boudreaux shows you how to get custom fonts into a usable form for your website designs by employing the @font-face property. 
My last post on getting font inspiration from film and television pointed out several custom fonts that were created based on the opening credit titles for films such as Men In Black and Back To The Future and television series such as I Dream of Jeannie and Gilligan's Island. In this second part, I will show you how to embed these custom fonts into your websites, enabling users to view and appreciate the nifty fonts no matter the browser or device.

Viewing custom fonts from your website

Now that you have downloaded a collection of nifty film and television true type fonts, you may be wondering how you get them to a useful state on your website. Unless your users have the same fonts installed on their local devices, they will not be able to view your clever custom fonts. Luckily, there is a way to get these customs fonts onto your user's devices using several options; the first is to employ a graphic image editor, and the second is to incorporate the@font-face property in your CSS.
One alternative to solving the problem becomes the task of creating titles, logos, or headings from your favorite graphic image editor, presuming that you have already installed the font on the local PC, then all you need to do is create the textual content utilizing the particular custom font. Similar steps for creating titles in this manner are described in the tutorial, "Create a minimalist web design layout using Photoshop," in particular, the part which describes creating the header section in the post. A portion of the process is shown with the "Web Site Name" text in Figure Abelow. However, this process means that your website titles and headings will give up some SEO recognition, since text displayed as images will not register in most search engine scans.

Figure A

A better option entails pushing the custom fonts to a central directory on your web sever, and then creating a set of CSS style properties to call them as defined. For instance, you might place all your web fonts in a directory such as /htdocs/web/fonts.
In this example I will use the Back to the Future font for first level headings, the I Dream of Jeannie font for the second level headings, and the Gilligan's Island font for paragraphs. This might not be the best use of typography for a web page; however, this is for demonstration purposes only. I downloaded and copied the three *.ttf files to my font directory, and then created the index.html file along with CSS file styles.css.
Utilizing the @font-face property in the CSS allows you to call any custom fonts and ensures that they will be displayed for any user. You can add an unlimited number of @font-face property declarations as you wish; as in this case, I have three as displayed in the CSS code snippet below:
@font-face {
    font-family: bttf_font;
    src: local(bttf_font), url('fonts/bttf.ttf') format('opentype');
}
@font-face {
    font-family: jeannie_font;
    src: local(jeannie_font), url('fonts/jeannie.ttf') format('opentype');
}
@font-face {
    font-family: gilligan_font;
    src: local(gilligan_font), url('fonts/gilligan.ttf') format('opentype');
}
Then the font-family is assigned to the individual elements:
h1 {
        font-family:bttf_font;
        font-size:32px;
        font-stretch:extra-expanded;
}
h2 {
        font-family:jeannie_font;
        font-size:24px;
        font-stretch:extra-expanded;
}
p {
    font-family: gilligan_font;
        font-size:18px;
}

Internet Explorer

There is a known issue with older versions of Internet Explorer that do not render *.ttf file types, and they must be converted to an *.eot file type. In these cases, you would need to convert the *.ttf file to an *.eot file and then add that to your @font-face property. In the case of the Back to the Future font, it would appear first in the font stack:
@font-face {
    font-family: bttf_font;
    src: url('bttf.eot');
    src: local(bttf_font), url('fonts/bttf.ttf') format('opentype');
}
Check out the MSDN Library on About Font Embedding for more information on creating the *.eot files for your custom font stack.
The demonstration files are available for download, and the demo page is displayed in Figure Bas shown in Chrome 20.0.1.

Figure B

Do you use any custom fonts for your websites? If so, tell us which fonts you use and how you have implemented them.
Posted by at 1 comment:

Saturday 24 May 2014

HTML5: Developing web pages in Bengali

Hi all
In response to few questions about how to develop a website with Bangla texts, I have written down the following accounts.
Updated version of this article can be found at http://www.joomla-bd.org.

Creating Bangla Webpages
As in creating webpage in English, one can use software tools like Frontpage or choose to write the basic html codes. However, such webpages are known to be what is called static. Dynamic webpages are produced by programs (mostly in PHP or ASP these days) run on server. The output of such program is of course is a HTML file.

Bengali characters can be put in a HTML page in mainly two different ways: the old way, and new UNICODE way.

Bengali- the old way:
To create a webpage this way, you have to choose a Bengali font (and an encoding, as there is no agreed upon standard on that) and pick an editor that would allow typing Bengali characters. You may also need a program (often called keyboard mapper) to input Bengali characters. To be very specific, you may choose Shutonny font (from Ananda Computers), the Frontpage editor and Bijoy Keyboard manager. All these are very common in use. If you have any experience in writing English webpage, then you shouldnt have any problems in doing the same in Bengali.

Now the question of enabling the end users or viewers view the Bengali texts you have written. The viewer MUST have the Bengali font you have used in writing the pages or a compatible one to see the pages. The font must be installed and functional on the operating system in use. In the event of not having the font, there are few things you can help viewers.

1. Host the font file on the webserver and ask the viewer to download and install it. It would require you have the appropriate permissions from the font vendor. Also, the viewer must have the priviledge from the operating system of the computer in use to install a new font. This technique is well enough and in use on many websites.

2. You can publish the font as an integral part of the HTML file. This is so called font embedding or dynamic font. The only prodcts line that support such font embedding is Microsoft. You would create the webpage as said and then process the font with a program called WEFT (free to download). Once done, you need to host the webpage along with the processed font with the hope that when the browser wont find the specified font on the client coputer it would download it from the server automatically. The sad thing of this technique is that only IE at the moment support such font embedding. Also, the embedded font can only used to view texts. Inputting, editings are not supported. Before the WEF, there was another similar technology from Bitstream. 

Problems
Apart from the adherence to IE the biggest problem of this technique is its inablity to be meaningful to a search engine. If you have a website that google does not know about, then do not expect many visitors to your website. Search engines would consider such webpages as English  but wont be able to find any meaningful word or phrase to index on. Though you can have keywords in metadata, but search engine like google tends to ignore or ill-consider them.

Examples-

  • Boishakhi is found to be best Bengali font for webpage thanks to its outstanding screen quality at small sizes. Luckily it is free and can be distributed also. 
  • Bijoy is the most popular for typing Bengali text using their own fonts. For a compatible keyboard program for Boishakhi, please try http://www.akshor.com/ (it's expired when writing this)
  • http://www.bhorerkagoj.net/  is an example of Bengali website using fonts from Bijoy and forcing the viewers to download and install the font to view the pages.
  • http://www.prothom-alo.com/ is an example of Bengali website using dynamic fonts. But as said, you can view only with IE.
  • http://www.somewhereinblog.net/ is a site that came up on google when searched for Boishakhi.

Bengali- the UNICODE way:
Writing Bengali in a particular font has many problems not to mention less compatibility accorss different operating systems and browsers. UNICODE seems to solve the problem by defining a standard for characters and other symbols of all different languages and  rules for writing. But as you can guess, you need to have support from the browser, the operating systems and lot of ther things to get the UNICODE working fully. Luckily, the support is getting better and there has never been a better time to write a Bengali website using UNICODE.

To write texts in UNICODE, you need a font that has to be UNICODE compliant (commonly called OTF though OTF can be non-UNICODE as well). The viewer also has to have some font that supports the UNICODE and has Bengali characters in it. The good thing is, both the fonts not necesarily have to be the same as long as they both conform to UNICODE and have Bengali characters in them. (An OTF font may contain charcters of more than one language.) So the viewers are unlikely to have any problems in viewing Bengali pages al long as they have at least one Bengali OTF. The good news is, the Windows XP SP2 and later has Vrinda as the Bengali font. There may be similar on Linux and other platforms (I dont have much knowledge about them.)

To edit UNICODE texts (be it any language including bangla) you would need a text editor (Notepad can do), or can go for full functional HTML editor like Frontpage. Frontapge/notepad would allow you enter texts in any language if your system is configured properly and has got a required font. Inputting character of non-English languages needs a keyboard mappers as usual. There are heaps of tools to choose from for this. The UNICODE website http://www.unicode.org/ lists the sources of such programs. For Bengali and Assamese, Avro (http://www.omicronlab.com/)  seems the winner at the moment.

Example and sources
Here are a few examples of Bengali websites emplying UNICODE.


The strange thing that you may not know is that you can search google in Bengali. Get any of Bangla inputting software like Avro and type some Bangla texts in the search box. Hit the seach button and then see.

Pros and Cons of old and new ways
Coming
Posted by at 3 comments:

HTML5: How to embed a custom font into HTML or CSS

Embed custom fonts on your website with the @font-face property

By  in Web Designer, July 12, 2012, 1:24 AM PST
Ryan Boudreaux shows you how to get custom fonts into a usable form for your website designs by employing the @font-face property. 
My last post on getting font inspiration from film and television pointed out several custom fonts that were created based on the opening credit titles for films such as Men In Black and Back To The Future and television series such as I Dream of Jeannie and Gilligan's Island. In this second part, I will show you how to embed these custom fonts into your websites, enabling users to view and appreciate the nifty fonts no matter the browser or device.

Viewing custom fonts from your website

Now that you have downloaded a collection of nifty film and television true type fonts, you may be wondering how you get them to a useful state on your website. Unless your users have the same fonts installed on their local devices, they will not be able to view your clever custom fonts. Luckily, there is a way to get these customs fonts onto your user's devices using several options; the first is to employ a graphic image editor, and the second is to incorporate the@font-face property in your CSS.
One alternative to solving the problem becomes the task of creating titles, logos, or headings from your favorite graphic image editor, presuming that you have already installed the font on the local PC, then all you need to do is create the textual content utilizing the particular custom font. Similar steps for creating titles in this manner are described in the tutorial, "Create a minimalist web design layout using Photoshop," in particular, the part which describes creating the header section in the post. A portion of the process is shown with the "Web Site Name" text in Figure Abelow. However, this process means that your website titles and headings will give up some SEO recognition, since text displayed as images will not register in most search engine scans.

Figure A

A better option entails pushing the custom fonts to a central directory on your web sever, and then creating a set of CSS style properties to call them as defined. For instance, you might place all your web fonts in a directory such as /htdocs/web/fonts.
In this example I will use the Back to the Future font for first level headings, the I Dream of Jeannie font for the second level headings, and the Gilligan's Island font for paragraphs. This might not be the best use of typography for a web page; however, this is for demonstration purposes only. I downloaded and copied the three *.ttf files to my font directory, and then created the index.html file along with CSS file styles.css.
Utilizing the @font-face property in the CSS allows you to call any custom fonts and ensures that they will be displayed for any user. You can add an unlimited number of @font-face property declarations as you wish; as in this case, I have three as displayed in the CSS code snippet below:
@font-face {
    font-family: bttf_font;
    src: local(bttf_font), url('fonts/bttf.ttf') format('opentype');
}
@font-face {
    font-family: jeannie_font;
    src: local(jeannie_font), url('fonts/jeannie.ttf') format('opentype');
}
@font-face {
    font-family: gilligan_font;
    src: local(gilligan_font), url('fonts/gilligan.ttf') format('opentype');
}
Then the font-family is assigned to the individual elements:
h1 {
        font-family:bttf_font;
        font-size:32px;
        font-stretch:extra-expanded;
}
h2 {
        font-family:jeannie_font;
        font-size:24px;
        font-stretch:extra-expanded;
}
p {
    font-family: gilligan_font;
        font-size:18px;
}

Internet Explorer

There is a known issue with older versions of Internet Explorer that do not render *.ttf file types, and they must be converted to an *.eot file type. In these cases, you would need to convert the *.ttf file to an *.eot file and then add that to your @font-face property. In the case of the Back to the Future font, it would appear first in the font stack:
@font-face {
    font-family: bttf_font;
    src: url('bttf.eot');
    src: local(bttf_font), url('fonts/bttf.ttf') format('opentype');
}
Check out the MSDN Library on About Font Embedding for more information on creating the *.eot files for your custom font stack.
The demonstration files are available for download, and the demo page is displayed in Figure Bas shown in Chrome 20.0.1.

Figure B

Do you use any custom fonts for your websites? If so, tell us which fonts you use and how you have implemented them.
Posted by at No comments:

Friday 16 May 2014

HTML: Add URL link in CSS Background Image?

I have a CSS entry that looks like this:
.header {
    background-image: url("./images/embouchure.jpg");
    background-repeat: no-repeat;
    height:160px;
    padding-left:280px;
    padding-top:50px;
    width:470px;
    color: #eaeaea;
    border-bottom:1px solid #eaeaea;


}
How can I add the link to the the background image in that CSS?
The full CSS can be found here and the html that uses is there.

Try wrapping the spans in an anchor tag and apply the background image to that.
HTML:
<div class="header">
    <a href="/">
        <span class="header-title">My gray sea design</span><br />
        <span class="header-title-two">A beautiful design</span>
    </a>
</div>
CSS:
.header {
    border-bottom:1px solid #eaeaea;
}

.header a {
    display: block;
    background-image: url("./images/embouchure.jpg");
    background-repeat: no-repeat;
    height:160px;
    padding-left:280px;
    padding-top:50px;
    width:470px;
    color: #eaeaea;
}
Posted by at 2 comments:

Padding and margins around image links are clickable. How do I set only the image as the link?

I believe the best way to solve this problem would be to contain each image in a div that is sized appropriately.  Put the margins and padding on the div.  Put the links on the images.  The divs will need to be floated to get them on the same horizontal line.
Posted by at No comments:

Thursday 3 April 2014

CSS: Set Opacity of background image without affecting child elements

Fixing Parent-Child Opacity

Parent/Child signOne of the posts on this website that consistently gets a significant amount of traffic (5000+ page views this month alone) is a ridiculous article I wrote that discusses how to make a child element not inherit the opacity setting of its parent.
As we all know, CSS transparency that uses the opacity property can be annoying in this area.
Basically, if a parent element has an opacity value set at, say, 0.5, all of its children will inherit that opacity setting, and there’s no way to reverse that opacity on the child elements.
That post I wrote discussed a hacky workaround where you actually remove the element from its parent, position it absolutely, then move it so it still appears in the same place it did when it was a child.
If you know anything about CSS positioning, then you know why this is not a great solution.
Nonetheless, I still get lots of traffic coming to that article not only from Google searches, but also from various Stack Overflow threads that link to it.
So I decided to write a script that fixes this issue. But first, let’s settle a few things.

The Best Way to Resolve This Issue

I’m guessing that in more than 90% of cases, this is pretty much a non-issue. If you need transparency on a parent element, you can do it using a few different methods that avoid this parent-child opacity issue:
  • If it’s only a background color on the parent, use RGBA or HSLA
  • If it’s a background image, use a transparent PNG
  • If you’re just desiring a “washed out” look for a color or background image or pattern, do it in your image editor, or sample the washed-out color you want and insert it with Hex or RGB in your CSS
But hey, it’s fun to write polyfills and workarounds for these types of problems, and it does seem like this sort of thing is in demand, even if most developers are approaching the problem in the wrong way to begin with.

Introducing thatsNotYoChild.js

I realized that the workaround to get the child elements out of their parent and repositioned is not that crazy. So I wrote a script that does this exact thing automatically, but it’s much more effective than that original solution.
Here’s an embedded pen demonstrating thatsNotYoChild.js in action:
HTML:
<div class="parent" id="parent">

  <div class="child">
  </div>
  <p>The blue box and the text are child elements of the element that has a photo background. The child elements do not inerit the opacity setting on the parent. This is done using a jedi mind trick, aka "JavaScript".</p>
 
  <p>The rest of this is just filler text. Don't read this, you're just wasting your time. Are you serious? You're still reading? I'm not lying, this is just filler. I just need this to wrap below the box. That's all.</p>
</div>

CSS:
* {
  box-sizing: border-box; 
}

.parent {
  width: 500px;
  background-image: url(http://www.impressivewebs.com/demo-files/css-opacity/bicycle.jpg);
  border: solid 3px black;
  margin: 0 auto;
  padding: 30px;
  opacity: .2;
            filter: alpha(opacity=20);
}
 
  .child {
    width: 150px;
    height: 150px;
    background: blue;
    float: left;
    margin: 0 20px 10px 0;
    border: solid 5px yellow;
    box-shadow: rgba(0, 0, 0, .2) 4px 4px 5px;
  }

p { margin: 0 0 20px 0; }

Javascript:
/*
ThatsNotYoChild.js, by Louis Lazaris
Explanation: http://www.impressivewebs.com/fixing-parent-child-opacity/
This is a hacky workaround to let you use opacity on any element and prevent the child elements from inheriting the opacity.
Works in IE8+.
If anyone can get line 23 working in IE7, it will be fully cross-browser.
*/
function thatsNotYoChild(parentID) {

    var parent           = document.getElementById(parentID),
        children         = parent.innerHTML,
        wrappedChildren  = '<div id="children" class="children">' + children + '</div>',
        x, y, w, newParent, clonedChild, clonedChildOld;

    parent.innerHTML = wrappedChildren;
    clonedChild = document.getElementById('children').cloneNode(true);
    document.getElementById('children').id = 'children-old';
    clonedChildOld = document.getElementById('children-old');
    newParent = parent.parentNode;

    newParent.appendChild(clonedChild);
    clonedChildOld.style.opacity = '0';
    clonedChildOld.style.filter = 'alpha(opacity=0)';

    function doCoords () {
      x = clonedChildOld.getBoundingClientRect().left;
      y = clonedChildOld.getBoundingClientRect().top;
      if (clonedChildOld.getBoundingClientRect().width) {
        w = clonedChildOld.getBoundingClientRect().width; // for modern browsers
      } else {
        w = clonedChildOld.offsetWidth; // for oldIE
      }

      clonedChild.style.position = 'absolute';
      clonedChild.style.left = x + 'px';
      clonedChild.style.top = y + 'px';
      clonedChild.style.width = w + 'px';
    }

    window.onresize = function () {

      doCoords();

    };
 
    doCoords();

}

// call the function and pass the ID of the parent that has opacity set.

thatsNotYoChild('parent');
Go ahead, change the markup to anything you want inside the #parent element; it should work for anything you put in there.
You can view the code in the embedded CodePen, and here’s a step by step description of what it does:
  • Grab all child elements of the element that has the opacity setting, wrap them in a <div>
  • Use cloneNode to clone the newly-wrapped child group
  • Place the new clone outside the parent element
  • Change the ID of the original group
  • Set the opacity of the original group to zero (you can reduce the opacity of the children but you can’t raise it)
  • Use getBoundingClientRect() (which works everywhere that’s relevant) to find the exact position and width of the original child group
  • Use element.style to absolutely position and size the clone group using the values obtained from getBoundingClientRect()
  • Use window.onresize to run the previous two steps every time the window is resized.
Compared to the old article I wrote that fixed this issue with a CSS-only solution, this solution has a few advantages. First, although the child elements are absolutely positioned, taking themout of the normal flow, the space the child elements occupy is still occupied by the original child group, which isn’t visible due to having its opacity set to 0. The cloned group overlays the same space, making it appear as if it never moves, and the other elements on the page don’t reposition themselves since they are subject to the positioning of the original, now invisible, child group.
The other advantage is that this solution doesn’t require any changes to the markup, whereas that other CSS-only solution required that you change the markup.
To use the script, just call the function like this, passing in the ID of the parent element that has opacity set:
view plain?
  1. thatsNotYoChild('parent');  

Feedback?

I don’t know too much about the different DOM methods I used in this script. I’m guessing for example that window.onresize is not great for performance and repaints.
This was, more or less, a fun little hacky script that’s not too heavy so maybe someone will find it useful, assuming there are no major performance issues with it.
If you have any feedback on improvements to the code, or see any potential bugs or drawbacks, feel free to comment and/or fork it.



CSS opacity only to background color not the text on it?

It sounds like you want to use a transparent background, in which case you could try using the rgba()function:

rgba()

Colors can be defined in the Red-green-blue-alpha model (RGBa) using the rgba() functional notation. RGBa extends the RGB color model to include the alpha channel, allowing specification of the opacity of a color.
a means opacity: 0=transparent; 1=opaque;
rgba(255,0,0,0.1)    /* 10% opaque red */  
rgba(255,0,0,0.4)    /* 40% opaque red */  
rgba(255,0,0,0.7)    /* 70% opaque red */  
rgba(255,0,0,  1)    /* full opaque red */
Sample usage:
#div {
    background: rgb(54, 25, 25); /* Fall-back for browsers that don't
                                    support rgba */
    background: rgba(54, 25, 25, .5);
}

I've never seen that as "overriding" or "underriding". It's a matter of relative opacities. If the parent has an opacity of 0.5, the child has it too (in relation to the parent's stacking context). The child can have its own opacity value between 0 and 1, but it will always be relative to the parent's opacity. So if the child also has opacity: 0.5 set, it will be 0.25 the opacity of some of the parent's sibling with opacity 1.
The spec treats it as an alpha mask, where opacity can only be removed. An element is either opaque, or has some degree of transparency (anything < 1):
Opacity can be thought of as a postprocessing operation. Conceptually, after the element (including its descendants) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering.
and later on:
If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is <alphavalue>
As for why it was implemented that way, I don't think it was intentional in the sense of "let's forbid that". Maybe this approach was chosen for being simpler to calculate, and only later an actual need for something different was recognized (then rgba color and background-color were introduced – and I may be wrong about the timeline here).


Posted by at 4 comments:
Subscribe to: Posts (Atom)