Explore the community Forums Lectora Lectora Suggestions Vertical text alignment in text boxes

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #306859 Score: 0
    Profile photo of Drago Ivanov
    Drago Ivanov
    Member
    beginner
    intermediate
    friend finder
    wise owl
    group mod
    product reviewer
    curious george
    2 pts
    @divanov9498

    I am not sure if this has been suggested previously, but one feature I would like to see is the ability to vertically align text in text boxes.

    #306861 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Member
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    114 pts
    @jvalley4735

    How would you imagine this feature to be different then stretching the text box?

    #306872 Score: 1
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    202 pts
    @Klaatu

    Hi Drago. One of the strength’s of Lectora is in its ability to extend its capabilities using the HTML Extension. In this case you want to add your own Cascading Style Sheet (CSS) to adjust the text box padding. This may sound like a daunting task but trust me it is so simple and powerful that you’ll find yourself using it a lot.

    To do this open up notepad and type out the following:

    .myTextBox{

    padding-top: 20px;

    }

    Now go to save this (save as) but when you do change the .txt extension to “All Files” and save it as myStyles.css.

    If you’ve never done this before, congratulations, you just created your first cascading style sheet. The .myTextBox (the period is important) is called a selector. In this case it is a custom class. The stuff you put between the curly brackets ({})are called Declarations and they contain property:value pairs. Our declaration is to assign the top padding (padding-top) a value of 20 pixels (px). This will adjust the vertical alignment you are asking for. Each property value pair must end with a semi-colon. The attached graphic is called the box model and you can see which properties you can declare. This is powerful stuff. If you want to move the text over away from the left side of the text box adjust the padding-left property, etc. Experiment, it’s fun.

    Back in Lectora insert an HTML Extension. Change the type to Cascading Style Sheet and browse to point to the file you just saved.

    Now for the last important part. Go to the text box you want to assign this rule and in its appearance tab click the little down arrow icon to the right of the word appearance. A requested box should open allowing you to enter a class name. In there type the name of the class you created without the period this time (that’s a little confusing, I know, but it is what it is). Preview and viola! Adjust the pixel amount(s) and properties to your liking. You can add the same class to any number of text boxes.

    My two cents. While I understand that it may be easier to have something like this built in I believe it would be more cost effective for the end user, considering I’m sure that development costs are built into the programs price, if Trivantis dedicated their development time to offering more complicated features such a Boolean logic in actions and page tracking (visited of page = true/false). A little bit of web design knowledge goes a long way in building e-learning. I hope this helps.

    Darrel

    p.s. I almost forgot to mention. Save the CSS file you created and use it in any number of projects, it’s reusable. This is a time saver and you can keep the same styling from project to project. Check out this link to see a list of the properties you can declare with CSS!

    This post has received 1 vote up.
    #307920 Score: 0
    Profile photo of Drago Ivanov
    Drago Ivanov
    Member
    beginner
    intermediate
    friend finder
    wise owl
    group mod
    product reviewer
    curious george
    2 pts
    @divanov9498

    Thank you, Darrel. This is most certainly an advise I will follow in my development in the future…

    #315482 Score: 0
    Profile photo of kain
    kain
    Member
    beginner
    intermediate
    Group Member
    @kain

    Hi Darrel,

    thank you for your post and explanation.

    Seems to go into the right direction for me, but I cannot get it running. 🙁

    Would also like to have something more flexible to be able to use this class on different text boxes with varying line numbers, heights etc.

    Any suggestions or ideas?

    Best,
    Kai

    #315519 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    202 pts
    @Klaatu

    Not sure why its not working for you. I attached a sample that has three text boxes styled in three different ways. A few things to note:

    Lectora places the actual text in a span. The span is inside a paragraph which resides in the div that is assigned the HTML name of your text box. When you add a class via the appearance tab you are adding it to the div (parent element).

    Also, Lectora places styling for most objects inline. Inline styling has a higher specificity and takes precedence over externally styled elements. You can usually force a rule to take precedence by using the !important declaration but use it sparingly and only when there are no other options.

    If you need specific assistance, message me so we do not clog up the forum. It would help if you included an emaple of what you are having trouble with.

    Darrel

     

    • This reply was modified 3 years, 9 months ago by Profile photo of Darrel Somoza Darrel Somoza. Reason: Forgot to include the attachment
    Attachments:
    1. Title-6.zip
    #315589 Score: 0
    Profile photo of kain
    kain
    Member
    beginner
    intermediate
    Group Member
    @kain

    Darrel,

    thank you for your help and for the sample title.

    It looks also good for me, meaning the styles you added to the text are displayed properly. The challenge I face is that I did not manage to center the text in the text box vertically. I am probably lacking css skills! 😉

    Best, Kai

    #316429 Score: 0
    Profile photo of Drago Ivanov
    Drago Ivanov
    Member
    beginner
    intermediate
    friend finder
    wise owl
    group mod
    product reviewer
    curious george
    2 pts
    @divanov9498

    I am looking at positioning text in the absolute centre of the text box. Once I am done, I will post on the forum. If someone out there has already worked it out, please post your solution.

    #316453 Score: 2
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    202 pts
    @Klaatu

    There are multiple ways to do this (read above) however in the interest of saving you time this is probably the easiest. Add a style sheet with the following and then assign the class through the appearance menu.

    .centerMe {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    }

    Attached example in version 12.

    Darrel

     

    This post has received 2 votes up.
    Attachments:
    1. Center.zip
    #317720 Score: 0
    Profile photo of Drago Ivanov
    Drago Ivanov
    Member
    beginner
    intermediate
    friend finder
    wise owl
    group mod
    product reviewer
    curious george
    2 pts
    @divanov9498

    Why try to re-invent the wheel indeed, Darrel. Thank you!

    A lekker (Afrikaans) tip.

    • This reply was modified 3 years, 8 months ago by Profile photo of Drago Ivanov Drago Ivanov.
    #435396 Score: 2
    Profile photo of Jack Gayler
    Jack Gayler
    Member
    beginner
    intermediate
    friend finder
    picture perfect
    advanced
    group mod
    entry
    entry
    entry
    entry
    3 pts
    @jgayler6869

    Hi Jennifer,

     

    I believe this a basic feature that is a MUST in any authoring tool.

    I am also a user of Articulate Storyline and find I use the Vertical Align Text feature countless times. It’s a quick and easy way of making sure text is aligned correctly without having to worry about margins and paragraph spacing.

     

    Many of the courses I produce need to be translated into numerous languages, currently, after every translation, we have to go in and make sure text is vertically aligned correctly as the amount of text shrinks/grows. If the text was automatically vertically aligned, we wouldn’t have to worry about this at all.

     

    It’s a really simple feature and I would love to see it added to Lectora, please!

     

    This post has received 2 votes up.
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.