### Implementation guide We would want to extend our current, limited [image attribute syntax](https://docs.gitlab.com/ee/user/markdown.html#change-the-image-or-video-dimensions) to accept a class name, such as `{.float-left}`. Class names would be limited to a very specific set of GitLab controlled CSS classes. The current implementation is in https://gitlab.com/gitlab-org/gitlab/blob/master/lib/banzai/filter/attributes_filter.rb, and is roughly based on https://github.com/jgm/commonmark-hs/blob/master/commonmark-extensions/test/attributes.md. Any enhancement should fall follow that spec. To keep it simple, initially we should continue to only support images. We would also need to add awareness in the rich text editor, which is currently aware of the image size syntax. Though an open question is whether or not the rich text editor could handle displaying images with a float. --- _original issue description_ <!--The first four sections: "Problem to solve", "Intended users", "User experience goal", and "Proposal", are strongly recommended, while the rest of the sections can be filled out during the problem validation or breakdown phase. However, keep in mind that providing complete and relevant information early helps our product team validate the problem and start working on a solution.--> ### Problem to solve As a wiki editor, I want to be able to align text and images in GitLab-Flavored MarkDown, so I can avoid having to use HTML. ### Intended users HarvHouHacker, among others who mainly use GitLab for their wiki pages. ### User experience goal The user should be able to use GitLab-Flavored MarkDown as an easy way to align images and text using some combination of symbols to do it. For instance: **Left Alignment (Default in Latin languages):** `[Left aligned text]{left-align}`\ **Centered:** `[Centered text]{center}`\ **Right Alignment (Default for Hebrew and Arabic):** \`\[Right aligned text\]{right-align} This is probably not the best example of how this can be achieved, but some kind of alignment in MarkDown should be added for GitLab wikis and other MarkDown documents. ### Proposal GitLab adds new lines of code that alters the already-existing code in order to add the alignment feature, and this is made available via GitLab Beta before alowing the feature to be used in a stable release. Users will find the MarkDown alignment easier to use than HTML tags which allow the same function, although the HTML tags and properties are still there for those who want to use them. ### Further details <!--Include use cases, benefits, goals, or any other details that will help us understand the problem better.--> ### Permissions and Security <!--What permissions are required to perform the described actions? Are they consistent with the existing permissions as documented for users, groups, and projects as appropriate? Is the proposed behavior consistent between the UI, API, and other access methods (e.g. email replies)?--> ### Documentation <!--See the Feature Change Documentation Workflow https://docs.gitlab.com/ee/development/documentation/workflow.html#for-a-product-change * Add all known Documentation Requirements in this section. See https://docs.gitlab.com/ee/development/documentation/feature-change-workflow.html#documentation-requirements * If this feature requires changing permissions, update the permissions document. See https://docs.gitlab.com/ee/user/permissions.html--> ### Availability & Testing <!--This section needs to be retained and filled in during the workflow planning breakdown phase of this feature proposal, if not earlier. What risks does this change pose to our availability? How might it affect the quality of the product? What additional test coverage or changes to tests will be needed? Will it require cross-browser testing? Please list the test areas (unit, integration and end-to-end) that needs to be added or updated to ensure that this feature will work as intended. Please use the list below as guidance. * Unit test changes * Integration test changes * End-to-end test change See the test engineering planning process and reach out to your counterpart Software Engineer in Test for assistance: https://about.gitlab.com/handbook/engineering/quality/test-engineering/#test-planning--> ### What does success look like, and how can we measure that? <!--Define both the success metrics and acceptance criteria. Note that success metrics indicate the desired business outcomes, while acceptance criteria indicate when the solution is working correctly. If there is no way to measure success, link to an issue that will implement a way to measure this.--> ### What is the type of buyer? <!--What is the buyer persona for this feature? See https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/buyer-persona/ In which enterprise tier should this feature go? See https://about.gitlab.com/handbook/product/pricing/#four-tiers--> ### Is this a cross-stage feature? <!--Communicate if this change will affect multiple Stage Groups or product areas. We recommend always start with the assumption that a feature request will have an impact into another Group. Loop in the most relevant PM and Product Designer from that Group to provide strategic support to help align the Group's broader plan and vision, as well as to avoid UX and technical debt. https://about.gitlab.com/handbook/product/#cross-stage-features--> ### Links / references