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:
dfn
{
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.
dfn::after
{
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:
dfn:hover
{
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:
dfn:hover::after
{
opacity: 1;
display: block;
position: absolute;
float: left;
max-width:220px;
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? permalinkLike 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 …
more...
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 …
more...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 …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 …
more...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 …
more...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 …
more...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 …
more...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 …
more...| 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 …
more...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 …