I'm using CSS (via JQuery , but not relevant to this question) to highlight certain elements within an HTML file: I'm using "pre" tags to separate out logical elements in my file, but I noticed that "pre" tags seem to leave newlines between elements.
Can I get rid of these using CSS ?
(Or what shall I use instead of "pre" tags? The text elements may contain HTML elements themeselves : which should not be rendered, and should be shown literally as source-code: hence my initial choice with "pre" tags)
Here's an example of the HTML I'm using: (Requires http://docs.jquery.com/Downloading_jQuery for this example)
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js">
</script>
</head>
<body>
<pre class="error">
This is an error line.
stack.trace.blah.blah
more.blah.blah
yadda.yadda.blah</pre>
<pre class="ok">
this is not an error line.it contains html
<html><head></head><body>hello</body></html></pre>
<pre class="error">
This is an error line.
stack.trace.blah.blah
more.blah.blah
yadda.yadda.blah</pre>
<pre class="ok">
<script type="text/javascript">
$("pre.error").css({"background-color":"red","color":"white","display":"block","padding":"0", "margin":"0"});
</script>
</body>
</html>
I'm using Firefox 3.6.12.
This is what the code above results in:
And this is simulated output of what I want (switched to yellow, only because I used my vim editor to this, pretend it's red!)
SOLUTION:
Is to use 'display:inline' for all PRE tags. (Previously I was only applying the 'display:inline' to the 'error' tags in the example above, and had forget to do the same for 'ok' pre tags.
That's because <pre> has a default style display: block, use in your css pre { display: inline}
as for your edit, you need to add margin: 0; to ALL the pre blocks, not just the ones you want to style:
pre {
display: inline;
margin: 0;
}
You should try to avoid styling with JS whenever possible, but if you really must:
<script type="text/javascript">
$("pre.error").css({"background-color":"red","color":"white","display":"block","padding":"0", "margin":"0"});
$("pre").css({ "margin" : 0, "padding" : 0 })
</script>
The pre tag is a block level element, so it will behave like any other block level element and stack vertically (like paragraph, div, etc). You can set it to display:inline instead, I guess.
But better would be to use the <code> tag, which is inline by default.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code
You can force the pre tag to be a inline element by adding this in head:
<style type='text/css'> pre {display: inline;} </style>
You can fix with css as follow
pre {
width: 600px; /* specify width */
white-space: pre-wrap; /* CSS3 browsers */
white-space: -moz-pre-wrap !important; /* 1999+ Mozilla */
white-space: -pre-wrap; /* Opera 4 thru 6 */
white-space: -o-pre-wrap; /* Opera 7 and up */
word-wrap: break-word; /* IE 5.5+ and up */
}
Why are you using jQuery for something that can be achieved via CSS?
<html>
<head>
<style type="text/css">
pre {
display: block;
padding: 0;
margin: 0;
}
pre.error {
background-color: red;
color: white;
}
</style>
</head>
<body>
<pre class="error">
This is an error line.
stack.trace.blah.blah
more.blah.blah
yadda.yadda.blah</pre>
<pre class="ok">
this is not an error line.it contains html
<html><head></head><body>hello</body></html></pre>
<pre class="error">
This is an error line.
stack.trace.blah.blah
more.blah.blah
yadda.yadda.blah</pre>
</body>
</html>
pre { margin: 0; }
should give you the rendering in the second picture. Your snippet probably doesn't work because you don't remove the default margin from the pre.ok.
You can convert HTML source to use special chars instead of < > (like < >). You can do this with notepad++ using TextFX Plugin (Encode HTML) or in eclipse you can do this with anyedit tools.
you can use padding:0 and margin:0 for pre in css
Don't use pre, instead escape the characters you want to display literally. Like < and > for < and >.
When you render your page, you can use a function like htmlentities() (PHP) to escape these characters for you.
Related
Is there any possibility how to target HTML tag <title> in CSS for content: ""?
It would be pretty neat to control both the <h1> and the title of the page by one attribute.
I've tried something like
title::before{
content: "Hello world"
}
If this won't be possible, what other solution might be appropriate?
Thanks!
You sure can, in fact, as all elements in a HTML document are plain <tags> they can be made visible and get id, class, style (inline or style block) or any other selector attribute, whether global or custom. Even contenteditable and make them runtime editable (won't work on <script>, though).
Below a snippet displaying <title> with pseudo selectors.
...And if you really want to dig into showing runtime styles, links and javascript check out this Codepen I created some time ago. Beware, not for beginners. Hit the bottom/right [show styles] button in the pen and see the magic happen...
<html>
<head>
<title>Document Title, quite long some we can forse a line break (well, on smaller windows anyway...)</title>
<style>
/* Because it is hidden by default */
head {
display: block;
}
title {
display: block; /* default hidden too */
width: 100%;
min-height : 2rem;
line-height: 2rem;
hyphens: auto;
cursor: pointer; overflow: hidden;
font-size: larger; text-align: center;
background-color: hsl(45,100%,50%);
}
title::before { content: 'Before: ' ; font-weight: bold }
title::after { content: ' :The End!'; font-weight: bold }
body { background-color: Gainsboro }
</style>
</head>
<body>
<p>Some regular paragraph element</p>
</body>
</html>
I'm looking into building an editor with Slate or ProseMirror and seeing some strange behavior with Chrome around the caret position and selection area when using an inline element. Issue 1 is shown in the first picture below. When the text cursor position is behind the "f", the caret is shown at the top of the image. Issue 2 is in the second image - selecting the text shows a highlighted area that's as tall as in the inlined element. Is there any way to control this behavior and instead have the caret show at the position of the text and only highlight the space around the text (even if the inline image is making the line height larger)
I'd like to mimic the behavior here, from firefox:
Example images were produced using the ProseMirror demo here: https://prosemirror.net/examples/basic/
A minimum example (thanks #Kaiido) with JSBin:
<div contenteditable>Test text<img src="https://upload.wikimedia.org/wikipedia/en/9/9b/Yoda_Empire_Strikes_Back.png">Testing</div>
Not sure how this behaves on other operating systems, but I'm using macOS Catalina.
You can fix the selection problem by using flexbox. I originally tried using align-items: flex-end but I was getting some weird arrow key behavior. align-items: baseline seems to work as of now.
The image problem is very strange. I noticed that Chrome steps over SVG elements differently than IMG elements. As of now, the latest version of Chrome "waits" before skipping over IMG, but allows the user to skip over an SVG like any other character (left arrow skips character closest to svg). This may be caused by underlying default styles, but I do not know.
I was about to post my findings, but I realized that Firefox did not work the same. Firefox has some really weird arrow key behavior when using SVG and/or Flexbox. The cursor goes above the image, but only when pressing the right arrow key.
However, Firefox works just fine with a normal IMG element.
Long story short, you will have to render different image elements based on the browser.
// chrome contenteditable ads spaces between spans.
// firefox does not, so you have to add them manually.
if (navigator.userAgent.indexOf("Firefox") > 0) {
Array.from(document.querySelectorAll('#editable span')).forEach(el => {
el.innerHTML += " "
})
}
.flexit {
display: flex;
align-items: baseline;
flex-wrap: wrap;
}
span {
display: inline-block;
white-space: pre;
}
.img-wrapper, .img-wrapper + span {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>chrome</h1>
<div contenteditable="true" class="flexit">
<span>test</span><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
</svg><span>Here</span><span>is</span><span>a</span><span>longer</span><span>sentence.</span><span>Notice</span><span>I</span><span>wrapped</span><span>each</span><span>word</span><span>in</span><span>a</span><span>span.</span><span>This</span><span>makes</span><span>the</span><span>text</span><span>appear</span><span>like</span><span>it</span><span>is</span><span>inline.</span>
</div>
<h1>firefox</h1>
<div contenteditable="true" id="editable">
<span>test</span><span class="img-wrapper"><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200" /></span><span>test</span><span>Here</span><span>is</span><span>a</span><span>longer</span><span>sentence.</span><span>Notice</span><span>I</span><span>wrapped</span><span>each</span><span>word</span><span>in</span><span>a</span><span>span.</span><span>This</span><span>makes</span><span>the</span><span>text</span><span>appear</span><span>like</span><span>it</span><span>is</span><span>inline.</span>
</div>
</body>
</html>
P.S. A lot of editors I have used default to full-width images.
Edit: I just realized that it appears my Firefox solution also works in the latest Chrome. I think this works because I wrapped the text nodes in SPAN elements. The SVG element still works differently in Chrome, but wrapping text in SPAN seems to solve most of the problems.
First, don't manipulate the ProseMirror DOM as shown in the JQuery example. In fact you most likely will run into DOM or content issues. ProseMirror uses its own DOM node and markup schema. If you want to manipulate the ProseMirror DOM or add plugin then take a look at the Markup, Plugin & Node Apis. Ive attached a simple example of text align Markup code. Side note, the reason Grammarly and others don't have ProseMirror plugins is because of the DOM approach / models. I should add the ProseMirror is very good, but to be honest it is more of an advanced developer solution.
That aside, the good news the problems you have a purely CSS. ProseMirror strips out all classes and resets the DOM / CSS so if you import a document or cut and paste all / most your classes will be gone.
Simplest approach to solve that is to wrap the editor in a div and assign a class to the div then add styles and child styles to that class. The reason to wrap it is that the css selectors such as img, p, h, etc will only apply to the tags inside of the editor class. Without that you end up with obvious CSS clashes.
CSS
Don't use flexbox for inline images as flexbox is not a grid system. In fact, if I recall you cannot inline direct children of the flex container.
inline on p tags and img will not wrap text and you will end up with the problems listed above.
if you want to truly wrap and remove the cursor issue your have then you need to use floats e.g. float: left; (recommended approach)
add small or large padding and border boxing to help with collapsing edges and also helps with separation of image and text
the cursor problem you are experiencing is because when you inside the image block it vertically aligned to top, which you can fix with vertical-align: baseline; but without floats you will still have a cursor that matches the height of the image and not the text. Also, if you don't use floats the cursor will be elongated as the line height is effectively the same height as the image. The blue color is just selector, which you change using CSS as well.
<html>
<div class="editor">
<!-- <editor></editor>-->
</div>
</html>
<style>
.editor {
position: relative;
display: block;
padding: 10px;
}
.editor p {
font-weight: 400;
font-size: 1rem;
font-family: Roboto, Arial, serif;
color: #777777;
display: inline;
vertical-align: baseline;
}
.editor img {
width: 50px;
float: left;
padding: 20px;
}
</style>
Node extension example
Example of Node extension for text align that can be added as a toolbar. Much longer post, but even if you did create a Node / plugin for images you have to deal with the manner in which it render i.e. base64 versus url, etc. which btw, makes perfect sense as to why they did that, but just add complexity to developers looking for SEO, etc.
export default class Paragraph extends Node {
get name() {
return 'paragraph';
}
get defaultOptions() {
return {
textAlign: ['left', 'center', 'right'],
}
}
inputRules({ type }) {
return [
markInputRule(/(?:\*\*|__)([^*_]+)(?:\*\*|__)$/, type),
]
}
get schema() {
return {
attrs: {
textAlign: {
default: 'left'
}
},
content: 'inline*',
group: 'block',
draggable: false,
inclusive: false,
defining : true,
parseDOM: [
{
tag: 'p',
style: 'text-align',
getAttrs: value => value
}
],
toDOM: (node) => [ 'p', {
style: 'text-align:' + node.attrs.textAlign,
class: `type--base type--std text-` + node.attrs.textAlign
}, 0 ]
};
}
commands ({ type }) {
return (attrs) => updateMark(type, attrs)
}
}
I tried to do a little hack with HTML and css.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div contenteditable><p class="new1" contenteditable>Hello</p><div contenteditable>
<img src="https://upload.wikimedia.org/wikipedia/en/9/9b/Yoda_Empire_Strikes_Back.png"></div>
<p class="new2">Testing</p>
</div>
</body>
</html>
//css
.new2{
font-size:30px;
margin-top:-35px;
margin-left:252px;
padding-left:79px;
}
img{
margin-left:75px;
padding-left:5px;
padding-right:5px;
margin-top:-300px;
}
.new1{
text-overflow:hidden;
padding-top:260px;
margin-bottom:-20px;
font-size:30px;
padding-right:10px;
}
Here is jsfiddle https://jsfiddle.net/wtekxavm/1/
A script element that got styled as display:block appears visible. Why is it possible and is there any real use case where it is desired?
td > * {
display: block;
}
<table>
<tr>
<td>
<script type="text/javascript">
var test = 1;
</script>von 1
</td>
</tr>
</table>
The HTML5 specification defines a style sheet that user agents (like browsers) are expected to use. Section 10.3.1 lists the styles for "Hidden elements":
#namespace url(http://www.w3.org/1999/xhtml);
[hidden], area, base, basefont, datalist, head, link,
meta, noembed, noframes, param, rp, script, source, style, template, track, title {
display: none;
}
embed[hidden] { display: inline; height: 0; width: 0; }
As you can see, it applies display: none; to script.
This is the only "barrier" between your users and hidden script elements. It’s perfectly fine and intended to be able to overwrite styles from user-agent style sheets within author style sheets (and of course also within user style sheets).
Why someone might want to use it? One use case is displaying content without having to escape characters like </>, similar to the old xmp element. The script element can be used not only for scripts, but also for data blocks (i.e., for anything with a MIME type).
Why can <script> Tags be visible?
Because they are HTML elements like any other and there is no reason to write special case rules in the HTML specification (which would add complexity) to prevent CSS from applying to them.
Any element can be styled. Take, for example:
head { display: block; }
title { display: block; }
meta { display: block; }
meta[charset]:after { display: block; content: attr(charset); }
meta[content]:after { display: block; content: attr(content); }
Is there any Usecase where it is wanted?
Certainly no common ones, but general rules aren't designed to make sense for everything that you can apply them to. They are designed for the common cases.
Another (not common) use case:
I sometimes use <script> tags for brief HTML code examples in style guides. That way I don't have to escape HTML tags and special characters. And text editor tag autocomplete and syntax highlighting still work. But there's no easy way to add syntax highlighting in the browser.
script[type="text/example"] {
background-color: #33373c;
border: 1px solid #ccc;
color: #aed9ef;
display: block;
font-family: monospace;
overflow: auto;
padding: 2px 10px 16px;
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
}
<p>Here comes a code example:</p>
<script type="text/example">
<div class="cool-component">
Some code example
</div>
</script>
Possible use case: for debugging purposes.
You could apply a class at the document level, eg. <body class="debugscript">, then use some CSS:
body.debugscript script {
display: block;
background: #fcc;
border: 1px solid red;
padding: 2px;
}
body.debugscript script:before {
content: 'Script:';
display: block;
font-weight: bold;
}
body.debugscript script[src]:before {
content: 'Script: ' attr(src);
}
Script tags are hidden by default by using display:none;. Unor1 explains the underlying language specification. However, they are still part of the DOM and can be styled accordingly.
That said, it is important to keep in mind exactly what a script tag is doing. While it used to be accompanied by types and languages, that is no longer required. It is now assumed that JavaScript is in there, and as a result browsers will interpret and execute the script as it is encountered (or loaded) from these tags.
Once the script has been executed, the content of the tag is only text (often hidden) on the page. This text can be revealed, but it can also be removed because it is just text.
At the bottom of your page, right before the closing </html> tag, you could very easily remove these tags along with their text and there would be no changes to the page.
For example:
(function(){
var scripts = document.querySelectorAll("script");
for(var i = 0; i < scripts.length; i++){
scripts[i].parentNode.removeChild(scripts[i]);
}
})()
This will not remove any functionality, as the state of the page has already been altered and is reflected in the current global execution context. For example, if the page had loaded a library such as jQuery, removing the tags will not mean that jQuery is no longer exposed because it has already been added to the page's runtime environment. It is essentially only making the DOM inspection tool not show script elements, but it does highlight that the script elements once executed really are only text.
1. unor, Thu Jul 07 2016, wutzebaer, "When should tags be visible and why can they?", Jul 1 at 10:53, https://stackoverflow.com/a/38147398/1026459
Following is my HTML
Branding
Is it possible to access using CSS to access anchor tag's text?
Something like this is what I want? The html is dynamically generated, so please don't mention to have id's or to have any classes.
a[text='Branding']
{
}
People already told you that you CAN'T select text in CSS. But there's some workaround in my opinion.
I don't know what you want to do, possibly a bad thing, but if I were you I'd take this bad practice:
/*First you hide the text*/
a {
font-size: 0; /* hide text */
text-decoration: none !important; /* get rid of that awful underline */
}
/* then you insert a new element using :before */
a:before {
content: 'Branding'; /* This is the text you want for the new element */
color: #333;
font-size: 15px; /* Bring back the text inside the anchor for this new element */
font: 24px sans-serif;
}
fiddle: http://jsfiddle.net/tsu7z546/
In case you want to try out jQuery:
$(document).ready(function(){
var brandingAnchor = $('a:contains("Branding")');
brandingAnchor.hide();
});
Remember! Every time you write jQuery code, you must have already called jQuery library on your page, just like this:
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
//Your jQuery code goes HERE, just below the library
$(document).ready(function(){
var brandingAnchor = $('a:contains("Branding")');
brandingAnchor.hide();
});
</script>
Is it possible to use horizontal scrolling rather than text wrapping in a code section highlughted with pygments when working in Jekyll.
Source of document:
{% highlight bash %}
Full thread dump OpenJDK Client VM (19.0-b09 mixed mode, sharing):
"Attach Listener" daemon prio=10 tid=0x0a482400 nid=0x5105 waiting on condition [0x00000000]
java.lang.Thread.State: RUNNABLE
....
{% endhighlight %}
Generated page (Notice the hex address being wrapped rather than scrolled):
Find your highlight.css at:
/PROJECT_ROOT/assets/themes/THEME_NAME/css/highlight.css
and add this line at the end:
pre { white-space: pre; overflow: auto; }
Thanks #manatwork for the solution.
this answer deals specifically with using pygments and jekyll on github pages
the highlighting is generated thusly:
<div class="highlight">
<pre>
<code>
... pygments highlighting spans ...
</code>
</pre>
</div>
the css that will get you where you want is:
// -- selector prefixed to the wrapper div for collision prevention
.highlight pre code * {
white-space: nowrap; // this sets all children inside to nowrap
}
.highlight pre {
overflow-x: auto; // this sets the scrolling in x
}
.highlight pre code {
white-space: pre; // forces <code> to respect <pre> formatting
}
I was using Jekyll and Twitter Bootstrap, and the following is what worked for me in the end:
.highlight pre {
word-wrap: normal;
}
.highlight pre code {
white-space: pre;
}
As for me, using the latest and greates Jekyll & highlighter releases, this nailed the issue:
/* Make code block overflow */
.highlight pre {
display: inline-block;
}