CTS logo
hazy blue Catskill Mountains in distance

A Thought…

A man reaches a certain age where he doesn’t want any drama. He doesn’t want to fight with anyone, but if he’s forced to, you should know that he will NOT fight fair, he will not quit, and there are no weapons he won’t use.

Best to leave him alone with his coffee, bourbon, and cigars. Don’t poke the old men. They will hurt you.

   — unknown

Compositing Logos and Accented Letters

Some logos and made-up letters simply have to be done graphically, but others can be done with clever manipulation of ordinary text. For example, the gold standard for quality text markup is L A Τ Ε Χ . It is an extension of Donald Knuth’s Τ Ε Χ markup language. Would you like to see that in a larger text size: L A Τ Ε Χ and Τ Ε Χ . OK, show’s over. The HTML and PHP code to do this (large size):

<span style="display: inline-block; position: relative; font-family: Times-New-Roman,serif; height: 2ex; width: 2.25em;"> <span style="left: 0em; bottom: -0.9ex; position: absolute;">L</span> <span style="left: 0.38em; bottom: -0.25ex; position: absolute; font-size: 70%;">A</span> <span style="left: 0.63em; bottom: -0.9ex; position: absolute;">&Tau;</span> <span style="left: 1.17em; bottom: -1.35ex; position: absolute; font-size: 90%; font-weight: 600;">&Epsilon;</span> <span style="left: 1.58em; bottom: -0.9ex; position: absolute; ">&Chi;</span> </span> <span style="display: inline-block; position: relative; font-family: Times-New-Roman,serif; height: 2ex; width: 1.5em;"> <span style="left: 0em; bottom: -0.9ex; position: absolute;">&Tau;</span> <span style="left: 0.57em; bottom: -1.35ex; position: absolute; font-size: 90%;">&Epsilon;</span> <span style="left: 0.98em; bottom: -0.9ex; position: absolute; ">&Chi;</span> </span>
 
// $base is the upward adjustment ('ex' units), as larger font sizes seem // to bring the baseline down a bit too much // $right is the rightward adjustment ('em' units) of where the following // text starts, as larger font sizes seem to need a little shrinkage (neg) // TeX and LaTeX logos function LaTeX($base = 0, $right = 0) { print "<span style=\"display: inline-block; position: relative; font-family: Times-New-Roman,serif; height: 2ex; width: ".(2.10+$right)."em;\"> <span style=\"left: 0em; bottom: ".($base-1.0)."ex; position: absolute;\">L</span> <span style=\"left: 0.38em; bottom: ".($base-0.35)."ex; position: absolute; font-size: 70%;\">A</span> <span style=\"left: 0.63em; bottom: ".($base-1.0)."ex; position: absolute;\">&Tau;</span> <span style=\"left: 1.17em; bottom: ".($base-1.45)."ex; position: absolute; font-size: 90%;\">&Epsilon;</span> <span style=\"left: 1.58em; bottom: ".($base-1.0)."ex; position: absolute; \">&Chi;</span> </span>\n"; } // end of LaTeX() function TeX($base = 0, $right = 0) { print "<span style=\"display: inline-block; position: relative; font-family: Times-New-Roman,serif; height: 2ex; width: ".(1.55+$right)."em;\"> <span style=\"left: 0em; bottom: ".($base-1.0)."ex; position: absolute;\">&Tau;</span> <span style=\"left: 0.57em; bottom: ".($base-1.45)."ex; position: absolute; font-size: 90%;\">&Epsilon;</span> <span style=\"left: 0.98em; bottom: ".($base-1.0)."ex; position: absolute; \">&Chi;</span> </span>\n"; } // end of TeX()


Did you ever see the movie This is Spi n ¨ al Tap? No, I haven’t, either, but it’s of interest because they use an accented letter you won’t find in any font: n + diaesersis (umlaut). Here it is, bigger, if you want to shout it out: Spi n ¨ al Tap. Spi n ¨ al Tap! Some day I’ll get a good blackletter/fraktur/gothic font to use with this example. And the HTML and PHP code to create just the one letter (again, the large text):

<span style="display: inline-block; position: relative; height: 2ex; width: 0.3em;"> <span style="left: 0.035em; bottom: -0.8ex; position: absolute;">n</span> <span style="left: 0.10em; bottom: -0.7ex; position: absolute; ">¨</span> </span>
 
// n + diaesersis (umlaut) per Spi\:{n}al Tap // $e is the encoding string ('UTF-8', etc.) // $n is which font you're actually using at this time, // to fine tune the vertical spacing function nUml($e, $n, $base = 0, $right = 0) { if ($e == 'Latin-1') { $umlaut = chr(0xA8); } elseif ($e == 'UTF-8') { $umlaut = chr(0xC2).chr(0xA8); } else { // unknown encoding. default to Latin-1 for now $umlaut = chr(0xA8); } $v = '-0.80'; // adjust per $n (units 'ex') print "<span style=\"display: inline-block; position: relative; height: 2ex; width: ".(0.30+$right)."em;\"> <span style=\"left: 0.035em; bottom: ".($base-0.9)."ex; position: absolute;\">n</span> <span style=\"left: 0.10em; bottom: ".($base+$v)."ex; position: absolute; \">$umlaut</span> </span>\n"; } // end of nUml()


Note that the exact vertical spacing of the letter and diaesersis may depend a bit on the font (typeface) in use. And of course, the font needs to provide the accent character (diaesersis/umlaut).

With that to start you off, please share other text-based logo code, new letters, unusual or rare accents with us! Also, improvements to the above code, especially to make it more platform-independent, are welcome.

To read or post in this discussion, click here.

 

All content © copyright 2005 – 2020 by Catskill Technology Services, LLC.
All rights reserved.
Note that Third Party software (whether Open Source or proprietary) on this site remains under the copyright and license of its owners. Catskill Technology Services, LLC does not claim copyright over such software.

 

This page is https://www.catskilltech.com/Discussions/name/compositing/dir/Compositing/discussion_full

Like a quotation you saw earlier, and wish you could see it again? Want to see if there are more quotes from a certain person? Enter the address https://www.catskilltech.com/?quote=term to find a quotation containing that term. Looking for a term of multiple words separated by spaces? Separate the words by +'s: Mark+Twain.

Last updated Thu, 19 Oct 2017 at 10:26 PM

Valid HTML 5

Mon, 26 Oct 2020 at 11:39 PM EDT

Valid CSS