How can you intent a normal bullet list as Word would do when rendering from Markdown? By default it's left aligned.
e.g. instead of
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do ei
Item 1
would be come....
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do ei
tab tab tab 1. Item 1
Related
I have a two-column layout page and I want it to meet these requirements:
The right column can contain a large data grid of content and the user should be able to scroll that vertically and horizontally. It's way too much to show it all on the page at once.
The left column, which has a slim width and short height, should always appear on the page for xl screen size.
The left column has two buttons that must appear at the bottom of the page for xl screen size.
The page should be responsive for tablet screen sizes. On tablet, the right column should slide below the left column and should itself still be horizontally scrollable. It's acceptable (though not optimal) for it to retain a vertical scroll bar itself too.
I have this working except for making the right column horizontally scrollable. How can I get a horizontal scroll for the right column?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
<div class="container-fluid h-100">
<div class="p-2 h-100">
<div class="row d-flex h-100">
<div class="col-xl-3 col-sm-12 d-flex flex-column h-100 align-items-start">
<h2>Left Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="mt-auto">
<button href="javascript:void(0)">Button 1</button>
<button href="javascript:void(0)">Button 2</button>
</div>
</div>
<div class="col-xl-9 col-sm-12 d-flex flex-column h-100" align="center">
<h2>Right Column</h2>
<div class="limited mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
CSS:
html, body {
height: 100%
}
.limited {
flex-basis: 0px;
flex-grow: 1;
overflow-y: auto;
}
If I follow you correctly, adding
white-space: nowrap;
to that column should let it scroll horizontally and not wrap the text.
I am trying to scrape dynamically generated pages with BeautifulSoup, sometimes I get loose text and somethings I don't.
How can I extract the loose text below, I tried to use next sibling but the text is not contained in any tags.
<div class="div1">
<table class="table1"></table>
<ul></ul>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>
What you might do is use a css selector with select div.div1 ul and match the next_sibling
html_doc = """
<div class="div1">
<table class="table1"></table>
<ul></ul>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>
"""
from bs4 import BeautifulSoup
result_page = BeautifulSoup(html_doc, 'html.parser')
for text in result_page.select("div.div1 ul"):
print(text.next_sibling.strip())
Is there a more elegant way of achieving this via CSS? The idea is to shape text like an Arc.
Thanks!
#p1 {
text-indent: 0;
}
#p2 {
text-indent: 10px;
}
#p3 {
text-indent: 20px;
}
#p4 {
text-indent: 30px;
}
#p5 {
text-indent: 40px;
}
#p6 {
text-indent: 30px;
}
#p7 {
text-indent: 20px;
}
#p8 {
text-indent: 10px;
}
#p9 {
text-indent: 0px;
}
<p id="p1">Lorem ipsum dolor sit amet</p>
<p id="p2">Lorem ipsum dolor sit amet</p>
<p id="p3">Lorem ipsum dolor sit amet</p>
<p id="p4">Lorem ipsum dolor sit amet</p>
<p id="p5">Lorem ipsum dolor sit amet</p>
<p id="p6">Lorem ipsum dolor sit amet</p>
<p id="p7">Lorem ipsum dolor sit amet</p>
<p id="p8">Lorem ipsum dolor sit amet</p>
<p id="p9">Lorem ipsum dolor sit amet</p>
If you want a perfect arc you can use shape-outside to create a circle or ellipse that the text will follow.
You can see how this works
However support is spotty to say the least.
div{
shape-outside: circle(50%);
width: 140px;
height: 140px;
float: left;
}
<div></div>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>
You can achieve the same result with one class and one rule on that class. The trick is to repeat the elements inside each other:
.blubb {
margin: 5px 0 5px 10px;
}
<div class="blubb">
Lorem ipsum dolor sit amet
<div class="blubb">
Lorem ipsum dolor sit amet
<div class="blubb">
Lorem ipsum dolor sit amet
<div class="blubb">
Lorem ipsum dolor sit amet
<div class="blubb">Lorem ipsum dolor sit amet</div>
</div>
<div class="blubb">Lorem ipsum dolor sit amet</div>
</div>
<div class="blubb">Lorem ipsum dolor sit amet</div>
</div>
<div class="blubb">Lorem ipsum dolor sit amet</div>
</div>
<div class="blubb">Lorem ipsum dolor sit amet</div>
As Dale said, use shape-outside for a pure css solution. However due to browser support we have to find a lower-level solution.
Contains comments for non-jQuery solution, code contains jQuery.
var ps = 9;//paragraphs
var i = 1;//start id
var x = 0;//left position
var amount = 50;
for(i=1;i<ps;i++){
//calculate left position in arc
//(i/ps) gets value between 0 and 1, Math.PI is to make it radians for sine, *amount is max indent
//bearing in mind this bit can be changed to give more desired effect.
x = Math.sin(((i-1)/(ps-1))*Math.PI)*amount;
//get element using jquery and set its text-indent to x
//otherwise you could use document.getElementById('p'+i); and textIndent JS property if you dont want jQuery.
$('#p'+i).css('text-indent', x+'px');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p1">Lorem ipsum dolor sit amet</p>
<p id="p2">Lorem ipsum dolor sit amet</p>
<p id="p3">Lorem ipsum dolor sit amet</p>
<p id="p4">Lorem ipsum dolor sit amet</p>
<p id="p5">Lorem ipsum dolor sit amet</p>
<p id="p6">Lorem ipsum dolor sit amet</p>
<p id="p7">Lorem ipsum dolor sit amet</p>
<p id="p8">Lorem ipsum dolor sit amet</p>
<p id="p9">Lorem ipsum dolor sit amet</p>
How can I add a class attribute to a list, when using markdown? For example, what Markdown would generate the following HTML?
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li class="inner-class">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>
Markdown doesn't allow for CSS classes to be added as it is a text formatting language rather than a coding language. It's mostly used for rich text documents and the conversion to HTML is more of an extra ability rather than what it was built for.
You can still have HTML within your markdown document so something like this is possible
Heading
=======
Just a plain paragraph
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li class="inner-class">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>
Alternatively, if you know the exact position of the list item you want to change, you can do it within css with pseudo classes
ul {
list-style: none;
}
ul li {
background: lightgrey;
}
ul li:last-child {
background: grey;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>
In jekyll v4.2.0 with kramdown I was able to add a class, in my case "error" to a list item, maybe it works also with your markdown parser.
My Text, will end with a list.
- ele 1
- ele 2
- {: .error }ele 3
- ele 4
Will generate this html
<p>My Text, will end with a list.</p>
<ol>
<li>ele 1</li>
<li>ele 2</li>
<li class="error">ele 3</li>
<li>ele 4</li>
</ol>
Plain "Markdown doesn't allow for CSS classes to be added", but there are some derivatives like markdown extra, who allow you set the id and class attribute on certain elements using an attribute block. But these special attribute blocks can be used only with:
headers
fenced code blocks
links
images
Unfortunately not with "your" lists, but maybe you can us it with a link.
Assume you have this HTML:
<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
Note that the hierarchy is flat.
Now try to select the "middle pair" of <p> elements. Is this possible? I really can't figure out how.
This selector only grabs the first <p> following the <h1>:
h1:nth-of-type(2) + p
But this selector grabs the correct pair of <p> elements plus all the following <p> elements that appear after the pair we want:
h1:nth-of-type(2) ~ p
Is it possible?
No JavaScript. No markup changing. Generic solution. Any number of <h1>s or <p>s are allowed, and the number two, in this case, is arbitrary.
I'm thinking maybe this is possible using some using the :not() selector, but I can't seem to figure it out. Kind of like selecting the "general siblings" and then excluding as necessary, or something similar.
Due to the way the general sibling combinator works, it is not possible to limit a selection of siblings to a specific range or group, even of consecutive siblings. Even the :not() selector won't be of any help here.
You will have to use JavaScript to target the right elements. jQuery's .nextUntil() method immediately springs to mind.