Web developers have a ton of design and implementation choices these days. And, as the old saying goes, there's more than one way to skin a cat. Recently, I was on a mission to create a custom heading for one of our division pages at work.

Goal

Replace the default LibGuides h1 for the page with a custom heading of a newsletter's logo. Simple, right?

Options

Text

Text seemed like the most straightforward and semantic way to create a heading and keeping it accessible across devices, browsers, and assistive technologies. And I'm pretty good with CSS, so this would be a fun test of my skill set!

WRONG.

I was fooled into thinking a simple transform: rotate() and transform-origin would get me there. And after fiddling a bit in CodePen, it looked great!

https://codepen.io/digilou/pen/pdovYZ

On LibGuides, not so much. I needed a better option than transform-origin or position: relative; top: 0; left: 0; to make "at the" sit next to "APK & SJM". It did on first development. But testing different viewport sizes proved I was way off with this technique.

Next step?

SVG

Since CSS was giving me varied results in different screen sizes and browsers, it seemed like a good time to flex my newfound SVG knowledge and use that as the next best accessible option. Text and image all-in-one!

Uhm... not as easy as I'd set out to do, either.

First, I tried the inline method. Nope. LibGuides didn't seem to acknowledge my efforts of inserting that into my HTML. Next, I saved the file as an SVG to upload. Added bonus of 1kb file size! Nope. LibGuides doesn't allow SVG file types.

(pause as I bang my head against my desk)

Oooooookaaaayyyy.... last try....

JPEG

After a bit of time wasted experimenting with the first two options, it was time to admit defeat and go with a JPEG file uploaded to LibGuides and insert it into the page.

Not elegant, right? A bit grainy when zoomed in and weighty file (43kb) to maximize the "clarity", but at least a description is added via alt text and a keeping a white background accommodates high contrast settings.

Sigh. Well, at least my mission has been fulfilled, right?

Your Solution?

This is not a new problem in web design. We've been trying to solve it for the last few decades.

There is much I have to learn. Let me know how you've resolved this problem in the past.