I have a series of lines of text that each begin with a large bullet and space and are seperated by br tags.
br tags are being used because Blogger replaces the p tags with those.
I want to indent any wrapped line of text that does not start with a large bullet character so as to emulate a bulleted list. The wrapped text should line up with the red lines.
Blogger's home page post snippets strip out list tags.
● Some Text. More Text. Even More Text. Additional Text. <br>
● Some Text. More Text. Even More Text. Additional Text. <br>
● Some Text. More Text. Even More Text. Additional Text. <br>
● Some Text. More Text. Even More Text. Additional Text. <br>
The home page page used for Blogger accounts shows a small text snippet of each post + the post title and a thumbnail 1st image used in the post.
The snippet widget only recognizes some styling tags, the a tag and the br tag. List tags are stripped out. Blogger replaces p tags with br tags.
I use lists to display my content within posts and want to emulate a list in the snippets. Here is how two vertically stacked lists appear in the home page snippet. This sucks!
I've added a span / section at the beginning of each li with a large bullet inside. This is hidden on the actual post page via code inside the head. The content of this span / section, the large bullet, is shown within the snippet on the home page although the actual span / section tags will be stripped by the snippet. A br tag is added at the end of each li tag to force a new line within the snippet - this br tag does not change the appearance of the actual post.
This emulates the list found on the actual post, but I've not been able to emulate the indentation for any wrapped text.
<b>List Title 1</b>
<ul><div class="outer">
<li><section class="pointer">● </section><i>This is some sample text in the first li tag of the list, with more text to follow..<br>
</li>
</div>
<div class="outer">
<li><section class="pointer">● </section>This is some sample text in the second li tag of the list, with more text to follow. Some more text here as promised.</i>.<br>
</li>
</div>
<div class="outer">
<li><section class="pointer">● </section>This is some sample text in the third li tag of the list, with more text to follow. Some more text here as promised. More text here also and her also.<br>
</li>
</div>
<div class="outer">
<li><section class="pointer">● </section>A similar <i>Seiler</i> This is some sample text in the fourth li tag of the list, with more text to follow. Some more text here as promised. More text here also and her also.<br>
</li>
</div>
<div class="outer">
<li><section class="pointer">● </section>This is some sample text in the fifth li tag of the list, with more text to follow. Some more text here as promised. More text here also and her also. Cemetery.<br>
</li>
</div>
</ul>
I have added 427+ lines of custom code to an exsisting Blogger template.
Related
I am using a process system which allows me to set up email templates. The template includes a variable/placeholder for a <br>-separated list of links, which I can't change.
Template mail body example:
<p>Here's your link list:</p>
{!LinkList}
which generates mail bodies like this:
<p>Here's your link list:</p>
Link 1<br>
Link 2<br>
Link 3<br>
I want to display all of these links as a bulleted list. I can wrap <ul> tags around the {!LinkList} placeholder, but I can't force <li> tags inside it. Is there another way, e.g. by styling the <a> tags with list-style-type to show up with bullets?
I've tried the following, but it didn't work:
<p>Here's your link list:</p>
<ul style="list-style-type:bullet;">
{!LinkList}
</ul>
A popular online forum that I post to does not have the ability to create inline code spans in posts. Therefore, I'm creating a userscript in Tampermonkey to turn code blocks into inline code spans unless they're immediately following a line break <br>. I've made a Tampermonkey script so far that injects a style into the <head> of the online forum, using the following selector:
br + code {
background-color: yellow;
}
<body>
<h2>Example A (this is correct)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
<code>But after a line break, the code is yellow!</code>
</p>
<h2>Example B (unwanted behaviour)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text...
<code>...but the code is still yellow!</code>
</p>
<h2>Example C</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text and an empty span <span></span>...
<code>and that makes the code not yellow anymore!</code>
</p>
</body>
Example A works perfectly, selecting only the code span that immediately follows the line break. However, example B has unwanted behvaiour.
The problem with example B is that there is plaintext content in between the line break <br> and the inline code span. It seems like the CSS selector is selecting the code span after the line break even if there is plain text content in between them and making it yellow, but I don't want that.
Example C is an HTML way of fixing this issue. I added an empty <span> in between the <br> and the <code>. This caused the CSS style not to select the code, deciding that the code was not the first element to follow the <br>.
But I would prefer a CSS-side fix to this issue. What is it, if any?
Unfortunately, because of this forum having strict policies on what tags are allowed in forum posts, any alternate methods won't work. I need an answer that actually solves the posed qustion, and I can't change the HTML provided in any way, otherwise it's likely to get stripped from my forum post. The following is a list of what I have tried. In all of the following cases the additional info will be stripped:
Attempting to put CSS classes on the parts I want to style.
Attempting to add attributes other than font-size to a section of text.
The only reason that the empty span solution (example C) works for me is that the forum server lets you set font sizes with <span style="font-size: 12px">. If I were to go through with what I have now, I would need to surround part of the line before the inline code span with this.
This isn't a CSS issue, but rather a misunderstanding of the semantics and purpose of the <p> and <br> tag. Here is a great SO post talking about semantics and their importance.
TL:DR: Restructure your HTML to be semantically correct before worrying about your CSS, and use CSS classes as appropriate rather than complicating your code with sibling selectors:
.highlighted {
background-color: yellow;
}
<p>Your first paragraph</p>
<p>A second paragraph without the linebreak</p>
<code class="highlighted">... code that is highlighted ...</code>
<p>A third paragraph</p>
<code>... this code isn't highlighted ...</code>
Why you don't put all element that you need to change background to
<div style="background-color: yellow;">
<br>
<p>
</div>
Using :nth-child() selector, <code>...<\code> can inherit its background color from its parent element or can override with a custom background color. For example, it can be implemented in your given HTML as below:
br + code {
background-color: yellow;
}
h2:nth-child(3) + p code:nth-child(3) {
background-color: inherit;
}
<body>
<h2>Example A (this is correct)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
<code>But after a line break, the code is yellow!</code>
</p>
<h2>Example B (unwanted behaviour)</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text...
<code>...but the code is still yellow!</code>
</p>
<h2>Example C</h2>
<p>
This text is not yellow. <code>This code is not yellow.</code>
<br>
After a line break, there is more text and an empty span <span></span>...
<code>and that makes the code not yellow anymore!</code>
</p>
</body>
I have following MD code for one of my GitHub page.
<p align="justify">
Text Text Text.
</p>
<p align="justify">
**Text** Text Text.
`Text` Text.
</p>
While the first paragraph tag works Okay as there is no Markdown editing done inside it, text inside second paragraph tag is not Formatted as it should be. (No Bold, no quotes)
Why is it so?? And how to use Markdown editing inside paragraph then?
The Markdown rules plainly state:
Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.
That said, GitHub Pages uses Kramdown to parse Markdown, and Krandown has a slightly different behavior which gives you more flexibility. In fact, Kramdown's documentation states:
If an HTML tag has an attribute markdown="1", then the default mechanism for parsing syntax in this tag is used.
In other words, do this:
<p align="justify" markdown="1">
**Text** Text Text.
`Text` Text.
</p>
And you will get the following output:
<p align="justify">
<strong>Text</strong> Text Text.
<code>Text</code> Text.</p>
Kramdown is smart enough to recognize that you are inside a <p> tag, and does not wrap the individual lines in new <p> tags, which would be invalid HTML. If you actually want each line to be a separate paragraph, then you should use a <div> to wrap everything. Like this:
<div align="justify" markdown="1">
**Text** Text Text.
`Text` Text.
</div>
Which results in this output:
<div align="justify">
<p><strong>Text</strong> Text Text.</p>
<p><code>Text</code> Text.</p>
</div>
For completeness, it should be noted that GitHub READMEs and Gists do not use the same Markdown parser. Instead they use an extended Commonmark parser, which handles Markdown in raw HTML differently that the two ways described above. In Commonmark, whether the content of a raw HTML block is parsed as Markdown or not depends on whether the content is wrapped by blank lines. In that case, the proper way would be to do this:
<div align="justify">
**Text** Text Text.
`Text` Text.
</div>
However, as GitHub will strip out the align attribute, there isn't any point it doing that on pages hosted on github.com (such as READMEs). There is also the problem that Commonmark is not smart enough to detect that the wrapping raw HTML tag is a <p> tag, and wraps each line in another <p>, resulting in invalid HTML. Therefore, you must use a <div> in that case.
While the use-blank-lines method of telling the parser to parse the contents as Markdown is a more elegant solution that markdown="1", it is only supported by Commonmark parsers, which Kramdown is not. Therefore, as long as GitHub Pages uses Kramdown, you need to follow Kramdown's rules.
I'm building an asp.net application and I'm using a <br /> element inside one of my ListItems. This isn't recommended but it works anyway.
Is there another way to break a line in HTML? (not CSS!)
I use alot and other characters like &close;. Is there some equivalent for breaklines using &<code> ?
You can use the "pre" tag to send text aleady breaked. Example:
<pre>
LINE 1
LINE 2
LINE 3
</pre>
Another option is to use Paragraphs:
<p> Line 1 </p>
<p> Line 2 </p>
Paragraphs can be surrounded by <p> tags.
<p>This is my first paragraph.</p>
<!-- a line break will be rendered here -->
<p>This is my second paragraph.</p>
If your content is a list, you can markup each list item with <li> tags and surround the whole list with either <ul> or <ol> tags for unordered or ordered lists, respectively. The latter have numbers on the left instead of bullets.
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
For non-semantic blocks, you can surround content in <div> tags.
The HTML tag that does not ignore white space by default is <pre>:
The HTML <pre> element (or HTML Preformatted Text) represents
preformatted text. Text within this element is typically displayed in
a non-proportional ("monospace") font exactly as it is laid out in the
file. Whitespace inside this element is displayed as typed.
All others would require CSS to do so.
I am not sure about short code for new line in html but there are block elements in html.
A block element takes entire width of container and element after it will be on next line.
for example
<p></p> or <div></div>
You can also use <pre>, now every new line in editor/code will reflect in browser without any special code or element.
This is a very small HTML question that I am sure you guys will answer quickly. I post things on my website like this
<div id="content">
<p>
<hh>Header text here</hh>
Post information here, text and stuff.
</p>
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
</p>
</div>
but when I try to insert a <center> or alight left tag, the <p> closes automatically, and everything after the <center> tag is outside the paragraph box. I used inspect-element in firefox, and I can see it closes with a </p> that I never typed, right before any calls to centered text.
For example:
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
<center>This text is centered</center>
</p>
is rendering as this:
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
</p>
<center>This text is centered</center>
</p>
This is really frustrating, and if someone could help me out that would be amazing. using <div align-right> also doesn't work. If it helps, I can set the entire <p> to align any way and it works.
It ONLY breaks when I differ from the set orientation within that tag.
From w3school :
Use CSS to center text!
The tag is not supported in HTML5. Use CSS instead.
The element is deprecated in HTML 4.01.
http://www.w3schools.com/tags/tag_center.asp
It is because center acts like a p. And you cannot put a p in a p.
EDIT : To answer to your comment, you should probably do this :
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
<span>This text is centered</span>
<p>
And in your css add this
#content p span { display:block; text-align:center; }
(It also works with an a tag if you want it)
That's probably because you can't use a hh-tag in a p-tag then. (Not sure, but that's mostly)