My goal is to wrap some text around a shape defined with svg.
The shape is path looking like a rectangle with a 1/2 circular hole.
<svg width="100px" height="200px" viewBox="0 0 50 100">
<path id="halfcircleLeft" d="M 50 26 ... Z" style="fill: lightgray;"></path>
</svg>
In the html, I define the wrapping element with a <div>
<div class="svgLeftShape"></div>
and I set his css like this:
.svgLeftShape
{
shape-outside: url(#halfcircleLeft);
float: left;
width: 100px;
height: 200px;
}
Should work, isn't it?
Well, it is not working as expected!
It sounds like the text is wrapped around the rectangle defined through the css width and height. The shape reference to the svg element is ignored ...
What am I doing wrong?
In the following Fiddle, I have added a 'css' circle on the right just to make sure I was not missing the basics.
Warning :
First, you should know that the CSS Shapes Module Level 1 actualy
(april 2015) has the status of "Candidate Recommendation". As this
means it is a work in progress, it may change at any moment and
therefore shape-outside should not be used other than for
testing.
This property is actualy only supported by chrome and requires the -webkit- vendor prefix that you haven't included in your code.
Here is an example that you will only be able to view in chrome 37+ :
.shape {
-webkit-shape-outside: circle(100px);
shape-outside: circle(100px);
width: 200px;
height: 200px;
float: left;
}
<div class="shape"></div>
<p>It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused
oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation,
deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific
points, mobilizing the joints, and warming the body.</p>
Using images for the shape-outside :
I am not aware wether you can use svg images or not. But you can use .png images and the shape will be generated according to the transparency of the image :
img{
-webkit-shape-outside: url(http://i.imgur.com/yZcQxF6.png);
shape-outside: url(http://i.imgur.com/yZcQxF6.png);
float: left;
width: 100px;
height: 200px;
}
<img src="http://i.imgur.com/yZcQxF6.png"/>
<p>It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body. It includes techniques such as applying herbal-infused oils to the body, manual tissue manipulation, deep tissue work, identifying & acting on specific points, mobilizing the joints, and warming the body.</p>
Note : If your image has several levels of transparency, you can control which level defines the outline of the shape with the shape-image-threshold propery.
EDIT: The use of svgs for the shape-outside property is discussed in the CSS shapes module level 2
These are experimental features and I would not recommend using them yet since they will only render properly in chrome.
.tri {
-webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
float: left;
width: 40%;
height: 12ex;
background-color: lightgray;
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.rect {
-webkit-shape-outside: inset(0 0, 100px 100px 100px 100px);
width: 100px;
height: 80px;
float: left;
background-color: tomato;
-webkit-clip-path: inset(0 0, 100px 100px 100px 100px);
}
.circ {
height: 100px;
width: 100px;
-webkit-shape-outside: circle(40%);
shape-outside: circle(40%);
transition: shape-outside 1s;
float: left;
background-color: tomato;
-webkit-clip-path: circle(40%);
}
.circ:hover {
-webkit-shape-outside: circle(50%);
shape-outside: circle(50%);
-webkit-clip-path: circle(50%);
}
<div class="main">
<div class="tri"></div>
<p>
This is really experimental and "CHROME ONLY", Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum
dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet
</p>
<div class="rect"></div>
<p>
This is really experimental and "CHROME ONLY", Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum
dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet
</p>
<div class="circ"></div>
<p>
HOVERING ?! hell yh :D HOVERING ?! hell yh :D HOVERING ?! hell yh :D HOVERING ?! hell yh :D HOVERING ?! hell yh :D HOVERING ?! hell yh :D HOVERING ?! hell yh :D HOVERING ?! hell yh :D HOVERING ?! hell yh :D HOVERING ?! hell yh :D HOVERING ?! hell yh :D
HOVERING ?! hell yh :D HOVERING ?! hell yh
</div>
All of this wil only work in chrome at time of writing unfortunately.
Now the syntax does say that images are allowed.
So this wil only
#image {
-webkit-shape-outside: url("http://i198.photobucket.com/albums/aa49/Nightlady070/Cliparts/Internet_Explorer_7_Logo_red_zps21ac8b59.png");
shape-outside: url("http://i198.photobucket.com/albums/aa49/Nightlady070/Cliparts/Internet_Explorer_7_Logo_red_zps21ac8b59.png");
-webkit-shape-image-threshold: 0.1;
shape-image-threshold: 0.1;
float: left;
}
<img id="image" src="http://i198.photobucket.com/albums/aa49/Nightlady070/Cliparts/Internet_Explorer_7_Logo_red_zps21ac8b59.png" />
<p>Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet,
Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Loremt, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet</p>
Now to SVG images SVG as shape draft
Seems there is no support for this element yet, since it only finds the outer most svg and not the shape elements.
#image {
-webkit-shape-outside: url("http://images3.wikia.nocookie.net/__cb20120330024139/logopedia/images/d/d7/Google_Chrome_logo_2011.svg");
shape-outside: url("http://images3.wikia.nocookie.net/__cb20120330024139/logopedia/images/d/d7/Google_Chrome_logo_2011.svg");
-webkit-shape-image-threshold: 0.1;
shape-image-threshold: 0.1;
float: left;
}
<img id="image" src="http://images3.wikia.nocookie.net/__cb20120330024139/logopedia/images/d/d7/Google_Chrome_logo_2011.svg" />
<p>Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet,
Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet,
Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet</p>
Related
I have a .txt file that contains text that is formatted like so:
Neque porro, quisquam est qui
dolorem ipsum quia, dolor (sit amet)
consectetur, adipisci velit,Lorem Ipsum
dolor sit amet, consectetur adipiscing elit
tempor ipsum quia, minim (sit minim)
consectetur, adipisci velit,Lorem Ipsum
There are multiple text items like this. I wish to make it so that they are all one liners each so I can paste them into excel like so
Neque porro, quisquam est qui dolorem ipsum quia, dolor (sit amet) consectetur, adipisci velit, Lorem Ipsum
dolor sit amet, consectetur adipiscing elit tempor ipsum quia, minim (sit minim) consectetur, adipisci velit,Lorem Ipsum
Would there be any way to do this for files with a lot of text that are like this?
If you did want to use Excel (as your question indicates) this formula work if you had all text in a single cell
=SUBSTITUTE(SUBSTITUTE(A1,CHAR(10)&" "," "),char(10),REPT(char(10),2))
Im looking for a fast way to get a word in a huge text which starts with "TEST-"
Lorem ipsum dolor sit amet, consectetur adipisici elit "TEST-12345"
Lorem ipsum dolor sit amet, consectetur adipisici elit 'TEST-12345'
Lorem ipsum dolor sit amet, consectetur adipisici elit " TEST-12345 "
Lorem ipsum dolor sit amet, consectetur adipisici elit "TEST-12345" sed diam nonumy eirmod tempor invidunt
Lorem ipsum dolor sit amet, consectetur adipisici elit " TEST-12345 "
I have tried to archive this with different loops, but im getting Unexpected identifier everytime
Lorem ipsum dolor sit amet, consectetur adipisici elit "TEST-12345"
Lorem ipsum dolor sit amet, consectetur adipisici elit 'TEST-12345'
Lorem ipsum dolor sit amet, consectetur adipisici elit " TEST-12345 "
Lorem ipsum dolor sit amet, consectetur adipisici elit "TEST-12345" sed diam nonumy eirmod tempor invidunt
Lorem ipsum dolor sit amet, consectetur adipisici elit " TEST-12345 "
var text = 'Lorem ipsum dolor sit amet, consectetur adipisici elit "TEST-12345"\
Lorem ipsum dolor sit amet, consectetur adipisici elit \'TEST-12345\'\
Lorem ipsum dolor sit amet, consectetur adipisici elit " TEST-12345 "\
Lorem ipsum dolor sit amet, consectetur adipisici elit "TEST-12345" sed diam nonumy eirmod tempor invidunt\
Lorem ipsum dolor sit amet, consectetur adipisici elit " TEST-12345 "'.split("\\")
for (var x in text) {
console.log(text[x])
}
Use .match method.
text.match(/TEST-\d{5}/g)
st = 'Lorem ipsum dolor sit amet, consectetur adipis.cing elit. Aliquam sem odio...'
n = []
for i in st:
n.append(i)
for i in n:
if i in [',','.']:
n.remove(i)
string = ''
for i in n:
string += i
print(string)
input string :
Lorem ipsum dolor sit amet, consectetur adipis.cing elit. Aliquam sem odio...
output :
Lorem ipsum dolor sit amet consectetur adipiscing elit Aliquam sem odio.
expected output :
Lorem ipsum dolor sit amet consectetur adipiscing elit Aliquam sem odio
There is one dot . at the end of the sentence that is not getting removed.
You can use str.join for the task:
st = "Lorem ipsum dolor sit amet, consectetur adipis.cing elit. Aliquam sem odio..."
print("".join(ch for ch in st if ch not in {*",."}))
Prints:
Lorem ipsum dolor sit amet consectetur adipiscing elit Aliquam sem odio
How about using replace() for both commas and periods?
>>> st.replace(",", "").replace(".", "")
'Lorem ipsum dolor sit amet consectetur adipiscing elit Aliquam sem odio'
Calling some_list.remove(something) while iterating over some_list changes the length of list and introduces the potential to skip elements. The solution is to copy the list first. See this thread.
Also, remove() removes the first occurrence, not the current index, so you may get unusual results using it. Best case scenario, iterating over the list repeatedly from the front is harmful to time complexity. I don't find remove() useful often in practice.
I'd write this using a simple regex:
>>> import re
>>> st = 'Lorem ipsum dolor sit amet, consectetur adipis.cing elit. Aliquam sem odio...'
>>> re.sub(r"[.,]", "", st)
'Lorem ipsum dolor sit amet consectetur adipiscing elit Aliquam sem odio'
Other remarks:
This is Shlemiel the painter's algorithm:
for i in n:
string += i
Better is "".join(n)
n is usually reserved for "number". Prefer lst or L for a generic list.
Allocating a list inside a loop adds unnecessary overhead: if i in [',','.']:.
The code:
n = []
for i in st:
n.append(i)
can be better expressed as list(st).
Say I have a sentence with multiple variables as follows:
"lorem ipsum {a, b} dolor {c, d, e} sit amet"
Assuming the letters in the braces are variables, how would one go about generating a group of sentences out of all possible combinations of the variables?
Note:
The number of variable groups or variable count within each group of variables is unknown.
The expected output for this particular example would be:
"lorem ipsum {a} dolor {c} sit amet"
"lorem ipsum {b} dolor {c} sit amet"
"lorem ipsum {a} dolor {d} sit amet"
"lorem ipsum {b} dolor {d} sit amet"
"lorem ipsum {a} dolor {e} sit amet"
"lorem ipsum {b} dolor {e} sit amet"
In general case ("number of variable groups... count within each group ... is unknown") we should parse the initial string (let's do it with a help of regular expressions) and then enumerate all the combinations.
C# Code:
using System.Text.RegularExpressions;
...
private static IEnumerable<string> Generator(string source) {
// parsing: variables extracted: array of variables and their possible values
string[][] variables = Regex
.Matches(source, #"\{.*?\}")
.OfType<Match>()
.Select(match => match
.Value
.Trim('{', '}')
.Split(',')
.Select(item => "{" + item.Trim() + "}")
.ToArray())
.ToArray();
// now we should enumerate all possible variables' values
int[] indexes = new int[variables.Length];
do {
// code golf : ugly side effects but short code
int at = 0;
yield return Regex.Replace(source, #"\{.*?\}", match => variables[at][indexes[at++]]);
for (int i = 0; i < indexes.Length; ++i)
if (indexes[i] < variables[i].Length - 1) {
indexes[i] = indexes[i] + 1;
break;
}
else
indexes[i] = 0;
}
while (!indexes.All(index => index == 0));
}
Demo:
string source = #"lorem ipsum {a, b} dolor {c, d, e} sit amet";
string report = string.Join(Environment.NewLine, Generator(source));
Console.Write(report);
Outcome:
lorem ipsum {a} dolor {c} sit amet
lorem ipsum {b} dolor {c} sit amet
lorem ipsum {a} dolor {d} sit amet
lorem ipsum {b} dolor {d} sit amet
lorem ipsum {a} dolor {e} sit amet
lorem ipsum {b} dolor {e} sit amet
Another example:
// 3 groups of variables with strange names
string source = #"lorem ipsum {A + 2, B, C?} dolor {XY, PQR} sit {eh?, bla-bla-bla} amet";
Console.Write(string.Join(Environment.NewLine, Generator(source)));
Outcome:
lorem ipsum {A + 2} dolor {XY} sit {eh?} amet
lorem ipsum {B} dolor {XY} sit {eh?} amet
lorem ipsum {C?} dolor {XY} sit {eh?} amet
lorem ipsum {A + 2} dolor {PQR} sit {eh?} amet
lorem ipsum {B} dolor {PQR} sit {eh?} amet
lorem ipsum {C?} dolor {PQR} sit {eh?} amet
lorem ipsum {A + 2} dolor {XY} sit {bla-bla-bla} amet
lorem ipsum {B} dolor {XY} sit {bla-bla-bla} amet
lorem ipsum {C?} dolor {XY} sit {bla-bla-bla} amet
lorem ipsum {A + 2} dolor {PQR} sit {bla-bla-bla} amet
lorem ipsum {B} dolor {PQR} sit {bla-bla-bla} amet
lorem ipsum {C?} dolor {PQR} sit {bla-bla-bla} amet
So basically you want to iterate two different arrays for all possible combinations of a single value from each array - Nested loops is probably the best option.
Here's a c# code to do that, with comments on each line for easy translation to other languages:
var values0 = new string[] {"a", "b"}; // All possible values for first slot
var values1 = new string[] {"c", "d", "e"}; // All possible values for second slot
foreach(var val0 in values0) // Iterate first array
{
foreach(var val1 in values1) // Iterate second array
{
var result = $"Lorem ipsum {val0} dolor {val1} sit amet"; // Insert values to slots
Console.WriteLine(str); // output
}
}
Result:
Lorem ipsum a dolor c sit amet
Lorem ipsum a dolor d sit amet
Lorem ipsum a dolor e sit amet
Lorem ipsum b dolor c sit amet
Lorem ipsum b dolor d sit amet
Lorem ipsum b dolor e sit amet
I have long section titles in my document like:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi.
Now I want to place it in page header but it is to long for it. Is there any way to cut text in LaTeX? I want to have it like that:
Lorem ipsum dolor sit amet, consectetur...
Is that possible?
https://tex.stackexchange.com/questions/6862/how-can-i-display-a-short-chapter-name-in-the-header-and-a-long-chapter-name-in-t