I need Chrome to display plain text files with long lines that should not be wrapped. But when Chrome displays a plain text file (text/plain) it wraps the lines around. How can I induce it to exhibit Firefox-like behavior (no wrapping, show scrollbars instead)?
I have tried to wrap the text into a element and it works but takes astonishing amount of time to load, even for relatively short text.
The easier solution for this is to right click and open "View Page Source". In this view the lines are not wrapped by default and "Line Wrap" is an option that can be toggled with a check box at the top of the page.
I've been looking at this too. The closest I've found is to use the command line and launch chrome but forcing to create a custom user style sheet.
Documented here : http://code.google.com/p/chromium/issues/detail?id=2393
You can then edit you local style sheet and update the css for pre tags (which is how chrome renders text/plain by default) to remove the "word-wrap: break-word" so the lines are not broken.
I just loaded Syntaxtic extension and it works perfectly on my Windows 7. It unwraps the lines automatically whenever a text file is loaded!
I hate to suggest an extension for something so simple, but the Syntaxtic! extension supports this.
It's used to add syntax highlighting and line numbers to text files, so it definitely does more than you want it to, but at least it can disable word wrap.
You can handle this on a case-by-case basis with something like Stylus.
I just added a rule for the page I cared about that contained:
pre {
white-space: pre !important;
}
Related
When I try to use Google Chrome's spell checker to correct the spelling of words in a text field or text area, Chrome crashes and displays the “Aw, Snap!” error message. This issue is only present on Chrome.
This is the sample code for reproducing the issue.
As soon as I right click on the red underlined word, Chrome crashes and it displays the error page. If there are multiple misspelled words in text field, only the last word causing an issue. I don’t have any issue with using spell checker for other words expect the last one, “mssage” in this case. I also don’t have any issue when there is another correctly spelled word after the misspelled word. In this case, it doesn’t crash.
In general, what I observed is that if the misspelled word is the last word in the text field, then the crash occurs; otherwise, it works as expected. I have checked all log files including Chrome local logs, but there is no log message related to this issue, and I am not able to debug it. I found a few partial solutions, but still couldn’t understand the root cause of this issue.
Partial solution-1: If we remove the text from the Button, the issue is resolved. As you can see, the button doesn’t have any text written on it, and in this case, it works as expected.
Partial solution-2: If we swap the order of the Button and Text Field, the issue is resolved. When I add components to the layout, the order makes a difference. When the button is added before the text field, the issue isn't there.
Partial solution-3: This is the solution I am currently using since the first 2 solutions require me to change my layout. If I add the suffix (sample code included) to the text field, the issue is resolved; however, the suffix has to have text in it, otherwise it doesn’t solve the issue. I added Label with “.” and set opacity to “0” to make it invisible on the user end.
Thank you so much.
I was able to reproduce your issue in Chrome Version 91.0.4472.114 in macOS and it works after upgrading to Version 92.0.4515.107.
It was already reported in bugs.chromium.org and it's fixed in latest Chrome.
If I type emojis here like 🎓🦕, you'll probably see colored sprites.
If you copy and paste that into Windows Notepad / Notepad++, you'll see something like this.
If you copy-and-paste that back into another text editor, it'll present normally.
Can I achieve the rendering effect of Notepad in CSS? I would prefer not to export / load my own custom SVGs or use JS if possible, and I would like copy-and-pasting into other applications to render emojis normally, as is the case with Notepad.
The non-accepted response here How would I change the color of an emoji? remarks that one can modify an emoji with a trailing \FE0E to use Unicode Variation Selector 15 (VS15) which enables text presentation. However, adding such a character would override rendering in other applications after copy-pasting, which is undesirable.
There was a CSS draft https://github.com/w3c/csswg-drafts/issues/1144 which proposed adding font-presentation: auto | text | emoji | text-override | emoji-override to CSS but the specific issue hasn't progressed since 2017 & I'm unaware if progress has continued elsewhere.
This should become trivially possible via CSS whenever the proposed CSS Fonts Module Level 4 goes into effect. See Section 9.3 Selecting the text presentation style: The font-variant-emoji property of https://drafts.csswg.org/css-fonts-4/#font-variant-emoji-prop
In the meantime, here is a workaround that supports copy-and-pasting by exploiting the fact that CSS generated content is not captured in copy/paste operations. This is incompatible with controls like text inputs, though.
In CSS:
.emoji::after {
display: inline;
content: '\FE0E';
}
And HTML:
Lorem<span class="emoji">🎓</span>Ipsum
Lorem<span class="emoji">🦕</span>Ipsum
This renders the graduation cap correctly, but strangely enough not the dinosaur. It doesn't work for me if I copy-paste emojis directly into source; you need to specify the codepoints explicitly, not sure how that works.
Copy-and-pasting the text does not copy-and-paste the VS15 codepoint as we'd hope:
Lorem🎓Ipsum Lorem🦕︎Ipsum
I've a droppable input.
1- When i drag drop a html text, the drop works...
2- When i drag drop a gedit (bloc note linux), the drop works
3- But When i want to drop a selected text from LibreOffice Writer or
Calc, it don't works...
I've created a fiddle if someone can help me... : http://jsfiddle.net/CnwvC/
with code
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input id='inputid' type='text' value="snif">
<p>html blabla to test to drop </p>
Instead of gedit, the LibreOffice text content is not plain text. This could be one of the reasons that it doesn't allow you drag and drop its content to your input box.
One interesting fact is that if you drag and drop a content from a webpage to you document on Writer you'll get the HTML content of the page (all the tags), but if you do the same in Google Chrome, you will get the rich content (like colour, formatting, and so on). This was reported by other folks.
If you try to drag LibreOffice's content to any area on Firefox, it will be same issue.
So, the problem is not in your code, but in the way that LibreOffice (Writer, Impress, and all the other apps) integrate with the browser libraries.
Hope that help you, it's not an usual issue.
Thanks
When you "copy" a document fragment, the program puts in the clipboard possibly more than a single version of what you copied.
Versions are tagged with their format.
Like for example if you paste the fragment in a text editor like vim it will choose a "text only" version because it doesn't deal with "text richness".
There might also be an HTML formatted version, and one in "rich text" format.
It's up to the pasting application to choose the right version.
If it doesn't specify any then the system (my experience was on Windows) chooses the most universally accepted one, that is, plain text.
It is explained in this MSDN page.
I'm afraid this is highly specific, so please bear with me and read carefully.
The problem:
Open a PDF file, select and copy some text that contains line breaks and paste it into a TinyMCE textarea in the Google Chrome browser. Then delete any line break and insert a space at the same point: the space that is added is non-breaking even though I used a regular "space bar" key stroke in TinyMCE.
How do I know there is a non-breaking space?
You can click the "show invisible characters" button on the first row of my TinyMCE implementation (see link below). Remember that with TinyMCE your must turn that option Off and On again every time you modify the text to see the changes.
The non-breaking spaces will appear in orange, normal spaces appear normally.
What I have found so far:
If I delete the character that comes after the line break and then type that character again, I can insert a normal space. The problem seems to be attached to that character.
If I delete the character occuring before the line break, the problem persists, i.e. when I delete the space and type a new space it is still a non breaking space.
Also when I save the text to the MySQL database, and read it again in TinyMCE, the problem still occurs, which reinforces my impression that the "hidden" character is attached to the letter following the line break (there is no saving on the test page of course).
Replicating it
You could of course try it yourself, but here is my testbed for you: http://www.roseback.com/test/tinymce4.html
I have tested it with many PDF files that we receive from graphic designers, from many products and eras. These PDFs are the files that are used for printing and there is no problem with those files for that use.
I uploaded a sample file here: http://www.roseback.com/test/languedoc.pdf. Test with the first paragraph starting with "Ce film exceptionnel".
However I have also tested random PDF files from the web and replicated the problem every time. So if you try with your own files and can't replicate, that might be interesting.
Environment:
Web page: the page is in HTML5, in UTF-8.
On the original page, the page is served via PHP and the textarea content comes from a MySQL 5.1 DB. The DB connection is set to UTF-8 in PHP, the content of the table and of the text field is in utf8_unicode_ci
On the test page there is no content and no saving, so no DB is involved.
Browser: Chrome. Does not happen in Firefox or Opera (not tested elsewhere)
TinyMCE: version 3 and version 4 (both standard version, not jQuery)
OS: on Windows 7 Pro 64 bit and also on Windows XP Pro 32 bit
I would appreciate any feedback, even simple confirmation / replication of the problem.
Hmm, i think what you observe has something to do with the fact that tinymce inserts non breaking spaces instead of spaces. Tinymce needs to so this in order to avoid that the browser shows more than one space concurrently entered as one single space (this is the default browser behaviour).
You can verify this by inserting more than one space and then have a look at the non-visible characters.
Here's the use case: A user clicks on a link that opens a window displaying the contents of a text log. Easy enough. But is there a way of using POST, to open that text log to a certain location (i.e., search for a particular timestamp given in the post, and show the file at that specific location)?
(Assume I can't put html tags inside the text log -- it's a raw file).
Template of log:
+++ 2009/06/19 10:47:12.264 ACTION +++
+++ 2009/06/19 10:49:12.111 ACTION +++
So I want the page to load a specific timestamp.
Thanks,
Michael
Why can't you just have a php or perl or simlar script that processes the log file on the spot, and sticks in html anchors and calls it a day?
Doing on the spot processing would also allow you display a trimmed down copy of the log thats only relevant to the timespan around the event in question.
Since you can't modify the file, the only way would be to wrap it in a <frame> or an <iframe> and drive the searching and scrolling from JavaScript in the neighbouring/containing page.
Here's an example, which you can try out online at http://entrian.com/so-container.html
<html><head><script>
function go() {
// "line" is the <input> for which line to jump to; see the HTML.
var line = document.getElementById('line').value;
if (document.body.createTextRange) { // This is IE
var range = frames['log'].document.body.createTextRange();
if (range.findText(line)) {
range.select(); // Scroll the match into view and highlight it.
}
} else { // Non-IE. Tested in Firefox; YMMV on other browsers.
frames['log'].find(line); // Scroll the match into view and highlight it.
}
}
</script></head><body>
<input type='text' size='5' name='line' id='line' value='10'>
<button onclick='go()'>Go</button><br>
<iframe name='log' width='100' height='50' src='so-data.txt'>
<!-- so-data.txt contains the numbers 01-20 on separate lines -->
</body></html>
I've tested that in IE7 and FF3; I'd be surprised if it worked elsewhere without edits, but you never know your luck!
Obviously in your case you'd be driving the scrolling programmatically rather than via an <input> box, but you can see how it would work for you.
If you could put some tags around the file's text, then you could probably insert some javascript that would scroll the window after loading it.
Yes, but passing your parameters via a querystring would be a whole lot simpler.
To scroll to a certain position in the text file you will need to user javascript (overly complicated in my opinion) or add an html anchor tag.
If you were planning to post the raw text log in a window, you will also run into some difficulty as HTML will not recognize the newlines and run the log together into one blob.
have you tried
window.open ('log.txt');
window.scrollTo (0, window.scrollMaxY);
? From mozilla reference : https://developer.mozilla.org/en/DOM/window.scrollMaxY
Keep a 'living copy' of the log file that has been translated to HTML - every time the original file is modified (or simply every X seconds), check for and append the newest lines with HTML anchors applied to the HTML version.
A new feature was added to Chromium waaaaay back in 2020 that allows you to link to ANY location on any webpage.
At the time of this writing, it works for sure in Chrome and Opera but not yet in Firefox, Safari or Brave browser.
The trick is to add:
/#:~:text=
and follow the equal sign with the desired search text, replacing any spaces with %20. Example:
There is no ID near this location on the page
<div>IMPORTANT: Use Opera or Chrome to open above link</div>
For more information:
Linking to a specific part of a web page