Monthly Archives: April 2014

PHP Variations, Permutations and Combinations

Today we are going to discuss Variations, Permutations and Combinations.

Difference Between Combinations and Permutations

In the English language, the word COMBINATION is used rather loosely, but mathematics requires a more complete definition so in math, there are both COMBINATIONS and PERMUTATIONS and the difference is as follows:

A COMBINATION is a set of items without any particular order. In a combination, the number set 1,2,3 would be equal to the set 3,1,2.

A PERMUTATION is a set of items where order matters. In a permutation the number set 1,2,3, the set 2,1,3 , the set 3,2,1 and the set 3,1,2 are all separate and not equal to one another as they are in a combination.

Combination vs. Permutation

Combinations:

  • 111
  • 112
  • 113
  • 121
  • 122
  • 123
  • 131
  • 132
  • 133

As you can see, there are only 9 combinations of 123. If you look to the right, you can see that there are 27 Permutations because the number of results increases when order matters.

Permutations:

  • 111
  • 112
  • 113
  • 121
  • 122
  • 123
  • 131
  • 132
  • 133
  • 211
  • 212
  • 213
  • 221
  • 222
  • 223
  • 231
  • 232
  • 233
  • 311
  • 312
  • 313
  • 321
  • 322
  • 323
  • 331
  • 332
  • 333

Some People Call Permutations and/or Combinations VARIATIONS

VARIATIONS or VARIATION is an even more confusing word if used in the context of mathematics and therefore should probably not be used in the same context as combinations and variations. In common English, one of several similar definitions for variation is: Something slightly different from another of the same type. However in mathematics, a variation is often defined as: A function that relates the values of one variable to those of other variables. Confused? If not, great, but I am sure you can see why we should stick to the words Combination and Permutation in this context none-the-less.

PHP PERMUTATIONS

I wrote a simple script to display all possible 3 letter long PERMUTATIONS in PHP. Here it is:

<?php
$alpha = array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');
$z=0;
$doms = '';
for ($i=0; $i<26; $i++){
    for ($j=0; $j<26; $j++){
        for ($k=0; $k<26; $k++){
        $z++;
         $doms .= $alpha[$i] . $alpha[$j] . $alpha[$k] . "<br />";  
        }
    }
}
echo "<h1>Found $z 3 letter long permutations:</h1>$doms";
?>

If you examine the above code, you'll notice there is three PHP for loops. Therefore, if you wanted the script to return only two letter strings, remove one of the for loops and one of the $alpha arrays as well as the $k variable. If you wanted to add one to make it return all 4 letter long permutations, add another for loop, another $alpha array and the variable $m. This should be pretty easy to see if you study it long enough. Good luck with your PHP permutations, I hope this article helped!

How to Identify a Font

Today I was challenged with figuring out what a font was that a client wanted. He had sent me an image of some text with the font he wanted, but no name and no example HTML code to look at. So what did I do? It wasn't easy at first until I found some helpful sites on the internet.

Identify Font From Image

A site to help you discover what a font is from an image:

http://www.myfonts.com/WhatTheFont/

The above website allows you to idenfy a font by uploading an image of the font then asking a series of questions about what letter is what. A tip is to take an image of the font that is about 14 characters long and save it as a .jpg before uploading to that site.

Identify Font by Answering Questions

Here is another site that will help you figure out what a font is just by answering a series of multiple choice questions about the font in question:

http://www.identifont.com/

Just answer the first question on that page on the left site and keep on going until it gives you the answer you were seeking with several alternative fonts from which your font will most likely be one of.

Summary

I used both above methods successfully after years of having issues identifying fonts, so I thought I should share them.

How to Add Custom Fonts to Windows

Here we discuss how to add fonts to your Windows OS. You may find this necessary to use new fonts in Photoshop or any other program running under the Windows OS.

Here are the simple steps:

  1. download the .ttf file from any free fonts website such as one I found here: http://www.dafont.com/
  2. unzip the file you download from dafont.com and from your Windows desktop, simply double click on the .ttf file(s) one at a time and Windows will know what to do with them. You'll only have to click the "Install" option in the pop up window that opens when you double click on the .ttf file.

Summary

Yes, that's really all there is to do! Now open your Photoshop or other program you wanted to use a custom font in and it will be there now! Just like magic!

How to Add Custom Fonts to Any Website

Today we are exploring how to add custom fonts to any website including WordPress. First let's take a quick look at the basic available font formats:

Font Formats:

