为半个字符应用CSS样式可能吗？

时间：2014-06-12 00:26:09 阅读：618 评论：0 收藏：0 [点我收藏+]

标签：des style class code java http

What I am looking for:

A way to apply styling to one HALF of a character. (In this case, half the letter being transparent)

我正在寻找：

一种方法为半个字符应用样式。（在这种情况下，一半的字母是透明的）

What I have currently searched for and tried (With no luck):

Methods for styling half of a character/letter
Styling part of a character with CSS or JavaScript
Apply CSS to 50% of a character

Below is an example of what I am trying to obtain.

我目前已经搜索并尝试的（不走运）：

渲染一半字符/字母的方法
用CSS或JavaScript渲染字符的一部分
对一个字符的50%应用CSS

以下是我尝试实现的一个例子：

bubuko.com,布布扣

Does a CSS or JavaScript solution exists for this or am I going to have to resort to images? I would prefer not to go the image route as this text will end up being generated dynamically.

这个是否有一个CSS或者JavaScript的解决方法存在，还是我必须采用图片的方法？我不愿意采用图片的方法，因为文本将最终是动态生成的。

回答：

Now on GitHub as a Plugin!

现在在GitHub上是一个插件！

bubuko.com,布布扣 Feel free to fork and improve.

Demo | Download Zip | Half-Style.com (Redirects to GitHub)

演示 | 下载 Zip | Half-Style.com (重定向到GitHub)

Pure CSS for a Single Character
JavaScript used for automation accross text or multiple characters
Preserves Text Accessibility for screen readers for the blind or visually impaired

单个字符的纯css
JavaScript用来自动穿过文本或多字符
保护文本的可读性，使其可以被盲人或视障人士使用的屏幕阅读器识别

Part1: Basic Solution

第一部分: 基本解决方案

bubuko.com,布布扣

演示: http://jsfiddle.net/pd9yB/817/

This works on any dynamic text, or a single character, and is all automated. All you need to do is add a class on the target text and the rest is taken care of.

这种方法适用于任何动态文本或单个字符，并且都是自动适用的。所有你需要做的就是在目标文本上添加一个class，剩下的就解决了。

Also, the accessibility of the original text is preserved for screen readers for the blind or visually impaired.

同时，保留了原文的可访问性，可以被盲人或视障人士使用的屏幕阅读器识别。

Explanation for a single character:

Pure CSS. All you need to do is to apply .halfStyle class to each element that contains the character you want to be half-styled.

For each span element containing the character, you can create a data attribute, for example here data-content="X", and on the pseudo element use content: attr(data-content); so the .halfStyle:before class will be dynamic and you won‘t need to hard code it for every instance.

单个字符的说明：

纯CSS。所有你需要做的就是把.halfStyle class用在每个你想要渲染一半样式字符的元素上。

对于每个包含字符的span元素，你可以添加一个data属性，比如data-content="X"，并且在伪元素上使用content:attr(data-content)；这样，.halfStyle:before class将会是动态的，你不需要为每个实例进行硬编码

Explanation for any text:

Simply add textToHalfStyle class to the element containing the text.

任意文本说明：

只需添加textToHalfStyle 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;
}

HTML

<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>

To make it automated, simply add textToHalfStyle class to the element containing the text.

让它自动生效，只要添加 textToHalfStyle class到包含文本的元素上。

jQuery for automated mode:

jQuery 自动模式:

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(‘&lt;span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);"&gt;‘ 
+ text + ‘&lt;/span&gt;‘);
 
        // Reset output for appending
        output = ‘‘;
 
        // Iterate over all chars in the text
        for 
(i = 0; i &lt; chars.length; i++) {
            // Create a styled element for each character and append to container
            output += ‘&lt;span aria-hidden="true" data-content="‘ 
+ chars[i] + ‘"&gt;‘ 
+ chars[i] + ‘&lt;/span&gt;‘;
        }
 
        // Write to DOM only once
        $el.append(output);
    });
});

