Changing the font size of a list in a rich text editor: List-points slide away - html

In a qtextedit with html I am changing the fontsize via the mousewheel.
It should change the size of each character, e.g.+1 or -1.
It works, slowly, but it works. The problem is now if I change the size of a html list (created via QTextCursor.createList()). As you see in the picture, the "Test" after resizing always starts at the same position (as intended), but the black points move. I'd like them to stay on the same position no matter how big the text is. I have no clue how to do that, I already tried setMarging, setIndent, setTextIndent...
def change_fontsize(self, direction):
cur=self.textedit.textCursor()
oldPosition=cur.position()
if cur.hasSelection():
begin=cur.anchor()
end=cur.position()
if begin>end:
helper=end
end=begin
begin=helper
else:
cur.select(QTextCursor.Document)
begin=0
plainText=self.textedit.toPlainText()
end=len(plainText)
for i in range(begin,end):
cur.setPosition(i)
cur.movePosition(QTextCursor.NextCharacter, QTextCursor.KeepAnchor)
fmt=cur.charFormat()
charSize=fmt.fontPointSize()
if direction=="up":
fmt.setFontPointSize(charSize+1)
else:
fmt.setFontPointSize(charSize-1)
cur.mergeCharFormat(fmt)

Related

How to vertically align picture in line using python-docx

I am adding a picture (some latex converted into a PNG using matplotlib) to my text using the following code:
par = doc.add_paragraph()
par.add_run().text = 'foo bar baz'
par.add_run().add_picture('pic.png')
par.add_run().text = 'blah blah blah'
This works OK, except that the picture pic.png is not vertically aligned in the rest of the text in the document:
I can get the alignment manually in MS Word by adding a character style with the advanced vertical alignment property set to "lowered by 10pt":
The problem is that I have no idea how to do this programatically using python-docx. Conceptually the steps would be to compute the size of the image, create a character style that was lowered by half that size minus half the size of the font and apply the style to the run containing the picture. How do you create a raised or lowered font style in python-docx?
For reference, here is pic.png:
Your image has a fairly large (transparent) border around it. I added a single pixel border inside its extents here to make it visible:
I expect Word is aligning the bottom of the image with the baseline (as expected). One approach would be to see if there was a way you could specify zero bottom border.
You could also try subscript on that image run. I'm not sure what it would do but it's worth a try. So something like this:
run = par.add_run()
run.add_picture('x.png')
run.font.subscript = True
If you find the run that you manually set to "lowered by 10pt", you can view the XML for it like this (aircode):
run = vertically_adjusted_run() # however you get ahold of it
print(run._element.xml)
I expect you'll see something like this:
<w:r>
<w:rPr>
<w:position w:val="20"/>
...
... where the w:position element sets the adjustment from the baseline. The value is specified in half-points.
Anyway, neither this adjustment nor even that low-level element are supported by python-docx yet, so you'd need to get in there with lxml calls to do the needful if you wanted it badly enough.

Chrome character that is invisible but searchable

I work in a research project, and we have a python script that generates html texts that have a number of words highlighted. I would like to make the position of these highlighted words in the texts visible on the scroll bar. One way we could do this is by adding a special character (e.g. "$") after each of the marked words, and then run a search on this character.
We would like this character to be invisible, in order not to mess up the text visually.
I tried making a span class named "hidden", with font size 0. This does the job of hiding the $ sign, but Chrome search suddenly does not indicate the location on the scroll bar anymore. The search box still shows there are 57 results for "$", but the scroll bar highlights are gone, and clicking the "up" and "down" buttons does not bring me to the location of the next result.
I also tried inserting invisible commas (ampersandic;) in the text, but did not manage to search for these.
Other solutions, anyone?
Thanks a lot!
You can use opacity: 0 which will visually hide the element but it will not remove the space of character.
To minimise the space you can decrease the font size to the minimum like font-size: 1px

Reduce area of svg text

I am currently creating a word cloud using an in house developed library, it uses the svg element text to display the words, the problem I have encounter is that the area of some words sometimes overlaps other words as you can see if you inspect test1 in this jsfiddle, this becomes a problem if the words must be clickable.
I want to know if it is possible to reduce the area of the text to the minimum, just wrapping the word, a small padding is accepted.
I have already tried the solution posted in this answer but it didn't work.
I would prefer a css solution if it exists rather than messing with svg but if there is no other option that will do.
Edit: Ok, enough reputation to post images. What I currently have:
What I would like to have:
There are two problems; I currently have only a solution to one. Your text example is misleading. Try Text1g instead to see the descent (i.e. the amount of space below the baseline which the g needs). If you do this, then you'll see that the texts really overlap - you just don't notice because your test text doesn't contain a good set of test characters.
Apart from that, I see that the element is 67px high while the font-size is only 60px. I don't see where the additional 7 pixels are coming from. It's not padding and not margin :-/
Why do you need to know the minimum bounding box?
If it is because you are linking with the element, or applying click events to the words, then you should investigate the pointer-events attribute.
You possibly want something like:
<text ... pointer-events="fill">ejecutar</text>
You will only get events when the pointer is over the fill of the words. This might be a bit fiddly for clicking though because the holes in words will not be clickable.
You could ease that by putting an invisible <rect> of an appropriate size in front of the word with pointer-events="fill". The "fill" value will attract events for where the fill would be even if it is invisible. However that requires you know the bbox of the word, which we already established you don't have (?).
You could give the words an invisible fat stroke and use pointer-events="all". The invisible stroke will make the clickable area (invisbly) fatter and hence the inter-word holes smaller.

display text as square symbols instead of letters

Is there a simple css way to display text with every letter replaced with a filled square?
My idea was to find a font-family that has squares for all letters, but I didn't find anything like that existing. Google is no friend as it gives hits of posted issues with boxes that appear when fonts fail in some way.
Letters should be displayed as squares, not replaced with squares. Also, I need to be able to control the square fill color with the usual html/css.
I'm fine to use font-face, but am trying to avoid the learning curve for creating my own font.
Update: here is an example:
div.innerHTML = "some arbitrary text".
Should be displayed like this:
"■■■■ ■■■■■■■■■ ■■■■".
#NoobEditor is right although. Many online font editors available (e.g.: http://fontark.net/farkwp/ ), you can create such font family in few minutes and can embed with your app.
Get a square font, define it in your we page style, asign it to an object, a div must work, put your text there. Voila.

Force chart labels to remain inside frame

RS2008 - pie chart
I have 'outside' labels with lines pointing to the segment (although strangely this only appears to work in pdf output)
However (see pic below) the label is appearing outside the scope of the chart area
How can I force it to remain inside? (MinimumRelativePieSize is set to 70)
(pic below missing due to not being able to find an image host that isn't blocked by corp firewall)
Picture a pie chart of 25 slices, with radial lines that project through the sides.
The line from each slice then becomes horizontal, before disappearing outside.
(above actually fits tune of "Lucy in the Sky with Diamonds")
I set MinimumRelativePieSize to 50 and it seems to work ok.
I guess they need to implement a MaximumRelativePieSize property.