a picture my son drew of a wave on a beach

The <dfn> tag

When you touch the highlighted word the definition should appear
This is sort of what my attempt at making the <dfn> title appear on mobile looks like

In a previous post (pictured above) I wrote how I would like to enable mobile users to read the title text in the <dfn> tags. I didn’t mention that I also thought I could also use it on the <abbr> tags.

Anyhoo… This is what I did.

First I edited my CSS to allow the <dfn> tag itself to highlight the word so the user knows they can poke it:

cursor: help;
text-decoration: underline dotted;
position: inherit;
border: none;

Then I retrieved the <dfn>s title attribute and used the ::after pseudo element to style it.

display: none;
padding: 1em;
border-radius: 2px;
opacity: 0;
color: var(--text); !important;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--accent-bg);
text-align: center;
content: attr(title);

Then I styled some different aspects of the hover event so the user knows they’ve done something.
This code highlights the word being defined:

color: black !important;
background: white;

Then I changed the pseudo-element from display: none; to display: block; the definition is displayed according to the styles here:

opacity: 1;
display: block;
position: absolute;
float: left;
width: 50vw;

I am not happy with placement, it hangs off to the left. I played around with the position property with limited success. Ideally I would make it pop up above the word it is defining and not to the left beneath the users hand.

Some time down the track I think a better understanding of the CSS positioning and the pseudo-elements may help me work out the positioning problem. Unless you have any better ideas?

I’ve added an email comment link to my posts, go ahead and tell me where I can improve this.

Have a comment?
tagged with: meta html css

Previous Posts ...

Write thoughts

tagged with: writing meta

Like pretty much all the posts on this blog this one represents another unfinished thought. I am prompted to write this because I re-read my previous post, Showies. In it I began with my usual nostalgic claptrap before wending my way into my experience of the Silver City Show. I …



tagged with: family walking meta
A blurry old photo of my Mum in hiking boots and red socks standing by an estuary
My Ma living by the latin phrase, Solvitur Ambulando

Even though it looks like my Mum is about to cheekily poke her tongue out at the photographer it reminds me of Ivan Bilibin’s beautiful illustration which I used on this post and currently on my 404 error page.

Thinking …



tagged with: meta

A quick note because I have to get out the door and go to work… gah.

I recently removed the restrictions on my robots.txt file.

This site has been denying access to most bots for the past year:

# Welcome to Tregeagle

User-agent: archive.org_bot
Allow: /

User-agent: ia_archiver …

Back in Broken Hill

tagged with: broken hill meta html

I got back into Broken Hill on Saturday night and slept like the dead. That journey home absolutely kills. Yesterday I just loved being home. Having a shower in my own shower, eating with Re & H on the couch, watching some telly and going to bed. In my own freaking …


Worn Out

tagged with: health meta mapping dog running

My apologies, the site looks a bit of a mess at the moment. I am rewriting the html template and making use of simple.css which I quite like. I want the underlying HTML to also be simple. I made a start but simply ran out of time. I’ll …



tagged with: meta

In the endless cycle of tinkering with this website I have once again changed things around. I had a go at modifying a bash script (BLASH) to parse my markdown files into the html files you’re now looking at. Very quickly the loops and structures became ungainly. No doubt …



tagged with: meta travel

After Chalkahlom mentioned Syncthing on the microblog the other day I think I have found a possible workflow for this blog. So here I am with a keyboard plugged into my phone…

R and I just spent a night in an Airbnb here in Byron Bay. The decor is straight …


My Nikola cheat card

tagged with: meta

I am exceedingly lazy and my desire to retain knowledge of how my own blog works is dismal. For my own benefit I made a cheat sheet to remind me what I do when I feel like harking on about some crap on this site. I am edging towards doing …


Again again

tagged with: meta

| Here I am starting again with another fresh blog. | My aims for this thing have changed once again. Now I’m using Nikola, a python based static site generator. It’s a bit more complex than I really wanted but I’m less inclined to build my own scripts these …


1st Post Again

tagged with: meta

Why is it all so fucking hard?
I am not reinventing the wheel. I just wanted a simple way to post text and the odd picture online. I do not want to post via some ‘service’ in which I end up being owned by them. I did not want to …


Page 1 / 2 »