CTS logo
hazy blue Catskill Mountains in distance


A Thought…

[A southern] senator was going to vote “the wrong way” on an education bill. A lobbyist took him aside and told him:

“You know, Senator, that at this college, a professor can demand that a student show his or her thesis at any time. And would you believe male and female students matriculate together? Can you imagine what it would be like if they had a syllabus? Not to mention the number of dissertations we can expect to see if you vote to give them funding?”

Senator: “I’ll not vote them one d*mned cent!”

   — Packcratjohn, Doonesbury comic letters

Reminds me of the whispering campaign against a certain politician — that his wife was (gasp!) a thespian!

Compositing logos and accented letters

Posted on 2017-Feb-24 at 11:29:19 by Phil

Sometimes it’s possible to build logos and unusual or rare accented letters through the use of HTML and CSS font selection, sizing, and precise positioning.

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.

Posted on 2017-Feb-24 at 17:11:52 by Phil

There’s a couple of problems that I haven’t yet figured out how to get around. In order to position things appropriately, I use display: inline-block; in the span’s styling. A minor problem resulting is that sometimes the whole thing ends up shifted down, sometimes all the way to the descender bottom. The amount is unpredictable — I’m still trying to figure this one out.

The more serious problem is that the inline-block apparently gives the rendering engine permission to insert a line break before or after the span, to best fit the text to the line. This isn’t a problem when the entire word is within the span (e.g., the LaTeX logo), although it might be if there is punctuation before or after it. A major problem is when an accented character is being formed (such as n + umlaut) — the word may be split before or after this character!

One workable solution is to wrap the entire word (and associated punctuation) in a <nobr>…</nobr> tag set: This is <nobr>Spi<?php nUml(); ?>al</nobr> Tap!

However, the <nobr> tag is deprecated. The suggested solution is to use CSS white-space: nowrap, but this is not the correct solution in this case — we’re not trying to suppress line breaks at whitespace, but within a word! In the interest of getting clean validation, I have not used <nobr> in the code.

I’m still looking for a solution, and suggestions are appreciated.

Posted on 2017-Feb-27 at 03:56:22 by sciurius

Personally, I think that using CSS to compose logos and accented letters is a fun thing, and not to be taken (too) seriously.

Posted on 2017-Feb-28 at 15:23:28 by Phil

Well, if the alternative is to use graphics, this may be viable in some cases (not just “for fun”). For example, text to be greatly scaled may look better with HTML/CSS than as a graphic. Anyway, the idea is to get people thinking about this method, as it may be useful for some. Admittedly, it’s not useful in this forum, as you can’t invoke arbitrary PHP code (it could be added as a BBCode).

Your mileage may vary. No warranties are expressed or implied. Not valid combined with other offers. Limit one to a customer. Offer expires last Wednesday.

Posted on 2017-Mar-01 at 02:26:21 by sciurius

That’s why we have scalable graphics, e.g. SVG.

Posted on 2017-Mar-01 at 09:36:41 by Phil
Last update on 2017-Mar-01 at 19:25:24 by Phil

Useful if 1) your text processing system can embed SVG, and 2) you have the desired font available for SVG to use. I don’t know how serious these constraints are (particularly number 2) in practice. And of course, the source I give is oriented towards HTML/CSS (browsers and their converters to other formats), and not something like LaTeX.

Certainly, I welcome someone re-doing the examples I gave using SVG. Even on-the-fly creation of embeddable pixel graphics (.png, etc., created at the proper scale) are welcome. The whole point of this exercise is to come up with ways other than embedding pixel graphics created at a fixed size into text. They should be seamless (i.e., the viewer can’t tell that they’re not normal text, even under magnification).

Also, don’t forget that not all special punctuation is available under all fonts. For example, while ©, ®, and ™ are widely available, symbols such as ℠ and ℗ may not be.

Posted on 2017-Mar-02 at 04:58:21 by sciurius

The nice thing about SVG (and EPS) is that you can export text as vectorized glyphs so you do not need the font when rendering.

Posted on 2017-Mar-07 at 16:34:58 by Phil

@sciurius, you and others are quite welcome to contribute examples of using SVG code to make logos and rare accented letters for HTML, PDF, and other uses that cleanly scale and are without artifacts. I didn’t mean to imply that only HTML+CSS are permitted, although I would prefer that intermediate file graphics formats be avoided. Graphical logos that cleanly scale would be good, too. The ideal is that a viewer of a page (HTML, PDF, printed) would not notice anything out of the ordinary for a LaTeX logo or an n+umlaut in text, no matter what scale they appear at. How that looks/is handled at the source level is another matter, but should not involve OS-dependent operations (e.g., creating a graphics file on the fly) or anything else that breaks the smooth flow of turning text into a presentation. It is permissible to invoke special code (such as my PHP functions to create HTML and CSS) when processing the source.

