CTS logo
hazy blue Catskill Mountains in distance

PDF::Builder v3.009 Released, 27 November 2017

Please see the Free Software section, as well as the PDF::Builder section of the forum.


A Thought…

I like your Christ, I do not like your Christians. Your Christians are so unlike your Christ.

   — Mahatma Gandhi

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 – 2018 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

 

Valid CSS