Guys this question is related to this one > Apply CSS to the words in a paragraph written in brackets (parenthesis)
As the databse is not in my control, i'm trying to find some alternatives. Is there a way in CSS to count the number of characters in a sentence and then apply CSS to the rest of the characters?
1ch = width of a "0" (zero)
1ex = height of an "x" (lower case)
ex seems more accurate. Like #BoltClock♦ said, it's not counting, but it's a way to limit the number of characters. I'd try to "do some CSS with the rest" but OP was not specific, and frankly, I have no idea.
Update
The best I can come up with is putting the remaining text in a :after and then style the content.
p.fifteen { max-width: 15ex; outline: 1px solid red; }
p.seventeen { max-width: 15ch; outline: 1px solid red; }
p.fifteen:after { content: 'fghijklmnop'; font-size: 36px; color: red; }
p.seventeen:after { content: 'hijklmnop'; font-variant: small-caps; font-weight: 900; }
<p class="fifteen">123456789abcde</p>
<p class="seventeen">123456789abcdefg</p>
You'll need JavaScript to do that just use somestring.length like so:
var someString= 'abc';
var str = someString.length;
console.log(string);
Result: 3
Check this out for more info http://www.quirksmode.org/js/strings.html
or jQuery method is:
Html
<div id="selector">Some Text</div>
jQuery
$('#selector').text().length;
Related
I'm trying to do somewhat of the opposite of the <q> tag. The q tag visually displays quotes in the web page, but if you copy paste the text, the quotes are not present in the pasted text. I want the opposite - no visual quotes in the web page, but quotes are present in the copy pasted text.
Why? Because I sometimes prefer to use other visual styles in my webpage instead of quotes. But when a user copies the text, since I cannot rely on them pasting the text into something capable of preserving the rich formatting/styles, I wish to revert to using quotes because they're simple ascii characters which will work in any plain text context.
I'll give a concrete example to help clarify.
Given:
.qq { background-color: yellow; }
I am <span class=qq>some quoted</span> text.
When the user views the page, they should see:
But if they were to copy the text and then paste it somewhere, the pasted text would be:
I am "some quoted" text.
Is it possible via just css? I'd prefer not to use js.
I don't really care what the html/css needs to be, so if quotes, or the q tag etc... need to be present in the html source instead of a span, that's totally ok.
The only way I can think of without JS is to put the quotes in the markup and hide them using CSS. The markup will get a bit messy though. Something like:
.lq,
.rq {
font-size: 0;
color: transparent;
}
I am <i class="lq">“</i>some quoted<i class="rq">”</i> text.
using JS you can do this way
window.addEventListener("copy", (e) => {
event.preventDefault();
const selection = document.getSelection();
let selectedText = selection.toString();
let selectedTextWithQuotes = `"${selectedText}"`;
// FOR SAVING IN CLIPBOARD
event.clipboardData.setData("text/plain", selectedTextWithQuotes);
});
Using only css you could use transparent double quotes:
.qq { background-color: yellow; }
quote {
display: inline-block;
width: 0px;
color: transparent;
}
I am <quote>"</quote><span class=qq>some quoted</span><quote>"</quote> text.
UPDATE
A not recommended alternative. It is compatible with 75% of browsers. (I'm referring to the # font-face: size-adjust property), but it's an alternative.
For the main font you create a character set that includes only the double quote, but with the size-adjust property at 0%. The remaining text will be rendered with the secondary font.
I am "some quoted" text.
#font-face {
font-family: 'myFont';
src: url(https://fonts.gstatic.com/s/crimsonpro/v23/q5uUsoa5M_tv7IihmnkabC5XiXCAlXGks1WZzm1MP5s-.woff2) format('woff2');
unicode-range: U+0022;
size-adjust: 0%;
}
.yourBody {
font-family: myFont, 'courier new';
}
.qq { background-color: yellow; }
<div class="yourBody">
I am "<span class=qq>some quoted</span>" text.
</div>
.quote-character-left {
margin-right: -0.5em;
opacity: 0;
}
.quote-character-right {
margin-left: -0.5em;
opacity: 0;
}
.quote-text {
display: inline;
background-color: yellow;
}
<p>I am <span class="quote-character-left">"</span><span class="quote-text">some quoted</span><span class="quote-character-right">"</span> text.</p>
While working in css I had faced one issue.
The character with same number of length has difference in pixel values.
<html>
<div>
<p><b>WWWWW</b></p>
<p><b>IIIII</b></p>
<p><b>AAAAA</b></p>
</div>
</html>
WWWWW
IIIII
AAAAA
Both has same [5] character length.
How we can adjust them in CSS?
You can use font-family: monospace;
This will use a font that reserves the same horizontal space for each letter, regardless of their actual width
* {
font-family: monospace;
}
<div>
<p><b>WWWWW</b></p>
<p><b>IIIII</b></p>
<p><b>AAAAA</b></p>
</div>
In my example that font will be applied to all text, but you can of course restrict it to particular element/s by using a tag, class or ID selector (or any combined selector you come up with) instead of the * selector in the CSS rule I used.
You can't do it in CSS, the maximum you can specify is font-family: monospace. Here you have a JS solution.
HTML:
<div class="scaled">WWWWWWWWWW</div>
<div class="scaled">IIIIIIIIII</div>
<div class="scaled">AAAAAAAAAA</div>
CSS:
.scaled > span {
display: inline-block;
width: 20px;
border: 1px solid lightgray;
text-align: center;
}
JAVASCRIPT:
$('.scaled').each(function(){
let $scaled = $(this);
let chars = $scaled.text().split('');
let charsSpans = chars.map((char) => $('<span>' + char + '</span>'));
$scaled
.empty()
.append(charsSpans);
});
I have a simple style like this,
.codecontain{
padding: 10px;
background-color: #34495e;
color: #ecf0f1;
max-width: 200px;
border-radius: 10px;
}
and I would like to display a code in it like this,
<div class="codecontain">
<p><hr></p>
</div>
but when I do it HTML displays the result but I want HTML to show text.
I know there are syntax highlighters but I don't want to use them.
Adding to André's answer, here's a codepen, his answer is correct.
<div class="codecontain">
<p><hr></p>
</div>
http://codepen.io/anon/pen/wGwKqe
Another approach would be using
<xmp></xmp>
as suggested here How to print code on HTML
Be careful as xmp is deprecated.
also, possible duplicate
You have to replace the < with < and the > with >.
If you do not want to do it manually you could use some javascript to convert it.
I wrapped the html in comments (and removed the comments in js) for two reasons. One is to avoid having the html rendered normally and then overwritten, and the seconds so that you can have invalid html as you did. (the hr element is not valid inside a p so the browser would correct it and the script would show the corrected html)
var code = document.querySelectorAll('.codecontain');
Array.prototype.forEach.call(code, function(node) {
node.textContent = node.innerHTML.slice(4,-3);
});
.codecontain {
padding: 10px;
background-color: #34495e;
color: #ecf0f1;
max-width: 200px;
border-radius: 10px;
white-space: pre;
}
<div class="codecontain"><!--
<p><hr></p>
--></div>
I'd like to style niqqud characters inside html differently than the letter.
Suppose I'd like to have Hebrew letter Bet black while Dagesh in it green.
How can this be made in html+css?
This doesn't do the task:
<div style = "font-size: 500%">
<span style = "color: black">ב</span><span style = "color: red">ּ</span>
</div>
It results in : http://jsfiddle.net/nv7ja459
(link with bigger font: http://jsfiddle.net/nv7ja459/1/)
So the dagesh is no more inside the letter.
Link to screenshot https://drive.google.com/file/d/0B4SYIrNV4hXYZ0ZyWXZnZWg4OGc/view?usp=sharing
The main issue here is that when you wrap the dagesh, niqqud or other diacritic in a span (to style it) - the browser no longer knows which consonant it was attached to.
Because of this, it cannot position it correctly. For example, vav is much narrower than shin. Let's say the browser positions qamats 5px to the right when attached to a vav and 10px to the right when attached to a shin. When you wrap qamats in a span the browser does not know which consonant it is attached to and therefore does not know how far to move it to the right. So it just gives up and doesn't move it to the right at all. Hence, why, when you wrap vowels, etc in a span the position is messed up.
You can color different letters differently without messing up positioning as long as each consonant is inside the same span as any any attached vowels / diacritics. You can also color the first letter (including its vowel) differently using the ::first-letter CSS selector.
Finally, you can use a layering approach as discussed in Jukka's answer when a consonant and its attached diacritics need to be colored differently. I have added a more thorough example to my code snippet.
I tried with SVGs to see if they offered a better solution. But SVG's suffer from the exact same problem.
PS Can you spot the deliberate spelling mistake in shalom? :D (AKA I cannot be bothered to fix it)
.example-one {
font-size: 100px;
}
.example-one .one {
color: red;
}
.example-one .two {
color: green;
}
.example-one .three {
color: pink;
}
.example-one .four {
color: blue;
}
.example-two {
font-size: 100px;
}
.example-two::first-letter {
color: orange;
}
.example-three-a, .example-three-b {
font-size: 100px;
position: absolute;
right: 0;
}
.example-three-a {
color: red;
z-index: 1;
}
.example-three-b {
color: green;
}
<div class="example-one" dir="rtl">
<span class="one">שָׁ</span><span class="two">ל</span><span class="three">וּ</span><span class="four">ם</span>
</div>
<div class="example-two" dir="rtl">שָׁלוּם</div>
<div class="example-three-a" dir="rtl">שלום</div>
<div class="example-three-b" dir="rtl">שָׁלוּם</div>
The example is displayed in different ways in different browsers, depending on many things including the font(s) used. For example, in my test on Win 7, Firefox shows a bet with dagesh in all black, whereas Chrome and IE show a black bet with a red dagesh that is badly or very badly displaced.
There is no reason why your approach would not work. Neither is there any specification requiring that it should work. Browsers (and other rendering software) can display the combination using a single precomposed glyph, in which case the glyph will obviously be in one color. They can also display the base character and the diacritic mark separately; this could result in the desired rendering, but positioning a diacritic mark is a real challenge, and browsers often fail.
This means that you need a trick of some kind.
A relatively simple trick is to have content that has both the base character (bet in this case) and a combination of the base character and a diacritic mark (here dagesh), set different colors on them, and superimpose them so that the base character is topmost. The main objection is logical: the document then contains the base character appearing with no reason (except the visual rendering). Assuming this is acceptable, here’s how to do it:
[Code edited Dec 16, 2020, to make both of the inner elements absolutely positioned.]
<style>
.colcomb { position: relative }
.colcomb .base, .colcomb .combined { position: absolute; left: 0; top: 0; }
.colcomb .base { z-index: 200; }
.colcomb .combined { z-index: 100; }
.colcomb .combined { color: red; }
</style>
<div style = "font-size: 500%">
<span class="colcomb">
<span class="base">ב</span>
<span class="combined">בּ</span>
</span>
</div>
This will work:
<font color='green' size='12'>ּ</font><font color='black' size='12'>ב</font>
tested on chrome and firefox, if its red you want the dot instead of green just change the green to red
the font size is at 12 just to make it visible, you can remove that also
http://i.imgur.com/smkx3MN.png - Screenshot for how it looks for me
Are there any useful techniques for reducing the repetition of constants in a CSS file?
(For example, a bunch of different selectors which should all apply the same colour, or the same font size)?
Recently, variables have been added to the official CSS specs.
Variables allow you to so something like this :
body, html {
margin: 0;
height: 100%;
}
.theme-default {
--page-background-color: #cec;
--page-color: #333;
--button-border-width: 1px;
--button-border-color: #333;
--button-background-color: #f55;
--button-color: #fff;
--gutter-width: 1em;
float: left;
height: 100%;
width: 100%;
background-color: var(--page-background-color);
color: var(--page-color);
}
button {
background-color: var(--button-background-color);
color: var(--button-color);
border-color: var(--button-border-color);
border-width: var(--button-border-width);
}
.pad-box {
padding: var(--gutter-width);
}
<div class="theme-default">
<div class="pad-box">
<p>
This is a test
</p>
<button>
Themed button
</button>
</div>
</div>
Unfortunately, browser support is still very poor. According to CanIUse, the only browsers that support this feature today (march 9th, 2016), are Firefox 43+, Chrome 49+, Safari 9.1+ and iOS Safari 9.3+ :
Alternatives :
Until CSS variables are widely supported, you could consider using a CSS pre-processor language like Less or Sass.
CSS pre-processors wouldn't just allow you to use variables, but pretty much allow you to do anything you can do with a programming language.
For example, in Sass, you could create a function like this :
#function exponent($base, $exponent) {
$value: $base;
#if $exponent > 1 {
#for $i from 2 through $exponent {
$value: $value * $base;
}
}
#if $exponent < 1 {
#for $i from 0 through -$exponent {
$value: $value / $base;
}
}
#return $value;
}
Elements can belong to more than one class, so you can do something like this:
.DefaultBackColor
{
background-color: #123456;
}
.SomeOtherStyle
{
//other stuff here
}
.DefaultForeColor
{
color:#654321;
}
And then in the content portion somewhere:
<div class="DefaultBackColor SomeOtherStyle DefaultForeColor">Your content</div>
The weaknesses here are that it gets pretty wordy in the body and you're unlikely to be able to get it down to listing a color only once. But you might be able to do it only two or three times and you can group those colors together, perhaps in their own sheet. Now when you want to change the color scheme they're all together and the change is pretty simple.
But, yeah, my biggest complain with CSS is the inability to define your own constants.
You should comma seperate each id or class for example:
h1,h2 {
color: #fff;
}
You can use global variables to avoid duplicacy.
p{
background-color: #ccc;
}
h1{
background-color: #ccc;
}
Here, you can initialize a global variable in :root pseudo class selector. :root is top level of the DOM.
:root{
--main--color: #ccc;
}
p{
background-color: var(--main-color);
}
h1{
background-color: var(--main-color);
}
NOTE: This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes. More Info here
However, you can always use the Syntactically Awesome Style Sheets i.e.
In case Sass, you have to use $variable_name at the top to initialize the global variable.
$base : #ccc;
p{
background-color: $base;
}
h1{
background-color: $base;
}
You can use dynamic css frameworks like less.
Personally, I just use comma-separed selector, but there some solution for writing css programmatically. Maybe this is a little overkill for you simpler needs, but take a look at CleverCSS (Python)
Try Global variables to avoid duplicate coding
h1 {
color: red;
}
p {
font-weight: bold;
}
Or you can create different classes
.deflt-color {
color: green;
}
.dflt-nrml-font {
font-size: 12px;
}
.dflt-header-font {
font-size: 18px;
}
As far as I know, without programmatically generating the CSS file, there's no way to, say, define your favorite shade of blue (#E0EAF1) in one and only one spot.
You could pretty easily write a computer program to generate the file. Execute a simple find-and-replace operation and then save as a .css file.
Go from this source.css…
h1,h2 {
color: %%YOURFAVORITECOLOR%%;
}
div.something {
border-color: %%YOURFAVORITECOLOR%%;
}
to this target.css…
h1,h2 {
color: #E0EAF1;
}
div.something {
border-color: #E0EAF1;
}
with code like this… (VB.NET)
Dim CssText As String = System.IO.File.ReadAllText("C:\source.css")
CssText = CssText.Replace("%%YOURFAVORITECOLOR%%", "#E0EAF1")
System.IO.File.WriteAllText("C:\target.css", CssText)
You can use multiple inheritance in your html elements (e.g. <div class="one two">) but I'm not aware of a way of having constants in the CSS files themselves.
This link (the first found when googling your question) seems to have a fairly indepth look at the issue:
http://icant.co.uk/articles/cssconstants/
CSS Variables, if it ever becomes implemented in all major browsers, may one day resolve this issue.
Until then, you'll either have to copy and paste, or use a preprocessor of whatever sort, like others have suggested (typically using server-sider scripting).
:root {
--primary-color: red;
}
p {
color: var(--primary-color);
}
<p> some red text </p>
You can change color by JS
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
document.documentElement.style.setProperty('--primary-color', 'blue');