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;
Related
(Posting here because I couldn't find an answer and figured it out by experimentation, in case anyone else has this question.)
Note: Not exactly a duplicate of Single-line vs multi-line CSS formatting, because that was wondering if each property should be on its own line or if all properties for a given selector should be on the same line. I was wondering if there could be line breaks inside a property's value.
If you have a long value for a CSS property (for example, if you have a long list of fallback fonts for the font-family property), can you format that list nicely with linebreaks or will that break things?
For example, if you have
body {
font-family: fontA, fontB, fontC, fontD, fontE, fontF, fontG, ..., fontZ;
}
can you do
body {
font-family: fontA,
fontB,
fontC,
...,
fontZ;
}
?
It is recommended to use line breaks in CSS to make it easier to read and make changes later on. By using line breaks you won't experience any weird spaces in your visuals and it will not break your generated code. This is out of the ordinary compared to other coding languages like HTML.
The answer appears to be yes. Nothing errors out, nothing breaks.
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>
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.
I am building a website where I am displaying korean text. The client (US local) is being very unhappy because the text is breaking in the middle of words. As example of this, here is an image: Red background text being one word.
I have tried to use
word-break: keep-all;
but it isn't supported in Chrome/Safari.
What am I able to do? I have searched the web for hours and got nothing. Is this something that is expected in cjk sites or is there a solution that I haven't found.
It is a responsive site, so I can't put in hard breaks, or fake it.
demo: http://codepen.io/cibgraphics/pen/tqzfG
Why not use jquery plugin - https://github.com/mytory/jquery-word-break-keep-all
This plugin is for it. IE has CSS property word-break: keep-all; but other browser has not.
The SPACE character generally allows a line break. This is not affected by the word-break property. To disallow a line break, use NO-BREAK SPACE instead of SPACE, e.g. 십 니까. Alternatively, wrap a sequence of characters that should not be broken in a span element and set white-space: nowrap on it.
Use the CSS rule word-break: keep-all. It's now supported in all browsers but Microsoft Edge (a change since 2014 when the accepted answer above was posted).
You can try a mixed solution in which you use CSS and JS in order to simulate words and then move them to a new line if the width is not enough.
The test I did uses a CSS class with display inline-block and then wraps each Korean word into spans.
CSS
.korean-word {
display: inline-block;
}
The use a JS/jQuery code like this:
var p = $(".hero__description");
var text = p.text();
var nospace = /(\S+)/g;
var p1 = text.replace(nospace, "<span class='korean-word'>$1</span>");
p.html(p1);
The code simply takes in a text, looks at things which are NOT spaces and then puts those things into span HTML elements. This way you force a word to go to new line.
Add both line-break:strict and word-break:keep-all into your CSS. This helps solve the problem for me.
I'm having trouble with the text underneath the images on the website I'm building:
1) The "Back to home page" changes from the font it's set at (Georgia, 0.9em) to the default in Firefox. It does not do this in Safari (http://ink-12.web5test.terc.edu/img/modelofinteractionfull.cfm).
2) The footer appeared fine before I added images (http://ink-12.web5test.terc.edu/index.cfm). After I added images (inside div class=.submenu), again, the font I set (Georgia, 0.9em) changed to the default in Firefox (http://ink-12.web5test.terc.edu/aboutus/index.cfm).
Another issue that appear after I inserted the images:
1) The footer's vertical bars (|) disappeared between the links, in both Firefox and Safari. You can see that the bars are actually still there when you highlight the text, but for some reason, they do not appear in white anymore so they aren't visible (http://ink-12.web5test.terc.edu/aboutus/index.cfm). But you can see how it's supposed to look on the home page (http://ink-12.web5test.terc.edu/index.cfm).
I wanted to copy my code below, but I'm having trouble understanding how to properly format it on this site, so I'll work on that. In the meantime, any thoughts?? Thanks so much in advance for your help!
For example, regarding question 1, the only CSS rule that sets the font family is
h1,h2,p,p2,li{ /*group codes for many styles*/
font-family:"georgia";
}
It does not affect the link, since it is not inside any of those elements. Similar considerations apply to question 2. And the vertical bars are there, they are just black on black.
Use a markup validator like http://validator.w3.org to find he HTML syntax errors, fix them, and then deal with the CSS syntax errors with http://jigsaw.w3.org/css-validator/ and then analyze the logical problems. Using Firefox with Firebug is a good idea, since then you can click on any element and see which, if any, CSS rules are being applied to it.
I'm not sure if this will help you, but I suggest making sure that "Georgia" is capitalized when you declare it. I might be wrong but suspect that some browsers may not be picking up the name because it doesn't match the font's name perfectly.
Comparing the pipes (the vertical bar characters '|') between your examples shows a small flaw in the CSS. The pipes are not inside of the <a> tags so even if you set all your <a>s to white the pipes will never change. In one example ( http://ink-12.web5test.terc.edu/index.cfm ) the pipes are contained by a <p2> tag, which wasn't a valid HTML tag last I checked but that's besides the point. The <p2> has its color set to white which makes the pipes inside of it white. In the other example ( http://ink-12.web5test.terc.edu/aboutus/index.cfm ) the pipes are contained by a <div> which has its color set to black which makes the pipes black, but the <a>s are set to white. Since your background is also black the pipes disappear.
For the "|" issue add the following
skeleton.css line #161
.footerlinks {
padding-top: 0.5em;
color: #fff;
}
For the link issue it looks to me that the font is becoming bold when you hover. You just need to define your hover state ...
fonts.css line #4
a:hover {
font-weight: normal;
}
Sorry, it was such a simple fix! I"m very new to coding (as I'm sure you could tell by the ridiculous amount of markup I had in my style sheets). I didn't know that links could have all their own font-family, and thought that if you kept it between a heading or paragraph tag, that it would just take that on. But I get it now, thank you!