javascript - 是否可以将CSS应用于字符的一半？(Is it possible to apply CSS to half of a character?)

Question

What I am looking for: (我在寻找什么：)

A way to style 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 (使用CSS或JavaScript设置字符的样式)
• Apply CSS to 50% of a character (将CSS应用于字符的50％)

Below is an example of what I am trying to obtain. (以下是我尝试获取的示例。)

Does a CSS or JavaScript solution exist for this, or am I going to have to resort to images? (为此是否存在CSS或JavaScript解决方案，还是我不得不诉诸图像？) I would prefer not to go the image route as this text will end up being generated dynamically. (我不希望使用图像路线，因为此文本最终会动态生成。)

---

UPDATE: (更新：)

Since many have asked why I would ever want to style half of a character, this is why. (既然许多人问我为什么要对角色的一半进行样式设置，这就是为什么。) My city had recently spent $250,000 to define a new "brand" for itself. (我市最近花费了25万美元为自己定义了一个新的“品牌”。) This logo is what they came up with. (他们想出了这个徽标 。) Many people have complained about the simplicity and lack of creativity and continue to do so. (许多人抱怨简单性和缺乏创造力，并继续这样做。) My goal was to come up with this website as a joke. (我的目标是开个玩笑这个网站 。) Type in 'Halifax' and you will see what I mean. (输入“ Halifax”，您将明白我的意思。)

  ask by Mathew MacLean translate from so

Answer 1

Now on GitHub as a Plugin! (现在作为插件在GitHub上！)

Feel free to fork and improve. (随意分叉和改进。)

Demo | (演示 |) Download Zip | (下载Zip |) Half-Style.com (Redirects to GitHub) (Half-Style.com （重定向到GitHub）)

---

• Pure CSS for a Single Character (单个字符的纯CSS)
• JavaScript used for automation across text or multiple characters (JavaScript用于跨文本或多个字符的自动化)
• Preserves Text Accessibility for screen readers for the blind or visually impaired (为盲人或视障者的屏幕阅读器保留文本可访问性)

Part 1: Basic Solution (第1部分：基本解决方案)

Demo: http://jsfiddle.net/arbel/pd9yB/1694/ (演示： http : //jsfiddle.net/arbel/pd9yB/1694/)

---

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. (您需要做的就是在目标文本上添加一个类，其余的工作都将得到解决。)

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. (纯CSS。) All you need to do is to apply .halfStyle class to each element that contains the character you want to be half-styled. (您需要做的就是将.halfStyle类应用于包含您要半样式设置的字符的每个元素。)

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); (对于每个包含字符的span元素，您都可以创建一个data属性，例如在这里data-content="X" ，在伪元素上使用content: attr(data-content);) so the .halfStyle:before class will be dynamic and you won't need to hard code it for every instance. (因此.halfStyle:before类将是动态的，并且您无需为每个实例进行硬编码。)

Explanation for any text: (任何文字的说明：)

Simply add textToHalfStyle class to the element containing the text. (只需将textToHalfStyle类添加到包含文本的元素中。)

---

 // 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); }); }); 

 .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; } 

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

( JSFiddle demo ) (（ JSFiddle演示 ）)

---

Part 2: Advanced solution - Independent left and right parts (第2部分：高级解决方案-左右独立的部分)

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才能发挥作用。)

 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); }); }); 

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

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

( JSFiddle demo ) (（ JSFiddle演示 ）)

---

---

Part 3: Mix-Match and Improve (第3部分：混搭和改进)

Now that we know what is possible, let's create some variations. (现在我们知道了可行的方法，让我们创建一些变体。)

---

-Horizontal Half Parts (-水平半部)

• Without Text Shadow: (没有文字阴影：)

  

• Possibility of Text Shadow for each half part independently: (每个部分的文本阴影的可能性分别为：)

  

 // 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] + '">' +