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

2022-09-17 23:04:35

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

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

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上是一个插件！

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

第一部分: 基本解决方案

演示: 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

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

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

-水平一半

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

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

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

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

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-]"，插件将完成剩下的工作。

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

HTML:

<p>

    <span class="textToHalfStyle" 
data-halfstyle="hs-base">Half-style, please.</span>
</p>
<p>

    <span class="textToHalfStyle" 
data-halfstyle="hs-horizontal-third">Half-style, please.</span>
</p>
<p>

    <span class="textToHalfStyle" 
data-halfstyle="hs-PeelingStyle">Half-style, please.</span>
</p>

<p style="background-color:#000;">

    <span class="textToHalfStyle" 
data-halfstyle="hs-KevinGranger">Half-style, please.</span>
</p>

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

为半个字符应用CSS样式可能吗？,布布扣,bubuko.com

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

码农公寓

Now on GitHub as a Plugin!

现在在GitHub上是一个插件！

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

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

Part1: Basic Solution

第一部分: 基本解决方案

Part2: Advanced solution - Independent left and right parts

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

Part3: Mix-Match and Improve

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

-Horizontal Half Parts

-水平一半

Demo

-Vertical 1/3 Parts

-垂直1/3

Demo

-Horizontal 1/3 Parts

-水平 1/3

Demo

-HalfStyle Improvement By @KevinGranger

-HalfStyle改进 @KevinGranger

DEMO

-PeelingStyle 改进的 HalfStyle @SamTremaine

Demo and on samtremaine.co.uk

演示 和 samtremaine.co.uk

Part4: Ready for Production

第四部分: 准备生产

Demo of Multiple Half-Styles on the same page.

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

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

相关文章

演示和 samtremaine.co.uk

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

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