TTF - Works in Firefox and most decent browsers but does NOT work IE and iPhone.
EOT - IE only because they have to be difficult.  EOT is an acronym for Embedded Open Type. The format was created by Microsoft (the creator of @font-face) over 15 years ago. It’s the only format that IE8 and below will recognize when using @font-face.
WOFF - Web Open Font Format. Created for use on the web, and developed by Mozilla, it is the compressed, emerging standard. Should soon work with ALL modern browsers!
SVG - SVG or Scalable Vector Graphics fonts are For iPhone/iPad. Its the only format allowed by Safari version 4.1 and below. iPhoneSVG fonts are basically for older versions of iOS Safari (3.2-4.1).

Here is how to embed custom fonts on your website using the @font-face property of CSS:

  1. First be sure to have at least a true type font file and a .woff file because .woff is for modern browsers including Firefox while true type fonts are for some versions of Firefox, safari, android, etc. browsers. so if you only have a .ttf file for your new font, use an online file converter to convert the .ttf file to a .woff file like the one found HERE: http://everythingfonts.com/ttf-to-woff
  2. find your site's main CSS style sheet and add the following code to the start of the file:
      @font-face{
    font-family: 'shapefont';
    src:  url('fonts/OptimusPrinceps.woff') format('woff'), /* Modern Browsers */
    url('fonts/OptimusPrinceps.ttf')  format('truetype');/* Safari, Android, iOS */
    }
  3. Then simply declare your font wherever needed in the site's css sytles using the new font-family you created so an example CSS delaration for the above font which I named "shapefont" would be:
    font-family: shapefont;

NOTE: if you copy and paste, you'll need to replace all quotes, single and double because this site uses fancy ones that don't work with CSS code.

Using Free Web Font Kits from FontSquirrel.com

A quick and easy way to make sure that you have fonts that will work in all browsers and devices is to include all four basic font types, tff, wof, eot and svg. An easy way to assure that you can get all four in a nicely wrapped font kit is to use Font Squirrel. Here are the simple instructions for geting a complete free font kit from Font Squirrel:

  1. Go to http://www.fontsquirrel.com/fonts/list/find_fonts and you'll see a list of the fonts available through Font Squirrel.
  2. Click on one of the fonts(not on the download button because that is for one font type only).
  3. Then select the "webfont kit" tab on that font's page.
  4. Make sure that all 4 file types are checked then click on the button that reads "DOWNLAD @FONTFACE KIT" and click "ok" to download to your computer.
  5. Unzip the zip file on your desktop and open it. You'll see a file named "How_to_use_webfonts.html" which will have step by step instructions on how to install the fonts from here.

A Sure-Fire Method to Make your Font Work

I understand that the instructions from Font Squirell can be a little vague, so here is my sure-fire method for installing a web font kit and this method will work with fonts from anywhere by the way.

  1. After you have your font files(steps 1-5 above). Make a new folder on your desktop named "mysite".
  2. put your HTML page or a test HTML page into your "mysite" folder.
  3. Inside of the head tags in your HTML page, add:      <!--Custom fonts:-->
        <link rel="stylesheet" href="font.css" type="text/css" charset="utf-8" />
  4. Create a new CSS file called font.css and paste the following code into it: @font-face{
    font-family: 'MyFont';
    src: url('WebFont.eot');
    src: url('WebFont.eot?iefix') format('eot'), url('WebFont.woff') format('woff'), url('WebFont.ttf') format('truetype'), url('WebFont.svg#webfont') format('svg');
    }
  5. In line two of the above code, where font-family is declared, change "MyFont" to whatever you want to call your new font. This is the name you will use to call your font by in your regular style sheet.
  6. Save the font.css file and put it inside your "mysite" folder with your HTML page.
  7. Move your .wott, .eot, .ttf and .svg font files into the same "mysite" folder as the HTML and CSS files. If you are using a Font Squirrel kit, open the folder you unzipped earlier, find the "web fonts" folder inside and select the one you want. There are different types such as light, medium, bold etc. for most fonts. You may choose to install more than one type. If so, simply repeat the process for each type and give it a unique font-family name. If you're not sure which folder has your font files, use the one that ends with "regular_macroman" and open it. copy the .svg, .eot, .wott and .ttf files into your "mysite directory."
  8. Take the name you named your custom font(originally MyFont") in steps 4 & 5 above and use it in your web page's CSS style sheet. If you don't have one yet, create a new file called style.css and add the following code to it:

    body{
    font-family: "MyFont";
    }

  9. Save your style sheet as style.css if you made a new one. If you had an existing CSS file already, modify the font-family declarations you want to include the custom font name you created for "MyFont". Simply replace whatever comes after "font-family:" with the name of your new font wherever you want to use it and you are done!

 Summary

That's really all there is to it. The Font Squirrel method just described was made simple by putting everything in the same folder. You'll probably desire a different structure, so be sure to change any file paths accordingly if you do so. If you're doing this to a WordPress website, just locate your current theme's style.css file and add the @font-type declaration shown above to the top of the file then add the font you named wherever you like in the site using the font-family declaration. It's easy as pie! Good Luck!