Are distortion effects, such as Illustrator's 'Envelope Distort: Bulge' able to be applied to HTML?

[natelawrence]

I'm currently building a fansite for a series of web videos. 
The title for the series uses Georgia Bold with a fisheye effect applied. 
I've approximated the fisheye effect on the text in Illustrator but had to convert the text to paths to import it into my XD mockup. 

Assuming that I license the typeface for my fansite, is it possible to apply the fisheye effect to HTML text in realtime via CSS or other web standards technology?

If this should be posted somewhere other than the Dreamweaver community, please let me know if there is another Adobe community board where it would be appropriate to ask web-specific questions such as mine. 

[osgood_]

Is it possible to apply the fisheye effect to HTML text in realtime via CSS or other web standards technology?

Not that I know of. Your 'fisheye' text is more like a logo, so use either a svg or gif image.

Personally I don't think there is any point in jumping through hoops unless it can be acheived easily using some simple css. Theres many css text effects which can be applied but I haven't come across a 'fisheye' text effect. I don't really concentrate much on css text effects myself because most are usually quite gimmicky and not necessary. Someone may have come across a similar effect achieved using css, let's hope they respond to your post.

[natelawrence]

Thank you for taking the time to reply. 

I do agree that the text is used as a logo. 

I fear that our philosophies diverge after that point, however.

To my mind, all text on a page ought to be be searchable via the browser's Ctrl+F | Cmd+F functionality.

If the current state of web technology is capable of offering:

- vector shape purity

- faithful geometry

- editability | indexability | searchability

then I will happily accept.

A little extra time to perfect a CSS effect to perfect a logo is worth it to me. 

The concept of the series is to cover all of the games in a particular console's library in order of first release of the games. In other words, the games are sorted by time - chronologically. 

I plan on offering an interface based on Microsoft Live Labs' Pivot control to filter and sort the chapters of the episodes. The content will remain the same, however the order may no longer be by chronology, hence it might be fun to be able name different filterings (e.g. sorting by genre could become "Gentendo", sorting by duration of game coverage [longest first] could become "Longtendo") and present them dynamically to the user who has created a particular sorting method in the logo styling. 

[Nancy OShea]

"To my mind, all text on a page ought to be be searchable..."

===========

I agree with you. And in case you didn't already know, SVG is merely XML code which if put together correctly is searchable.  If I'm not mistaken, <text> wrapped in SVG tags can be translated by robots and indexed by search engines, too.

SVG is self-contained which is important for design aesthetics.  Ordinary CSS styled HTML text can be a bit unruly to work with.

But the real beauty of SVG is that it's math-based, not pixel based.  So you can rescale SVG with CSS to ANY size needed without any loss in quality. 

Source: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

Have a happy new year!

[natelawrence]

It's good to know that SVG can be searchable if formatted correctly. 

I do appreciate the difference between vector and raster graphics. 🙂

If I'm not mistaken, most True Type fonts are also vector-based, so HTML + CSS (text) ought to be no less 'vectory' than SVG, EPS, etc.

In any case, thank you again for your information and well wishes. 

A very good New Year to you as well. 

[osgood_]

To my mind, all text on a page ought to be be searchable via the browser's Ctrl+F | Cmd+F functionality.

EDITED: Actually, in your specific case, the SVG format will be useless to you if you want the text/logo to be searchable by using the Ctrl+F/Cmd+F browser queries because to distort the text/logo into the shape/effect you require will mean turning the actual font into an outline in your graphics program, which then renders the SVG output unsearchable. To be searchable the text needs to be left as a font..........so unless you can find a css solution, its probably not going to be possible, when the font needs to be manipulated to achieve a specific effect.

As has already been confirmed, the SVG 'image' format will be searchable using the browsers Ctrl+F or Cmd+F queries.

Its NOT always possible for a complex corporate logo to be adapted into pure css, unless it is quite simple, that's why SVG is the way forward IF you specifically require certain options like the logo text itself being searchable, easy access to change colors, guaranteed no loss of clarity/sharpness etc. For all other purposes where there are no specific requirements, a png image (not a gif as I first stated in my orginal post) will suffice.

I would recommned SVG format if you have specfic requirments, although I dont regularly use it myself, purely because the code it spits out can be obtuse and bloated and anyone that knows me around these parts knows my dislike for such 'overbearing' solutions. That's not to say SVG is not excellent, it is but if I don't need it and in most cases when introducing a corporate logo into a website I don't,  I will just use a png.

Dont get confused, you can save an SVG from any graphic editing program with an extention format .svg and link it to the page like:

<img src="logo.svg" alt="My Fantastic Company">

In my view that is NOT a real SVG - a real 'searchable' SVG and one that can be 'manipulated' will generate pure code, usually a lot of it, which you then insert into your page. Your graphics program may well be able to produce the pure SVG code for you or you may have to open the resulting .svg in an editor to access the raw code.

[Nancy OShea]

Hi @natelawrence.

Welcome to the Dreamweaver community.

There are a bevy of text distortion effects (static and interactive) that you can use on the web. See link below.

https://speckyboy.com/text-distortion-effects/

That said, you need a font which is specifically licensed for use on the web.  And Georgia Bold doesn't appear to be one that's OK'd for web use.  So CSS is out.

https://fonts.adobe.com/

For your purposes, I think SVG is the best option. And Illustrator is the right tool to create your logo/brand and export to SVG.

Good luck with your project!

[natelawrence]

Hi, Nancy, 

Thank you for the welcome and the link to practical demonstrations of text effects on the web. 

As to the topic of Georgia Pro Bold being licensed for web use, Linotype offers it here: https://www.linotype.com/907695/georgia-pro-bold-product.html?site=webfonts&format=ot-ttf&branding=p...

Thank you again for your encouragement.