Online documentation and examples output are now available for our products
Only football joke I ever got in my entire life was when someone said they were going to make a movie about the OJ Simpson trial, and John Elway was going to play the slow white Bronco.
— michaeljwolff, Non Sequitur comic 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):
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):
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
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)
<nobr>…</nobr> tag set:
<nobr>Spi<?php nUml(); ?>al</nobr> Tap!
<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̈.
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.
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:
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?
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:
Posted on 2017-Mar-10 at 07:47:40 by sciurius
CM is a public domain font. You really did not type “CM TTF” into Google :) ?
Why? Both the TeX and LaTeX logos use ordinary glyphs, not greek ones.
Just type Combine L / and you get Ł.
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.
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.
All content © copyright 2005 – 2023
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/compositing-logos-and-accented-letters.html
Search Quotations database.
Last updated Thu, 08 Dec 2022 at 4:03 PM