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);
}
Related
What I'm trying to do is create an area on a page that users can interact with, which corresponds perfectly in size to the typical size of a piece of paper (A4), so that users are aware of exactly what the print will look like as they're constructing the printable area (before accessing print preview). I do not want to and should not have to use #media print at all.
It seems as if the perimeter of the printable area of the page corresponds to the actual browser window (window.innerWidth, etc) only sometimes, whereas at other times elements that are positioned closer to the center of the page are partially excluded from the printable area or even excluded altogether.
I can't seem to find any rhyme or reason to this. I've tried looking on SO and found one question in relation to printable areas but for a different language/context. Tried looking on Google. Nothing.
[edit] Now that I think about it, it's behaving kind of like viewport/viewbox cropping/zooming.
Anybody know how would one go about finding the actual printable area of a webpage and or the perimeter thereof?
Example
An element with the position right: 0 appears on the far right side of the page and will be included in the print, but ironically that very same element ends up becoming partially excluded when it is dragged closer to the center of the screen.
...
<body>
<div id="l"></div>
<div id="r"></div>
<textarea draggable="true" id="textarea"></textarea>
</body>
...
#media print {
#l, #r {
width: 50%;
height: 100%;
position: absolute;
top: 0;
}
#l {
background: blue;
}
#r {
left: 50%;
background: orange;
}
#textarea {
right: 0;
}
}
However, if I drag the image closer to the center of the page, ironically it becomes partially excluded from the printable area...
Often times, a special style sheet that is designed solely for purposes of printing is associated with a web page. This style sheet can literally include/exclude anything.
Here's some reading on setting up a print style sheet.
In a web application I have lists of things with the following structure:
As you can see, when we list items (users, roles or anything basically), we have some associated actions on the right, highlighted on yellow. In this case all items have a Delete option.
However, if I run a ADA compliance tool, I get a warning saying:
Warn: Ensure that links that point to different HREFs use different
link text.
What would be correct way to fix this as all the Delete links obviously point to a different link (for example: javascript:Delete(123)). I know it's just a warning I could ignore, but it might be good to fix it.
I don't want to change the link text to Delete XYZ as it would be way redundant and it might not fit in the screen either.
I'm using the Firefox's Accessibility Evaluation Toolbar for the test.
Edit: When using a screen reader, the tab order is Administrator, Delete, Advisor, Delete, Instructor, Delete, ... as the items are also links that take you to the details/edit of each of those items. I'm not an expert on accessibility, but it looks redundant since it's already reading the item before each Delete.
Use a screenreader only class on a more descriptive element if you don't want to put the proper text labels in.
Bootstrap has a really handy little style .sr-only you can add to your stylesheet for elements you only want screenreaders to see:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
Just put the style on a more verbose version of the 'delete' div/span:
<div class="sr-only">Delete Administrator</div>
Similar to staypuftman's suggestion, I would also use Bootstrap's .sr-only class but I would assign it to a span surrounding the extra words only so that you only see "Delete" in the button while the accessibly hidden text is part of the button semantically and will be read when the button has focus.
Like so:
<button type="button" id="deleteAdvisor">
Delete
<span class="sr-only"> Advisor</span>
</button>
I'm having some trouble positioning the Google +1 button on my website. The div is as follows:
<div class="g-plusone"></div>
The CSS I'm using is pretty simple:
.g-plusone
{
position: absolute;
top:95px;
left:715px;
}
Despite what would seem straightforward, it simple does not want to move.
I know for a fact that the div in question is being accessed. What's strange is that other social sharing buttons, such as the FB like below follow the same syntax and are positioned perfectly.
.fb-like
{
position: absolute;
top:62px;
left:715px;
}
Adding !important to the values does nothing, unfortunately.
Any ideas?
When Google loads +1 button the .g-plusone class seems to disappear, so try to put this DIV inside another DIV, as illustrated below:
HTML:
<div class="google-button">
<div class="g-plusone"></div>
</div>
CSS:
.google-button
{
position: absolute;
top:95px;
left:715px;
}
After page loads, the Google div called g-plusone turns into a lot of code, but, you can manipulate this button with id generated.
In my case, for example, to align the button in the middle of the line I put:
#___plusone_0{
vertical-align: middle !important;
}
Note: The id ___plusone_0 is the id generated by the google codes. Do whatever you want with this id.
Use something like Firebug to ensure you're targeting the correct element. The +1 button is very deeply nested, so you'll most likely need to look further up the DOM tree to get to it's outermost wrapper. You will be able to set the position of that without needing to use !important or anything, so I would definitely check this first.
Sorry, I would have just added this as a comment above but I don't seem to be able :)
Here's the thing. I use 'Highlight.js' (a javascript-based automatic syntax highlighter) to syntax-highlight code on my website. But it doesn't support line numbers or zebra-striping (for alternate lines of code).
My code block is wrapped in <pre><code> blocks like this:
<pre><code>
<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>
</code></pre>
And the output looks like this:
Now I want to show line numbers for the code block dynamically using JavaScript. How do I do that? (Also, if possible, how do I show zebra-striping?)
Thanks.
PS: I don't know JavaScript, so please try to be as clear as possible. I will try my best to understand. Thanks.
You could use an alternate framework such as http://alexgorbatchev.com/SyntaxHighlighter/
Or take a look here and find something that suites.
http://www.1stwebdesigner.com/css/16-free-javascript-code-syntax-highlighters-for-better-programming/
The basic steps would be:
Take the HTML inside the element.
Split by newline characters (\n).
For each string, add a number and a dot in front of it.
Combine the strings again with newline characters.
Set the string as the HTML of the element.
However, this would mess up the syntax highlighting of the syntax highlighter because it most likely won't recognize that the code has line numbers in front. So the syntax highlighter needs to provide the functionality of line numbers for you.
Adding a new answer to an old question.
I wanted to display line numbers in the left margin the way ace.js does.
My solution has some hacky details, but I wanted to share it anyway, because it turns out that absolute-positioned spans within relative-positioned spans work pretty well for this.
Encouraged by the above answers and this answer about relative positioning without taking up space, I used:
var line = 1;
code = code.replace(/^/gm, function() {
return '<span class="line-number-position"><span class="line-number">' + line++ + '</span></span>';
});
The regular expression /^/gm "replaces" the beginning of each line with the span-within-span.
is a zero-width space, because apparently firefox seems to have trouble deciding whether to put a zero-height span at the top or the bottom of the character.
line-number-position and line-number are CSS classes like these:
.line-number-position {
position: relative;
top: 0;
}
.line-number {
position: absolute;
text-align: right;
right: 17px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
font-size: 12px;
}
Yes, there are some magic numbers in there to match ace formatting, but the point is to put a relative-positioned zero-sized span at the beginning of each line and use it as a reference point to add an absolute-positioned span out in the left margin.
Works on current Chrome, Safari, Firefox, and Opera.
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 :-)