CSS Only In-Place Translation

Developer
Yogev Ahuvia
Size
3,336 Kb
Views
30,360
  1. CSS Only In-Place Translation Previews
  2. CSS Only In-Place Translation HTML Codes
  3. CSS Only In-Place Translation CSS Codes

How do I make an css only in-place translation?

Utilzing the <dfn> HTML tag, in-place translation aims to standardize the translation and definition conventions of words or phrases that might require an extra clarification.. What is a css only in-place translation? How do you make a css only in-place translation? This script and codes were developed by Yogev Ahuvia on 11 September 2022, Sunday.

CSS Only In-Place Translation Previews
IQ Test

CSS Only In-Place Translation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Only In-Place Translation</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ dfn[title] { cursor: help; position: relative; font-style: normal;
}
dfn[title]:after { content: '*'; color: lightblue; display: inline; text-align: right; white-space: nowrap; vertical-align: super; font-size: 0.6em; padding-left: 2px;
}
dfn[title]:hover:after { content: " (" attr(title) ")"; min-width: 100%; color: lightblue; vertical-align: inherit; font-size: inherit; padding-left: 0;
}
body { background: #222; color: #eee; font-size: 26px; font-weight: 100; font-family: 'Open Sans', sans-serif;
}
p, hgroup { width: 960px; margin: 20px auto;
}
h1 { font-weight: 700; font-size: 30px; margin-bottom: 0px;
}
h3 { font-weight: 300; font-size: 20px; margin-top: 0px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <hgroup> <h1>CSS <dfn title="and some HTML...">Only</dfn> In-Place Translation</h1> <h3>Hover over words that have an asterix besides them</h3>
</hgroup>
<p>Utilzing the &lt;dfn&gt; HTML tag, in-place translation aims to standardize the translation and definition conventions of words or phrases that might require an extra clarification. For instance, if you read an article and see an acronym like <dfn title="As Far As I Know">AFAIK</dfn>, or a common term like <dfn title="User Experience">UX</dfn>, with in-place translation the reader actually see an alternative defintion along the text, in the original <dfn title="meaning">context</dfn>, allowing them to continue read fluently, with a minimum amount of distractions.</p>
<p>The definable words are marked with small asterixis and does not interfere the readers from their text. The definitions are added inside the original HTML, making also the definitions and the defined words themselves accessible. In addition, this solution is CSS only making it available on any modern <dfn title="browser">web parser</dfn>.</p>
</body>
</html>

CSS Only In-Place Translation - Script Codes CSS Codes

dfn[title] { cursor: help; position: relative; font-style: normal;
}
dfn[title]:after { content: '*'; color: lightblue; display: inline; text-align: right; white-space: nowrap; vertical-align: super; font-size: 0.6em; padding-left: 2px;
}
dfn[title]:hover:after { content: " (" attr(title) ")"; min-width: 100%; color: lightblue; vertical-align: inherit; font-size: inherit; padding-left: 0;
}
body { background: #222; color: #eee; font-size: 26px; font-weight: 100; font-family: 'Open Sans', sans-serif;
}
p, hgroup { width: 960px; margin: 20px auto;
}
h1 { font-weight: 700; font-size: 30px; margin-bottom: 0px;
}
h3 { font-weight: 300; font-size: 20px; margin-top: 0px;
}
CSS Only In-Place Translation - Script Codes
CSS Only In-Place Translation - Script Codes
Home Page Home
Developer Yogev Ahuvia
Username kindofone
Uploaded September 11, 2022
Rating 3
Size 3,336 Kb
Views 30,360
Do you need developer help for CSS Only In-Place Translation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yogev Ahuvia (kindofone) Script Codes
Name
Real-Time Love Meter
Playing At Sunset
Living Interfaces - Talk
Natural Language Accordion Form
Ball Bouncing On Text
CSS Filter Glass
3D Cube of 3D Balls
Playing with fixed header
Triangles From Another Dimension
Spinning Top
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!