CTS logo
hazy blue Catskill Mountains in distance

News:

PDF::Builder v3.022 Released, 27 March 2021
   Please see the CPAN listing, GitHub entry, as well as the PDF::Builder section of the forum.


A Thought…

You can never underestimate the stupidity of the general public.

   — Scott Adams

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

Search Quotations database.

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

Valid HTML 5

Fri, 16 Apr 2021 at 1:35 PM EDT

Valid CSS