I am pasting an HTML table into my wordpress site from Text Editor. The table is styled with CSS and both codes are correct.
Whether I paste it in to Wordpress or the W3Schools tester, not all of the styling takes place. It seems to choose different td's, tr's to style when it wants to.
If I delete td class="name" and then type it back out, it all works fine.
What am I doing wrong?
If deleting " and retyping it, then I would think that is where the issue is. I have come across this in the past, and I pretty much just retyped each one. If you try pasting the code to something like notepadd++ or Sublime Text, it may remove the character formatting of the ". Then copy and paste it from there to Wordpress.
Related
There is issue related to CKEditor paragraph spacing. If I'm typing in ckeditor, it works fine. If I copy paste something from browser, it works fine. But when I copy paste something from word file, I get large space between two paragraphs. So I manually need to remove a extra line between two paragraphs. I have searched on internet for solution. And I got some solutions too. But none of them is working for copy/paste from word file. I have tried these solutions.
Solution 1
Solution 2
These solution are working fine to solve issue while manually typing or copy/paste form browser. But not working for copy/paste from word file. And I can't understand why this happens. If any one knows the answer, it will be appreciated.
Use Paste from Word option on menu bar of CKEditor.
That way you will receive MS Word formatted text converted to WEB formatting.
Usually when copying text from some text pre-processors (like Word, Excel...) you will copy some hidden formatting (like inline CSS, additional markup and so on). When pasting to CKEditor directly all these additions are left as is and it leads to broken layout, that's why you need to first process this copied text and only than put it in text.
I copy a text from a source in a platform. It is a private platform that has a box where you can type text. There is a button where you can see the HTML source code afterwards. I copied numerous texts with no problem. When I am trying to copy-paste the above, I noticed that in the HTML code a specific tag gets produced.
<p><strong><em><span lang="en-gb">Week of the 5th of September</span></em></strong></p>
So, my question is, how is that possible. Does a text after copying it generates specific tags? So, in the copying process, some things get copied apart from the text we can see... Also, this could be happening because the source text (that is about to be copied) contains characters that are not supported from the unicode set up in the platform (web application)?
I am really curious to understand what is happening.
Based on the fact you said it had a button where you can view source, this sounds like a WYSIWIG (What you see is what you get) editor like CKeditor, TinyMCE, Froala, etc. They take standard HTML textarea elements and using Javascript and CSS convert them into more robust editors. They allow you to do simple text formatting in the textarea, upload images, view source, etc.
They are used a lot in blogs and for content editing for people that don't write code but want to be able to manage and maintain content in web sites. For instance if you type a "paragraph" of text in one of these it will automatically wrap it with the appropriate <p> tags using Javascript.
In your case you're adding content in this box, and it's simply applying the formatting to it with Javascript. It will do the same if you just type in the box, vs. copy/paste.
Here are some links to WYSIWIG editors so you can learn more about how they function:
http://ckeditor.com/
https://www.tinymce.com/
https://www.froala.com/wysiwyg-editor
Fun Fact: The editor you used when you typed your question on Stack Overflow uses one of these. https://meta.stackexchange.com/questions/121981/stackoverflow-official-wmd-editor
It`s not much information, so I‘ll take a guess:
For <strong><em>: The website could eventually use a div with the contenteditable="true" attribute (more info on mdn) as the input method. When you then paste in text from another application that already has markup like bold or italic, it‘s converted to html tags.
The <span lang="en-gb"> could come from the browser, another application or the website through analyzing the text and adding this.
I'm studying css/html via a pdf workbook, and I'm wondering if it's ok to cut and paste code from this into my text editor (Sublime Text) or will this result in "dirty code"?
You won't have 'dirty' code in the sense that you would if you pasted something into an editor that has a design view and was generating code. Sublime Text is only a text/code editor.
However, when cutting and pasting from PDFs you have to be especially careful about line breaks, columns, dashes at the end of lines etc. Especially true if your language cares about line breaks and indentations. (HTML/CSS is far more forgiving that others.)
But, you should be fine. Just pay attention to what the code looks like when you paste it, and clean up a bit if necessary.
It won't produce dirty code no.
If you are studying HTML and CSS or in fact any sort of code I would always suggest to type it out manually to help your brain absorb the information much easier... So, no it won't but my advice is to type it all out manually.
I am currently in the process of updating a site to be more responsive/mobile friendly. I have everything working wonderfully with one exception, <pre> formatted code samples. The content is being served by a blog engine, and the difference is entirely between themes. Reverting to the original theme, everything worked great again.
Here is the original display of <pre> code samples properly formatted:
Here is the underlying element's markup as seen by Chrome:
After updating the CSS however, pre formatted code isn't displaying properly, instead it appears like this:
In Chrome, the CSS is virtually identical:
For some reason with the new layout/markup, I simply cannot get the formatting to work properly, even though the styles being applied to the pre tag are effectively identical. I've tried setting white-space: pre and white-space: pre-wrap, at various levels with no effect. I added word-wrap to support resizing existing content down, removing or adding it has no effect. I've tried changing the display: type, the parent container, changing overflow types, etc. All to no effect. I simply can't figure out why the <pre> tags seems to be ignoring the whitespace settings.
FYI, the site link is here if you are interested. The original CSS theme is here, and the new CSS theme is here. You can see a screwed up source example here.
EDIT to add calculated CSS results, although it all appears to be minor formatting differences:
Good/old calculated:
New/broken calculated:
EDIT -- SOLUTION
It ended up being the Render() method of a MasterPage for a BlogEngine theme has logic to strip whitespaces from the rendered results. So CSS and whitespace was a red herring, there was no whitespace to strip.
It seems the formatting in your example got messed up. The whitespace directives doesn't do anything, because there actually is no whitespace left to preserve. I downloaded your page and quickly added some newlines and tabs. Now the first few lines look correctly (just as far as I added formatting):
Here is the diff between the two versions of the html document: http://pastebin.com/KTh9BTGi (Ignore the "no newline at end of file" part). Maybe you added some code on the server that removes newlines and unnecessary spaces?
Well, it seems any HTML tag was not closed properly on the new HTML Theme markup.
If you are editing your blog on the browser, copy/paste the html code into a great text editor with language syntax support and verify if syntax highlight gets crazy at some line.
I'm writing a web application which needs to bring the stored paragraphs into the front web. The text come from excel work sheet and contains control characters like indent. I want to show the text in the exactly manner as it was in excel. How can I do that then? Thanks in advance.
Without seeing your text to begin with, my initial suggestion would be to wrap it in pre-formatted tags. Note that this won't work for formatting like italics, underlines, etc. Merely white-space:
<pre>
Anything within these tags will
maintain its original formatting. Spaces, new lines, and all.
</pre>
It would be easier for you to save your excel file as web page into new file and use the html of this new file in your application.
You might want to check out RTF-to-HTML conversion.