Posted on 2017-Mar-08 at 14:46:45 by sciurius
Last update on 2022-Mar-17 at 16:07:00 by Phil

We need to distinguish between font glyphs and arbitrary images.

To create a n plus diaresis ( n̈ ), you can use n&#x308;.

Creating graphics (images) to use as custom glyphs will not work, at least not easily.

Graphical logos e.g. in SVG should display correctly and scale nicely.

Attachments: scale.html and logo-icon.svg

Posted on 2017-Mar-08 at 18:36:45 by Phil

Nice examples of using a combing diacritic (a diaresis) with a letter (n) and an image that scales. Could you please show an example of a LaTeX logo? Can that be done with the the 5 letters in the word, or do you have to describe the outline of each letter (pure graphic)?

Posted on 2017-Mar-09 at 07:41:53 by sciurius

Strictly speaking it should be typeset using the Computer Modern font. Leaving that aside (as it often happens  ;) ) you get something similar to:

<style> .latex sub {   font-size: 1em;   vertical-align: -0.5ex;   margin-left:    -0.1667em;   margin-right:  -0.125em; } .latex sup {   font-size:      0.85em;   vertical-align:  0.15em;   margin-left:    -0.36em;   margin-right:  -0.15em; } </style>   <span class="latex">L<sup>A</sup>T<sub>E</sub>X</span>

Posted on 2017-Mar-09 at 10:02:21 by Phil

Nice job — much simpler than mine (I don’t know why I didn’t try drawing bare letters rather than putting them in divs. Force of habit, I guess.). I adjusted your example to use Times New Roman. That’s available for free on Windows, but I don’t know about Macs or Linux. Is there a CM TTF font family available for Windows use?

<style> .latex { font-family: "Times New Roman",serif; } .latex sub { /* for Epsilon */   font-size: 0.85em;   vertical-align: -0.5ex;   margin-left:    -0.166em;   margin-right:  -0.070em; } .latex sup { /* for A */   font-size:      0.60em;   vertical-align:  0.41em;   margin-left:    -0.42em;   margin-right:  -0.10em; } </style> ... <span class="latex">L<sup>A</sup>&Tau;<sub>&Epsilon;</sub>&Chi;</span>

Also notice that I use Tau, Epsilon, and Chi instead of T, E, and X, as some fonts might have minor differences in appearance. The “A” seems to wander around a little bit when zooming in (Firefox), so that may be an issue.

Well, I’ve never really liked CM. There’s just something “off” about it for me. I’ve seen the TeX/LaTeX logos rendered in many typefaces (such as in books on the subject), so I can’t say whether there’s an “official” face to use. By the way, using “sans-serif” (on Windows/Firefox), it’s quite nice looking.

Three other items in this thread:

  1. While I can use a combining diacritic like &x308; for a diaresis (umlaut), what about other accents that might not be available in a particular font? For example, to write Polish text, I would need an L + /. Would that have to be done graphically (e.g., SVG)?
  2. How about using text in general within SVG, such as in this page? Can the LaTeX logo, for instance, be done almost as easily as with straight HTML+CSS? You might want to do a mixture of SVG text and graphics, such as to build a character such as L + /.
  3. So much for HTML (browser display). What about PDF or image output? As long as you can find an adequate HTML-to-PDF converter, that understands and correctly renders fancy CSS and SVG, it could be done that way. How about with LaTeX itself?

Posted on 2017-Mar-10 at 07:47:40 by sciurius

Is there a CM TTF font family available for Windows use?

CM is a public domain font. You really did not type “CM TTF” into Google :) ?

Also notice that I use Tau, Epsilon, and Chi instead of T, E, and X

Why? Both the TeX and LaTeX logos use ordinary glyphs, not greek ones.

... to write Polish text, I would need an L + /.

Just type Combine L / and you get Ł.

How about using text in general within SVG, such as in this page?

I don’t see the problem/challenge. I use Inkscape for SVG drawing, and you can use fonts and texts as usual. And you have the option to convert the texts as paths (splines) so you do not need the actual font anymore to show the results. Especially handy for logos. I assume other SVG drawing tools can do the same.

Attached a fontless SVG of LaTeX in an arbitrary font.

How about with LaTeX itself?

I have no idea. I stopped being a TeXnician 10 years ago. Nowadays there a more modern variants like XeTeX that can deal with unicode, scalable fonts, pdf, and much more. So I assume there are plenty of ways to do this with *TeX.

Attachment: drawing.svg


All content © copyright 2005 – 2024 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/utils/show.php?link=compositing-logos-and-accented-letters

Search Quotations database.

Last updated Wed, 03 Jan 2024 at 9:27 AM

Valid HTML 5

Thu, 18 Apr 2024 at 10:02 AM EDT