演示: http://jsfiddle.net/pd9yB/819/

Part2: Advanced solution - Independent left and right parts

第二部分: 先进的解决方案 - 独立的左边和右边部分

bubuko.com,布布扣

With this solution you can style left and right parts, individually and independently.

使用这种方法你可以分别单独的渲染左边和右边部分。

Everything is the same, only more advanced CSS does the magic.

一切都是相同的，只是更高级的CSS在发挥作用。

演示: http://jsfiddle.net/pd9yB/819/

.halfStyle {
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before { /* creates the left part */
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the right part */
    display:block;
    direction: rtl; /* very important, will make the width to start from right */
    position:absolute;
    z-index:2;
    top:0;
    left:50%;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

Part3: Mix-Match and Improve

第三部分: 混合-匹配和改进

Now that we know what is possible, let‘s create some variations.

现在我们知道什么是可能的,让我们来添加一些花样。

-Horizontal Half Parts

-水平一半

bubuko.com,布布扣

Demo

.halfStyle {
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before { /* creates the top part */
    display:block;
    z-index:2;
    position:absolute;
    top:0;
    height: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the bottom part */
    display:block;
    position:absolute;
    z-index:1;
    top:0;
    height: 100%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

-Vertical 1/3 Parts

-垂直1/3

bubuko.com,布布扣

Demo

.halfStyle { /* base char and also the right 1/3 */
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #f0f; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
.halfStyle:before { /* creates the left 1/3 */
    display:block;
    z-index:2;
    position:absolute;
    top:0;
    width: 33.33%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the middle 1/3 */
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 66.66%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}

-Horizontal 1/3 Parts

-水平 1/3

bubuko.com,布布扣

Demo

.halfStyle { /* base char and also the bottom 1/3 */
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: transparent;
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #f0f;
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
.halfStyle:before { /* creates the top 1/3 */
    display:block;
    z-index:2;
    position:absolute;
    top:0;
    height: 33.33%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #fa0; /* for demo purposes */
}
.halfStyle:after { /* creates the middle 1/3 */
    display:block;
    position:absolute;
    z-index:1;
    top:0;
    height: 66.66%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}

-HalfStyle Improvement By @KevinGranger

-HalfStyle改进 @KevinGranger

bubuko.com,布布扣

DEMO

body{
    background-color: black;
}
 
.textToHalfStyle{
    display:block;
    margin: 200px 0 
0 0;
    text-align:center;
}
 
.halfStyle {
    font-family: ‘Libre Baskerville‘, serif;
    position:relative;
    display:inline-block;
    width:1;
    font-size:70px;
    color: black;
    overflow:hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 
white;
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
}

-PeelingStyle 改进的 HalfStyle @SamTremaine

bubuko.com,布布扣

Demo and on samtremaine.co.uk

演示和 samtremaine.co.uk

.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 68px;
    color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    white-space: pre;
    transform: rotate(4deg);
    text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}
.halfStyle:before { /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: -0.5px;
    left: -3px;
    width: 100%;
    content: attr(data-content);
    overflow: hidden;
    pointer-events: none;
    color: #FFF;
    transform: rotate(-4deg);
    text-shadow: 0px 0px 1px #000;
}

Part4: Ready for Production

第四部分: 准备生产

Customized different Half-Style style-sets can be used on desired elements on the same page. You can define multiple style-sets and tell the plugin which one to use.

定制不同的Half-Style样式集可以用在同一个页面的所需元素上。你可以定义多个样式集并告诉插件要用哪一个。

The plugin uses data attribute data-halfstyle="[-CustomClassName-]" on the target .textToHalfStyle elements and makes all the necessary changes automatically.

插件在目标.textToHalfStyle元素上使用data属性data-halfstyle="[-CustomClassName-]"，所有都会自动改变。

So, simply on the element containing the text add textToHalfStyle class and data attribute data-halfstyle="[-CustomClassName-]". The plugin will do the rest of the job.

所以，只要含有文本的元素添加了textToHalfStyle class和data属性 data-halfstyle="[-CustomClassName-]"，插件将完成剩下的工作。

bubuko.com,布布扣

Demo of Multiple Half-Styles on the same page.

相同页面中多个Half-Styles的演示

jQuery(function($) {
    var 
halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;
 
    // Iterate over all class occurrences
    $(‘.textToHalfStyle‘).each(function(idx, halfstyle_el) {
        $halfstyle_el = $(halfstyle_el);
        halfstyle_style = $halfstyle_el.data(‘halfstyle‘);
        halfstyle_text = $halfstyle_el.text();
        halfstyle_chars = halfstyle_text.split(‘‘);
 
        // Set the screen-reader text
        $halfstyle_el.html(‘&lt;span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);"&gt;‘ 
+ halfstyle_text + ‘&lt;/span&gt;‘);
 
        // Reset output for appending
        halfstyle_output = ‘‘;
 
        // Iterate over all chars in the text
        for 
(halfstyle_i = 0; halfstyle_i &lt; halfstyle_chars.length; halfstyle_i++) {
            // Create a styled element for each character and append to container
            halfstyle_output += ‘&lt;span aria-hidden="true" data-content="‘ 
+ halfstyle_chars[halfstyle_i] + ‘"&gt;‘ 
+ halfstyle_chars[halfstyle_i] + ‘&lt;/span&gt;‘;
        }
 
        // Write to DOM only once
        $halfstyle_el.append(halfstyle_output);
    });
});

Also the CSS style-sets‘ class definitions match the [-CustomClassName-] part mentioned above and is chained to .halfStyle, so we will have .halfStyle.[-CustomClassName-]

此外，CSS样式集class的定义匹配上述的 [-CustomClassName-] 部分，并且链到.halfStyle，因此我们将有.halfStyle.[-CustomClassName-]

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

/* start half-style hs-base */
 .halfStyle.hs-base {
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #000; /* for demo purposes */
}
.halfStyle.hs-base:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    pointer-events: none; /* so the base char is selectable by mouse */
    overflow:hidden;
    color: #f00; /* for demo purposes */
}
 /* end half-style hs-base */
 
/* start half-style hs-horizontal-third */
.halfStyle.hs-horizontal-third { /* base char and also the bottom 1/3 */
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: transparent;
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #f0f;
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
.halfStyle.hs-horizontal-third:before { /* creates the top 1/3 */
    display:block;
    z-index:2;
    position:absolute;
    top:0;
    height: 33.33%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #fa0; /* for demo purposes */
}
.halfStyle.hs-horizontal-third:after { /* creates the middle 1/3 */
    display:block;
    position:absolute;
    z-index:1;
    top:0;
    height: 66.66%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}
/* end half-style hs-horizontal-third */
 
/* start half-style hs-PeelingStyle, by user SamTremaine on Stackoverflow.com */
.halfStyle.hs-PeelingStyle {
    position: relative;
    display: inline-block;
    font-size: 68px;
    color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    white-space: pre;
    transform: rotate(4deg);
    text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}
.halfStyle.hs-PeelingStyle:before { /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: -0.5px;
    left: -3px;
    width: 100%;
    content: attr(data-content);
    overflow: hidden;
    pointer-events: none;
    color: #FFF;
    transform: rotate(-4deg);
    text-shadow: 0px 0px 1px #000;
}
/* end half-style hs-PeelingStyle */
 
/* start half-style hs-KevinGranger, by user KevinGranger on StackOverflow.com*/
.textToHalfStyle.hs-KevinGranger {
    display:block;
    margin: 200px 0 
0 0;
    text-align:center;
}
 
.halfStyle.hs-KevinGranger {
    font-family: ‘Libre Baskerville‘, serif;
    position:relative;
    display:inline-block;
    width:1;
    font-size:70px;
    color: black;
    overflow:hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 
white;
}
.halfStyle.hs-KevinGranger:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
}
/* end half-style hs-KevinGranger