Home  >  Article  >  Web Front-end  >  Can CSS Style Half of a Character?

Can CSS Style Half of a Character?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-31 06:54:01163browse

Is it Possible to Apply CSS to Half of a Character?

Problem:

How can we style only one half of a character? For instance, making one half of the letter transparent.

Previous Attempts:

  • Searching for methods to style half of a character
  • Styling part of a character using CSS or JavaScript
  • Applying CSS to 50% of a character

Example:

Can CSS Style Half of a Character?

Solution:

GitHub Plugin:

https://github.com/arbel/half-style

Demo:

http://jsfiddle.net/arbel/pd9yB/1694/

Features:

  • Pure CSS for single characters
  • JavaScript automation across text or multiple characters
  • Preserves text accessibility for screen readers

Basic Solution:

Single Character:

Half Style on text

This solution uses pure CSS and a class named .halfStyle.

Any Text:

Add the class .textToHalfStyle to the element containing the text.

JavaScript Automation:

<code class="javascript">// jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i < chars.length; i++) {
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    }

    // Write to DOM only once
    $el.append(output);
  });
});</code>

CSS:

<code class="css">.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: black; /* or transparent, any color */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    color: #f00;
}</code>

Example Usage:

<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span></code>

The above is the detailed content of Can CSS Style Half of a Character?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn