Justification of text in HTML - javascript

Is there way to force the justification of text using CSS to one line? For example:
I want to justify this text
like this
ButIdon'tmindifitsquashesit
I don't need people to tell me that it's a bad idea to justify text in web pages (I have a manual line spacing and hyphenation algorithm to assist), but I'm just wondering if there's a solution, CSS or JavaScript, to handle this.
Sorry, wasn't very clear with my question: Each line is in a separate div element, e.g.:
<div>I want to justify this text</div>
<div>like this</div>
<div>But I don't mind if it squashes it</div>
I know about text-align: justify but it doesn't solve my problem — it justifies according to how the browser wants to, not by the each line I have. This may result in inappropriate line breaking or falling short of the right edge.

You cannot justify single lines of text.
However, you can hack together something that may work for you.
div{width:300px;
border:1px solid red;
text-align:justify; text-justify: newspaper;
}
div:after{
content: " ";
line-height: 0;
visibility: hidden;
}
http://jsfiddle.net/jasongennaro/zX9x5/1/
This only works if you are okay with an extra blank line under the content.
borders just for example to see spacing, etc.
H/T to #thirtydot for the idea: Justify the last line of a div?

You might try
text-align: justify;
in your CSS :-)

Related

copyrights text over an image is getting messed up in html

I have an HTML where I need to add copyrights text at the bottom of the page but I need to add that text on another image. Here is my div which I added:
<div class="copy-rights">
<img src="https://s30.postimg.org/ws4b9bff5/copyrights.png" />
<p>
©THE NORTHMAN COMPANY . 2017 . ALL RIGHTS RESERVED
</p>
</div>
I have created this jsfiddle in which I have added copy-rights div at the bottom of the page but somehow in my jsfiddle I see lot of white spaces between my copyrights div and the bottom page so I am not able to put an image first and then copyrights text on top of it properly.
My copy-rights div is getting messed up and that copyrights image is also messed up in my jsfiddle.
Technically it should be like this: https://s12.postimg.org/s70kwke59/copyright-image.png
What wrong I have done?
There seemed to be many mistakes in your code that were throwing out the layout.
When i amended the errors, the background was gray in parts and black in others. If this was not what you are aiming for, it should be easy enough to change now.
I didn't fix everything, but i did a few things. Your footer issue fixed anyway. There seems to be a problem in the left sidebar that was happened while other things fell into place. I'm sure you can fix it with a bit of margin-top or something, I didn't look at it closely.
Do review the changes in the css. You've said you're a beginner; it's a good way to learn.
Fiddle
Happy coding!
EDIT: Yaha! (fix i took out top/left/bottom etc positions and some padding) still might need a tweak til you're happy with it.. Preview
Paudel is right you can just set background: grey; and it will look the same.
Otherwise you will need to set wrapped div to be relative and the text element absolute. Something like:
.content {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
Regards
Make the picture a background-image
HTML:
<div class="copy-rights">
<p>
©THE NORTHMAN COMPANY . 2017 . ALL RIGHTS RESERVED
</p>
</div>
CSS:
.copy-rights {
background-image: url('https://s30.postimg.org/ws4b9bff5/copyrights.png');
}
Update:
Since the image is just a grey area, background color can be applied as well:
.copy-rights {
background-color: grey;
}

Mismatch in text width between div and textarea

I'm trying to create a textarea control in which it is possible to mention other users. The feature is pretty much similar to the one found in Facebook, and the implementation is similar too. When the user types an "#", a dropdown is presented from which a user can be selected which is then displayed with a highlight in the textarea. To be able to selectively render highlights in the textarea, I'm using an overlay div with the same text, but with span tags to create highlights.
The overlay has the same width, the same font and font-size, the same letter-spacing, same line-height, etc., to make sure all highlights will align properly with the text in the textarea. All the text in the overlay div, except for the highlights themselves, is transparent to avoid artifacts of rendering anti-aliased text over text.
This all works pretty well, except that when there is a mention highlight, the text in the highlight is somehow just slightly less wide than the text below it in the textarea, which causes a very slight mismatch. Worse, this small mismatch accumulates when there are multiple highlights, and it can sometimes cause a line to wrap in the textarea but not in the div, after which the whole illusion just falls apart.
I have verified that all text rendering options are exactly the same for the text in the textarea and in the overlay and in the highlights. All have equal font, font-size, letter-spacing, line-height, there's no margin, border or padding on the highlights, etc.. I have also looked in the WebKit Inspector to see if I might have missed any properties that could still affect text rendering, but couldn't find any. Simply put, I can't explain where this slight rendering difference comes from.
Please note that the rendering difference does not occur as long as the overlay doesn't contain any highlights.
I have also tried only rendering the overlay and not rendering the textarea at all (instead of having the overlay be transparent outside of the highlights), but this has the nasty side-effect that I won't see any cursor anymore.
Is there some CSS property that I still might have overlooked or is there some other reason why breaking the text into multiple spans would cause the total width of the text to slightly differ from an uninterrupted text node? Any suggestions would be greatly appreciated!
Update: For any others who might run into this problem, it's illustrated in the following jsfiddle: http://jsfiddle.net/brt8w85z/5/
<style type="text/css">
.parent {
text-rendering: optimizeLegibility;
position: relative;
}
textarea {
border: 0;
color: #000;
resize: none;
}
.overlay {
color: transparent;
pointer-events: none;
}
textarea,.overlay {
font-family: Helvetica,sans-serif;
font-size: 12px;
left: 10px;
letter-spacing: normal;
margin: 0;
padding: 0;
position: absolute;
top: 10px;
width: 200px;
}
.highlight {
background-color: #00f;
color: #fff;
}
</style>
<div class="parent">
<textarea>Tom Kleijn, Mark van der Velden and Arend van Beelen</textarea>
<div class="overlay"><span class="highlight">Tom Kleijn</span>, <span class="highlight">Mark van der Velden</span> and <span class="highlight">Arend van Beelen</span></div>
</div>
The problem can be fixed by adding "text-rendering: geometricPrecision" to the "textarea,.overlay" rule.
Seems I have found the solution myself: On the body there's a definition of "text-rendering: optimizeLegibility". Setting this back to "text-rendering: geometricPrecision" on the textarea fixed the problem. The reason this was not obvious before was because the WebKit Inspector did not show the inherited text-rendering on the textarea, even though it does so for (most?) other inherited properties.

JS/CSS/XHTML: Don't copy specific text during copy events

I'm looking for a way to disable the copying of a specific area of text when you use Ctrl + C, etc. Whether I have to write the text a different way or not.
http://gyazo.com/721a0a5b5af173beb1ad3305633beafb.png
Above is what this is for. It's a syntax highlighter I have been working on (3 languages supported so far). When the user selects ANY text in any way, I don't want the line numbers to be copied.
I can't think of a way to display line numbers, without them actually being there.
As long as the line numbers and the source code are mixed together, this is going to be tough to prevent programmatically, if not impossible.
The ideal way would be having the source code in an actual container of its own.
Open a document inspector and look at how Github do it, for example: https://github.com/jbrisbin/riak-exchange/blob/master/Makefile
they have a separate <pre> element containing the line numbers, and a <table> cell containing the code. (I assume selecting is a reason why they use tables here, but I do not know for sure.)
Give this a try...
Demo: http://jsfiddle.net/wdm954/UD8Dq/7
I layered the div so the code div is on top and the numbers are behind. When you copy and paste you should just get the code.
.lines {
position: absolute;
width: 80%;
color: #666;
}
.lines pre:nth-child(odd) {
background-color: #EEE;
}
.code {
position: absolute;
z-index: 2;
padding-left: 5%;
width: 80%;
}
<div class="box">
<div class="lines">
<pre>1</pre>
<pre>2</pre>
<pre>3</pre>
<pre>4</pre>
</div>
<div class="code">
<pre>
code
code
code
code
</pre>
</div>
</div>
Setting user-select, -moz-user-select, and -webkit-user-select to none might work. For IE, you will need to handle onselectstart and return false.
This will prevent people from selecting the text, but I don't know what happens when it's beside other text that you attempt to copy.
I know that this question is three years old, but with HTML5 you can store line numbers in a data attributes and use CSS2 to display the text. This should prevent line numbers from being copied.
HTML
<span data-line-number='1' class='line'></span>
CSS
.line:before {
content: attr(data-line-number);
}

sIFR 3 Leading and Kerning

I am trying to get leading and kerning to work on some sIFR 3 type on a site I'm working on (as described in the wiki: http://wiki.novemberborn.net/sifr3/Styling), but these two parameters seem to have no effect no matter what I do.
I am not using intergers (no 'px' or 'em') just as it requires. I've also tried several different font swf files, just to make sure it's not the font. I don't know why it doesn't work. All of the other css parameters that I assign to .sIFR-root work just fine. Here's a sample of my code using 'leading'.
In sifr_config.js:
sIFR.replace(snl, {
selector: '.section-title h1',
css: ['.sIFR-root { color: #FFFFFF; text-align: center; leading:2; }'],
wmode: 'transparent'
});
In the HTML doc:
<div class="section-title">
<h1>sIFR Text</h1>
</div>
(I've also tried the css code with and without the square brackets, as I've seen it done both ways. Doesn't seem to make a difference).
What am I doing wrong? Any help would be greatly appreciated; thanks!
ETA: Found an less hackish way:
line-height seems to work when added to the CSS for the replaced element (in my example that'd be: .sIFR-active .section-title h1). So I was able to use regular old line-height to fake a margin.
All righty—since this one left everyone speechless, here's what I discovered:
Originally, there were many suggestions for using leading as a replacment for margin-top or padding-top since these will not work with sIFR. This is what I was trying to use it for. I had a single line of text and needed to give it some space up top, so I was trying to do this by increasing the leading (line height) to no avail. I think this worked at one point, but then as I was looking at the change logs for all the revisions of sIFR, I found a note about a "fix" to leading. Apparently the developer considered leading being recognized on single-line text as a bug, so "fixed" it so that leading is only applied when the text is multiple lines. I tested by putting a line-break before my text, and sure enough, leading started to work!
So it seems that now, in order to achieve a top margin on my sIFR header, I have to add unneccessary code one way or another—by wrapping it in a div or span with a top margin, or by adding a line break and using negative leading.
I still have no idea about the kerning, but letter-spacing seems to be working, so…
If anyone has any additional insight to offer, I'm all ears!
Here's what works for me, using sIFR 3 to get a h2 with Serifa font in red with minimal letter spacing and leading. The actual sIFR swf is nothing special, simply created as per the sIFR documentation. As mentioned above, offsetTop and tuneHeight also work for adjusting positioning (shown below although I haven't used them so set to 0).
In sifr.css
.sIFR-active h2.replace {
color: #FF0000;
visibility: hidden;
font-family: arial,helvetica,clean,sans-serif;
font-size: 2.5em;
text-transform:uppercase;
}
in sifr-config.js
sIFR.replace(serifa, {
selector: 'h2.replace',
css: ['.sIFR-root { letter-spacing: -2; leading: -15; kerning:true; color:#FF0000; text-transform:uppercase; font-size:2.5em; }' ],
tuneWidth: '0' , tuneHeight: '0' , offsetTop: '0' });
In html page (for example):
<div class="column grid_4">
<h2 class="replace">Title here</h2>
</div>

Break long text

I have a div which has width of say 200px. It does not show horizontal scroll bar. Now if anyone types any word more than 200px worth, it is simply hidden. I am wondering if its possible to automatically put a newline tag after every word reaches 200px length?
Thank you for your time.
You can achive this using simple CSS using
WORD-BREAK: break-ALL.
<div style="width: 200px; word-break: break-all">Content goes here</div>
Hope this is what you were looking for...
It's a tricky problem, but you should probably read http://www.quirksmode.org/oddsandends/wbr.html.
basically, there is somewhat inconsistent support and the linked article proposes use of:
wbr:after { content: "\00200B" }
in your css, and using the <wbr/> tag in your html
There is a soft-hyphen that lets you define where a word can be broken up (For example, prod-uct-iv-ity) which doesn't display any hyphens, just defines where they could show up if the word has to wrap lines. It is entity ­
If you have mono-spaced font, it'd be easy to count number of characters, and just insert a break-tag. But it's harder to calculate where to put in the break-tag with normal fonts.
For IE, you can set word-break: break-all; which will break words when they reach a certain length...
word-break is good, but it is said not to work in firefox. (haven't tested.)
For firefox, use javascript.
It does work in webkit though.

Categories

Resources