Can you think of a way to replace all characters of a paragraph/string with another text or unicode chars using css? My point is to show this text as "obfuscated"/hidden.
Let's say I have a paragraph, I would like every character to be replaced with a unicode char like this: http://www.fileformat.info/info/unicode/char/2588/index.htm. This is one way but I couldn't implemented without javascript. Another way I thought is using SVGs, but I am not able to think of a more specific way.
Right now, we use Blokk font and it works great, but I want to do it without having to do an extra call for one more font.
I know this is mostly a theoretical question, so I don't expect you to provide me the exact answer with code. I would rather know if someone has an idea that I could work on.
You could use background-color and set it to the same color as the text itself. This doesn't actually change the content, but may give the results you are looking for.
For example:
.hidden {
background-color: #000;
}
.hidden:hover {
background-color: transparent;
}
<p>
Here is some <span class="hidden">hidden</span> text.
</p>
Related
After using p::first-letter I cant make p::selection, because it works only to other letters, not including first.picture of site. How can I gat access to the selection of first letter?
I've tried to do smth like this: p::first-letter::selection{}, but as we know we can't use more than one pseudo element.
Unfortunately you are right and there is no way of chaining pseudo elements. As far as I know the only way to achieve what you are trying to do is by wrapping the first letter in a <span> or similar and put the styling onto there.
If your content comes from a CMS or similar you'll probably also need some JavaScript to dynamically render it around the first letter.
span {
font-size: 2rem;
}
::selection {
color: red;
}
<p>
<span>H</span>ello
</p>
I have tables in which I want to represent negative numbers as red text. The problem is that in the print preview the color is not applied to the first letter.
I have CSS rules in a media print block. I have tried to put the number in a span and applied the redText class to both the span and the td itself. I have tried to apply the color to the class element and every subsequent element.
#media print {
.redText, .redText * {
color: #f44336 !important;
}
}
The html is:
<td class="textRight band0Bchange_ue_04 redText">
<span class="redText">-1,566</span>
</td>
This is the HTML in the regular view where the color is rendered correctly. I am not sure whether is possible to inspect the elements in the print preview.
Edit: The issue is caused by the Material Design library. I have put the relevant html and css into a jsFiddle. This works well. Once I add material.min.css the print breaks with the behaviour as described above.
https://jsfiddle.net/goldrydigital/8fzby8aq/2/
I have added a print preview on the jsfiddle.
https://jsfiddle.net/goldrydigital/8fzby8aq/6/
Here the problem doesn't display. The problem is only visible when I use the actual print function on Firefox.
Please check, may be possible you have written first letter CSS for print or main style sheet.
.redText::first-letter {
color: #000000;
}
I tried in codepen also it is working fine as you provided the code in question section.
Santosh provides a good answer which helped me to solve this issue. Here just to confirm the bit in the mdl css library which causes the issue. Apparently black prints faster this way.
Maybe you have put your span at wrong location...
In your output -364 do not have any comma or dot still it is leaving the first digit and rest all are red colored.
I suggest you, check the HTML tags.
Say throughout my site, there is multiple places that I want my text to be coloured #f00
If I want to target them, should I make one declaration to target everything at once e.g.
a, .color, h2 {
color: #f00
}
OR, should I "color" them when I am targeting them anyway e.g.
a {
padding: 5px;
color: #f00;
}
.color {
background: #333;
color: #f00;
}
h2 {
font-size: 20px;
color: #f00;
}
I'm never sure which to do, sure, the first part in this isntance looks like less code, but then I am referencing tags more than I need to. But on the other hand, I am using color: #f00 3 times instead of just the once.
I appreciate neither are "wrong", I was just wondering if one is quicker, more semantic or what.
Note: This isn't my code in any site, just a quick mock up. I'm looking for an answer on a bigger scale
The first one is the preferred method. Typically, a developer's goal is to minimize CSS size to encourage faster loading. Your first example surely takes up less space as a result of combining the classes together.
I think this is mostly a stylistic choice, but I'll tell how I approach it.
If there's something all these cases have in common that implies that they should always have the same color, then group them together.
However, if there's something they have in common, that suggests that you should perhaps give that commonality a name, and make it a class name. Then assign the style to the class. This is good modularity.
If it's just by chance that they have the same color, and you're likely to change one without changing the others, use the second form.
Hope's answers is true, but unless there are a huge number of styles like this I doubt that it's going to have a noticeable impact on loading time.
I haven't played with LESS yet, I wonder if it optimizes this automatically.
The first option should be the best, in the sense that if you write less code, and that if you wanna change this color into another one everywhere, you'll have a single line to change.
But finally, this is more useful to use the second method.
If you still wanna change this color everywhere, event the simpliest editor will allow you to do it easily. But if you wanna change the color of a single div, you'll need to move your code.
A good practice (using the second method), is to reference all used colors at the top of your main css file (in comments), then you can easily pick one to search/replace all matches.
I want to capitalize the first letter of sentences, and also the first letter after commas if possible. I want to add the code in here:
.qcont {
width: 550px;
height: auto;
float: right;
overflow: hidden;
position: relative;
}
You can capitalize the first letter of the .qcont element by using the pseudo-element :first-letter.
.qcont:first-letter{
text-transform: capitalize
}
This is the closest you're gonna get using only css. You could use javascript (in combination with jQuery) to wrap each letter which comes after a period (or comma, like you wish) in a span. You could add the same css as above to that span. Or do it in javascript all together.
Here's a snippet for the css approach:
.qcont:first-letter {
text-transform: capitalize
}
<p class="qcont">word, another word</p>
This cannot be done in CSS. The text-transform property makes no distinction according to the placement of a word inside the content, and there is no pseudo-element for selecting the first word of a sentence. You would need to have real elements, in markup, for each sentence. But if you can do that, then you could probably just as well change the initial letters to uppercase in the content proper.
Capitalization at the start of a sentence is a matter of orthography and should be done when generating the content, not with optional stylistic suggestions (CSS) or with client-side scripting. The process of recognizing sentence boundaries is far from trivial and cannot in general be performed automatically without complex syntactic and semantic analysis (e.g., an abbreviation ending with a period may appear inside a sentence or at the end of a sentence).
If you need to capitalize the first letter in contenteditable container you can't use the css property
#myContentEditableDiv:first-letter {
text-transform: capitalize;
}
because when you try to delete a letter automatically you will delete all the text contained in the contenteditable.
Try instead the example provided by sakhunzai in https://stackoverflow.com/a/7242079/6411398
for a working solution.
text-transform:capitalize; will capitalize the first letter of a sentence, but if you want to also do it for commas you will have to write some javascript. I agree with #BoltClock, though. Why on earth would you want to capitalize after a comma?
Edit: For the sake of readers: text-transform:capitalize; will capitalize each word of a sentence, not the first one only.
You must use the :first-letter CSS selector with the above.
Is it possible to text indent each line in a textarea? I'm using a handwritten font and the first letter on each line is getting cut off slightly. I've already used padding and margin, but this does not work.
Many thanks.
Erik
Don't know about \t but
style="padding-left: 4px;"
would definitely work for all the rows of a text-area.
Have you tried using \t? More details would be good are you programming this or are you typing it? You can also try alt codes if its the latter - Alt-012 is tab.
Edit I see your probably talking about the HTML input textarea. You might tag your question for HTML, though looking at it again it's fairly straight forward from the context.
in Chrome 69.0.3497.92, This gives indent only for the first line in textarea:
text-indent: 2em;