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的解决方法存在，还是我必须采用图片的方法？我不愿意采用图片的方法，因为文本将最终是动态生成的。
回答：
Feel
free to fork and improve.
- 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:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
.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
?
1
2
3
4
5
6
7
8
9
10
|
<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 自动模式:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
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" data-content="‘
+ chars[i] + ‘">‘
+ chars[i] + ‘</span>‘;
}
// 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/
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
.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
-水平一半
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
.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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
.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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
.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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
.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的 演示
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
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(‘<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">‘
+ halfstyle_text + ‘</span>‘);
// Reset output for appending
halfstyle_output = ‘‘;
// Iterate over all chars in the text
for
(halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i++) {
// Create a styled element for each character and append to container
halfstyle_output += ‘<span aria-hidden="true" data-content="‘
+ halfstyle_chars[halfstyle_i] + ‘">‘
+ halfstyle_chars[halfstyle_i] + ‘</span>‘;
}
// 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-]
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
|
HTML:
?
1
2
3
4
5
6
7
8
9
10
11
12
|
<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
时间： 2024-10-25 21:28:33
Feel
